Make WordPress Core

Ticket #26387: 26387.7.2.diff

File 26387.7.2.diff, 15.2 KB (added by melchoyce, 8 years ago)
  • wp-admin/about.php

     
    2121
    2222<h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1>
    2323
    24 <div class="about-text"><?php printf( __( 'Thank you for updating to WordPress 3.8! We&rsquo;re happy to bring you the most beautiful WordPress yet.' ), $display_version ); ?></div>
     24<div class="about-text"><?php printf( __( 'Thank you for updating to WordPress 3.8, the most beautiful WordPress yet.' ), $display_version ); ?></div>
    2525
    2626<div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    2727
     
    3636</h2>
    3737
    3838<div class="changelog">
    39         <h2 class="about-headline-callout"><?php echo ( 'Introducing a new, modern admin design' ); ?></h2>
     39        <h2 class="about-headline-callout"><?php echo ( 'Introducing a modern new design' ); ?></h2>
    4040        <img class="about-overview-img" src="<?php echo admin_url( 'images/about-overview.png' ); ?>" />
    4141
    4242        <div class="feature-section col three-col about-updates">
    4343                <div class="col-1">
    44                         <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
    45                         <h3><?php echo ( 'Modern aesthetics' ); ?></h3>
    46                         <p><?php echo ( 'Goodbye decoration, hello simplicity. We removed extraneous details, focusing on a cleaner, more streamlined admin design.' ); ?></p>
     44                        <img src="images/about-modern-aesthetics.png" />
     45                        <h3><?php echo ( 'Modern aesthetic' ); ?></h3>
     46                        <p><?php echo ( 'The new admin has a fresh, simple design that puts clarity and simplicity ahead of web design flourishes.' ); ?></p>
    4747                </div>
    4848                <div class="col-2">
    49                         <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
    50                         <h3><?php echo ( 'Improved typography' ); ?></h3>
    51                         <p><?php echo ( 'You might notice the type is a little bit bigger. We improved the typography, crafting a better reading experience.' ); ?></p>
     49                        <img src="images/about-typography.png" />
     50                        <h3><?php echo ( 'Clean typography' ); ?></h3>
     51                        <p><?php echo ( 'Open sans meets open source. WordPress&#8217;s new typography is upright, friendly, and optimized for web and mobile interfaces.' ); ?></p>
    5252                </div>
    5353                <div class="col-3 last-feature">
    54                         <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
    55                         <h3><?php echo ( 'Higher contrast' ); ?></h3>
    56                         <p><?php echo ( 'With bigger typography and both high and low contrast color schemes, our new admin design is great for users of all ages.' ); ?></p>
     54                        <img src="images/about-contrast.png" />
     55                        <h3><?php echo ( 'Refined contrast' ); ?></h3>
     56                        <p><?php echo ( 'What good is beautiful design if you can&#8217;t see it? Improved contrast gives you a better reading experience.' ); ?></p>
    5757                </div>
    5858        </div>
    5959</div>
     
    6666<div class="changelog">
    6767        <div class="feature-section col two-col">
    6868                <div>
    69                         <h3><?php echo ( 'Take WordPress with you anywhere with our responsive design' ); ?></h3>
    70                         <p><?php echo ( 'The WordPress admin is now completely responsive: you can work on your website easily from your smartphone or tablet. The full power of WordPress is at your fingertips, even when you’re on the go.' ); ?></p>
    71                         <h4><?php echo ( 'Naturally HiDPI' ); ?></h4>
    72                         <p><?php echo ( 'No more blurry edges &#8212; with the inclusion of vector icons and graphics, the admin is now entirely HiDPI, so you get the best viewing experience no matter what kind of computer or mobile device you use.' ); ?></p>
     69                        <h3><?php echo ( 'WordPress on every device' ); ?></h3>
     70                        <p><?php echo ( 'Whether you&#8217;re on your smartphone or tablet, your notebook or desktop, WordPress looks beautiful on every device. Now you can update your website wherever you are.' ); ?></p>
     71                        <h4><?php echo ( 'High definition is here' ); ?></h4>
     72                        <p><?php echo ( 'WordPress is sharper than ever; vector icons and graphics mean no more blurry edges. You get the best viewing experience no matter what type of device you use.' ); ?></p>
    7373                </div>
    7474                <div class="last-feature about-colors-img">
    7575                        <img src="<?php echo admin_url( 'images/about-colors.png' ); ?>" />
     
    8282<div class="changelog about-colors">
    8383        <div class="feature-section col one-col">
    8484                <div>
    85                         <h3><?php echo ( 'Now with more color' ); ?></h3>
    86                         <p><?php echo ( 'Your admin is not longer monochromatic &#8212; we&#8217;ve brought some more color to keep it looking fresh. You now have the option of four different default color schemes.' ); ?></p>
    87                         <p><?php echo ( 'Try them out below:' ); ?></p>
    88                         <img src="https://i.cloudup.com/NBlGusRk0H.png" style="border: 2px solid red; max-width: 99%; margin: 0;" />
    89                         <p><?php echo ( 'You can change your color scheme at any time from your profile page.' ); ?></p>
     85                        <h3><?php echo ( 'Pick a color' ); ?></h3>
     86                        <p><?php echo ( 'We&#8217;ve included four color schemes so that you can choose your favorite. Don&#8217;t like this striking new admin? Choose from any of the schemes below to change it in an instant.' ); ?></p>
     87                        <?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) :?>
     88                                <?php
     89                                /** This action is documented in wp-admin/user-edit.php */
     90                                do_action( 'admin_color_scheme_picker' );
     91                                ?>
     92                        <?php else : ?>
     93                                <img src="<?php echo admin_url( 'images/about-color-schemes.png' ); ?>" />
     94                        <?php endif; ?>
     95                        <p><?php echo ( 'To change your color scheme later, just visit your profile settings.' ); ?></p>
    9096                </div>
    9197        </div>
    9298</div>
     
    97103        <div class="feature-section col two-col">
    98104                <div>
    99105                        <h3><?php echo ( 'A new theme experience' ); ?></h3>
    100                         <p><?php echo ( 'A sleeker, faster, and more visual organization of your themes that is responsive.' ); ?></p>
    101                         <h4><?php echo ( 'Browse better' ); ?></h4>
    102                         <p><?php echo ( 'Enjoy a focused experience with theme screenshots at the center. Quickly search through your themes or add new ones.' ); ?></p>
     106                        <p><?php echo ( 'Finding and installing the right theme has never been easier.' ); ?></p>
     107                        <h4><?php echo ( 'Better browsing' ); ?></h4>
     108                        <p><?php echo ( 'Focus is placed on what&#8217;s important - your theme&#8217;s design. Search through your themes at a glance and add new ones with a click.' ); ?></p>
    103109                        <h4><?php echo ( 'Dive into the details' ); ?></h4>
    104                         <p><?php echo ( 'Expand a theme to see more information and preview it. Use the arrow navigation to quickly swift through your themes.' ); ?></p>
    105                         <h4><?php echo ( 'Easier updates' ); ?></h4>
    106                         <p><?php echo ( 'Identify immediately when a theme update is available.' ); ?></p>
     110                        <p><?php echo ( 'Need more information about any of your themes, just click to discover more, and use your keyboard&#8217;s navigation arrows to flip through all the themes you&#8217;ve got.' ); ?></p>
     111                        <h4><?php echo ( 'Stay updated' ); ?></h4>
     112                        <p><?php echo ( 'You can tell in an instant if a theme needs updated and, like so many things in WordPress, updating it takes just a second.' ); ?></p>
    107113                </div>
    108114                <div class="last-feature about-themes-img">
    109115                        <img src="<?php echo admin_url( 'images/about-themes.png' ); ?>" />
     
    119125
    120126        <div class="feature-section col one-col">
    121127                <div>
    122                         <h3><?php echo ( 'Our new default theme lets you create a responsive magazine website with an elegant, modern design.' ); ?></h3>
    123                         <p><?php echo ( 'Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content&#8217;s layout with a full width page template and a contributor page to show of your authors.' ); ?></p>
     128                        <h3><?php echo ( 'Turn your blog into a magazine' ); ?></h3>
     129                        <p><?php echo ( 'With a striking design that does not comprise on our trademark simplicity, Twenty Fourteen is our boldest default theme. Choose a grid or a slider to display featured content on your homepage. Customize your homepage with three widget areas or change your layout with two page templates.' ); ?></p>
    124130                        <p><?php echo ( 'Creating a magazine website with WordPress has never been easier.' ); ?></p>
    125131                </div>
    126132        </div>
  • wp-admin/css/wp-admin.css

     
    79487948        margin-bottom: 0;
    79497949}
    79507950
    7951 .about-wrap .feature-section.one-col div {
     7951.about-wrap .feature-section.one-col > div {
    79527952        margin: auto;
    79537953        width: 60%;
    79547954}
    79557955
    7956 .about-wrap .about-colors .one-col div {
     7956.about-wrap .about-colors .one-col > div {
    79577957        width: 100%;
    79587958}
    79597959
    7960 .about-wrap .feature-section.two-col div {
     7960.about-wrap .feature-section.two-col > div {
    79617961        position: relative;
    79627962        width: 50%;
    79637963        float: left;
    79647964}
    79657965
    7966 .about-wrap .feature-section.two-col div p {
    7967         margin-right: 3%;
    7968 }
    7969 
    7970 .about-wrap .feature-section.three-col div {
     7966.about-wrap .feature-section.three-col > div {
    79717967        position: relative;
    79727968        width: 30%;
    79737969        margin-right: 4.999999999%;
     
    79787974        margin-right: 0;
    79797975}
    79807976
    7981 .about-wrap .three-col.about-updates img {
    7982         margin: 0;
     7977.about-wrap .about-updates img {
     7978        margin: 2em 0 0 0;
     7979        border: 1px solid #DDD;
     7980        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     7981        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    79837982}
    79847983
    79857984.about-wrap .changelog .feature-section {
    79867985        overflow: hidden;
    79877986}
    79887987
    7989 .about-wrap .about-passwords {
    7990         margin: 20px 0;
    7991         padding: 1px 20px 10px;
    7992         background-color: #fff;
     7988.about-wrap .about-colors .scheme-list {
     7989        margin-bottom: 1em;
    79937990}
    79947991
    7995 .about-wrap .about-auto-update {
    7996         text-align: center;
    7997         background-color: #f9f9ef;
    7998         clear: both;
    7999         padding: 10px;
     7992.about-wrap .about-colors .color-option {
     7993        width: 24%;
     7994        padding-top: 10px;
    80007995}
    8001 
    8002 .about-wrap .about-auto-update.cool {
    8003         background-color: #eff9ef;
     7996.about-wrap .about-colors .color-option label {
     7997        display: inline-block;
     7998        margin: 0.25em 0 0.5em;
    80047999}
    80058000
    8006 .about-wrap .about-password-meter input {
    8007         font-size: 250%;
    8008         line-height: 1;
    8009         width: 100%;
    8010         display: block;
    8011         padding: 5px;
     8001.about-wrap .feature-section.two-col div p {
     8002        margin-right: 3%;
    80128003}
    80138004
    8014 .about-wrap .about-password-meter #pass-strength-result {
    8015         display: block !important;
    8016         font-size: 150%;
    8017         font-weight: normal !important;
    8018         -webkit-box-sizing: border-box;
    8019         -moz-box-sizing:    border-box;
    8020         box-sizing:         border-box;
    8021         width: 100%;
    8022         padding: 17px 0;
    8023         margin-bottom: 15px;
    8024 }
    8025 
    80268005.about-wrap .feature-section div p img {
    80278006        float: right;
    80288007        margin-left: 10px;
     
    1272712706        }
    1272812707
    1272912708        /*  About Page */
    12730         .about-wrap .feature-section.two-col div {
     12709        .about-wrap .feature-section.one-col > div,
     12710        .about-wrap .feature-section.two-col > div,
     12711        .about-wrap .three-col.about-updates > div  {
    1273112712                width: 100%;
    1273212713                margin: 0;
    1273312714                float: none;
    1273412715        }
    1273512716
    12736         .about-wrap .three-col.about-updates .col-1,
    12737                 /*.about-wrap .three-col.about-updates .col-2,*/
    12738         .about-wrap .three-col.about-updates .col-3 {
    12739                 padding: 0;
     12717        .about-wrap .about-colors .color-option {
     12718                width: 49%;
    1274012719        }
    1274112720
    12742         .about-wrap .three-col.about-updates .col-1 {
    12743                 width: 100%;
    12744                 padding-right: 210px;
    12745         }
    12746 
    12747         .about-wrap .three-col.about-updates .col-2 {
    12748                 position: relative;
    12749                 float: right;
    12750                 width: 180px;
    12751                 margin-left: -100%;
    12752         }
    12753 
    12754         .about-wrap .three-col.about-updates .col-3 {
    12755                 width: 100%;
    12756         }
    12757 
    12758         .about-wrap .about-password-meter input,
    12759         .about-wrap .about-password-meter #pass-strength-result {
    12760                 width: 99%;
    12761         }
    12762 
    1276312721        /* Moderate Comment */
    1276412722        .comment-ays {
    1276512723                border-bottom: none;
     
    1290012858                float: none;
    1290112859        }
    1290212860
    12903         .about-wrap .about-passwords {
    12904                 margin: 20px -20px;
    12905         }
    12906 
    1290712861        /* Align Add Media + Visual + Text tabs */
    1290812862        #wp-content-media-buttons a {
    1290912863                font-size: 14px;
  • wp-admin/js/about.js

     
    1 /* global pwsL10n:true */
     1/* global isRtl */
    22(function($){
    3         var password = 'Gosh, WordPress is grand.',
    4                 $input = $('#pass'),
    5                 shouldAnimate = true,
    6                 timesForAnimation = [280, 300, 305, 310, 315, 325, 330, 345, 360, 370, 380, 400, 450, 500, 600],
    7                 resultsCache = {},
    8                 indicatorString = $('#pass-strength-result').text();
    93
    10         function updateResult(){
    11                 var strength;
    12 
    13                 if ( typeof( resultsCache[ $input.val() ]) === 'undefined') {
    14                         strength = wp.passwordStrength.meter($input.val(), [], $input.val());
    15                         resultsCache[ $input.val() ] = strength;
    16                 } else {
    17                         strength = resultsCache[ $input.val() ];
     4        $(document).ready( function() {
     5                var $colorpicker, $stylesheet;
     6       
     7                $('.color-palette').click( function() {
     8                        $(this).siblings('input[name="admin_color"]').prop('checked', true);
     9                });
     10       
     11                $colorpicker = $( '#color-picker' );
     12                $stylesheet = $( '#colors-css' );
     13                if ( isRtl ){
     14                        $stylesheet = $( '#colors-rtl-css' );
    1815                }
     16       
     17                $colorpicker.on( 'click.colorpicker', '.color-option', function() {
     18                        var colors, css_url,
     19                                $this = $(this);
     20       
     21                        if ( $this.hasClass( 'selected' ) ) {
     22                                return;
     23                        }
     24       
     25                        $this.siblings( '.selected' ).removeClass( 'selected' );
     26                        $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
     27       
     28                        // Set color scheme
     29                        // Load the colors stylesheet
     30                        css_url = $this.children( '.css_url' ).val();
     31                        if ( isRtl ){
     32                                css_url = css_url.replace('.min', '-rtl.min');
     33                        }
    1934
    20                 $('#pass-strength-result').removeClass('short bad good strong');
    21                 switch ( strength ) {
    22                         case 2:
    23                                 $('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
    24                                 break;
    25                         case 3:
    26                                 $('#pass-strength-result').addClass('good').html( pwsL10n.good );
    27                                 break;
    28                         case 4:
    29                                 $('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
    30                                 break;
    31                         default:
    32                                 $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
    33                 }
    34         }
    35         function resetMeter(){
    36                 $input.val('');
    37                 $('#pass-strength-result').text(indicatorString);
    38                 $('#pass-strength-result').removeClass('short bad good strong');
    39         }
     35                        $stylesheet.attr( 'href', css_url );
    4036
    41         function animate(){
    42                 if (shouldAnimate === false)
    43                         return;
    44                 if ($input.val().length < password.length){
    45                         $input.val( password.substr(0, $input.val().length + 1) );
    46                         updateResult();
     37                        // repaint icons
     38                        if ( typeof wp !== 'undefined' && wp.svgPainter ) {
     39                                try {
     40                                        colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
     41                                } catch ( error ) {}
    4742
    48                         // Look like real typing by changing the speed new letters are added each time
    49                         setTimeout( animate, ( timesForAnimation[ Math.floor( Math.random() * timesForAnimation.length ) ] ) );
    50                 } else {
    51                         resetMeter();
    52 
    53                         // When we reset, let's wait a bit longer than normal to start again
    54                         setTimeout(animate, 700);
    55                 }
    56 
    57         }
    58 
    59         function begin(){
    60                 // we async load zxcvbn, so we need to make sure it's loaded before starting
    61                 if (typeof(zxcvbn) !== 'undefined')
    62                         animate();
    63                 else
    64                         setTimeout(begin,800);
    65         }
    66 
    67         // Turn off the animation on focus
    68         $input.on('focus', function(){
    69                 shouldAnimate = false;
    70                 resetMeter();
     43                                if ( colors ) {
     44                                        wp.svgPainter.setColors( colors );
     45                                        wp.svgPainter.paint();
     46                                }
     47                        }
     48                });
    7149        });
    7250
    73         // Act like a normal password strength meter
    74         $input.on('keyup', function(){
    75                 updateResult();
    76         });
    77 
    78         // Start the animation
    79         begin();
    80 
    8151})(jQuery);