WordPress.org

Make WordPress Core

Ticket #26387: 26387.4.diff

File 26387.4.diff, 7.9 KB (added by ryelle, 5 years ago)
  • src/wp-admin/about.php

     
    8484                <div>
    8585                        <h3><?php echo ( 'Now with more color' ); ?></h3>
    8686                        <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;" />
     87                        <?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) :?>
     88                                <p><?php echo ( 'Try them out below:' ); ?></p>
     89                                <?php
     90                                /** This action is documented in wp-admin/user-edit.php */
     91                                do_action( 'admin_color_scheme_picker' );
     92                                ?>
     93                        <?php else : ?>
     94                                <img src="<?php echo admin_url( 'images/about-color-schemes.png' ); ?>" />
     95                        <?php endif; ?>
    8996                        <p><?php echo ( 'You can change your color scheme at any time from your profile page.' ); ?></p>
    9097                </div>
    9198        </div>
  • src/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%;
     
    79867982        overflow: hidden;
    79877983}
    79887984
    7989 .about-wrap .about-passwords {
    7990         margin: 20px 0;
    7991         padding: 1px 20px 10px;
    7992         background-color: #fff;
     7985.about-wrap .about-colors .scheme-list {
     7986        margin-bottom: 1em;
    79937987}
    79947988
    7995 .about-wrap .about-auto-update {
    7996         text-align: center;
    7997         background-color: #f9f9ef;
    7998         clear: both;
    7999         padding: 10px;
     7989.about-wrap .about-colors .color-option {
     7990        width: 24%;
     7991        padding-top: 10px;
    80007992}
    8001 
    8002 .about-wrap .about-auto-update.cool {
    8003         background-color: #eff9ef;
     7993.about-wrap .about-colors .color-option label {
     7994        display: inline-block;
     7995        margin: 0.25em 0 0.5em;
    80047996}
    80057997
    8006 .about-wrap .about-password-meter input {
    8007         font-size: 250%;
    8008         line-height: 1;
    8009         width: 100%;
    8010         display: block;
    8011         padding: 5px;
     7998.about-wrap .feature-section.two-col div p {
     7999        margin-right: 3%;
    80128000}
    80138001
    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 
    80268002.about-wrap .feature-section div p img {
    80278003        float: right;
    80288004        margin-left: 10px;
     
    1272712703        }
    1272812704
    1272912705        /*  About Page */
    12730         .about-wrap .feature-section.two-col div {
     12706        .about-wrap .feature-section.one-col > div,
     12707        .about-wrap .feature-section.two-col > div,
     12708        .about-wrap .three-col.about-updates > div  {
    1273112709                width: 100%;
    1273212710                margin: 0;
    1273312711                float: none;
    1273412712        }
    1273512713
    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;
     12714        .about-wrap .about-colors .color-option {
     12715                width: 49%;
    1274012716        }
    1274112717
    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 
    1276312718        /* Moderate Comment */
    1276412719        .comment-ays {
    1276512720                border-bottom: none;
     
    1290012855                float: none;
    1290112856        }
    1290212857
    12903         .about-wrap .about-passwords {
    12904                 margin: 20px -20px;
    12905         }
    12906 
    1290712858        /* Align Add Media + Visual + Text tabs */
    1290812859        #wp-content-media-buttons a {
    1290912860                font-size: 14px;
  • src/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);