Index: src/wp-admin/about.php =================================================================== --- src/wp-admin/about.php (revision 26725) +++ src/wp-admin/about.php (working copy) @@ -84,8 +84,15 @@

-

- + 1 && has_action('admin_color_scheme_picker') ) :?> +

+ + + +

Index: src/wp-admin/css/wp-admin.css =================================================================== --- src/wp-admin/css/wp-admin.css (revision 26725) +++ src/wp-admin/css/wp-admin.css (working copy) @@ -7948,26 +7948,22 @@ margin-bottom: 0; } -.about-wrap .feature-section.one-col div { +.about-wrap .feature-section.one-col > div { margin: auto; width: 60%; } -.about-wrap .about-colors .one-col div { +.about-wrap .about-colors .one-col > div { width: 100%; } -.about-wrap .feature-section.two-col div { +.about-wrap .feature-section.two-col > div { position: relative; width: 50%; float: left; } -.about-wrap .feature-section.two-col div p { - margin-right: 3%; -} - -.about-wrap .feature-section.three-col div { +.about-wrap .feature-section.three-col > div { position: relative; width: 30%; margin-right: 4.999999999%; @@ -7986,43 +7982,23 @@ overflow: hidden; } -.about-wrap .about-passwords { - margin: 20px 0; - padding: 1px 20px 10px; - background-color: #fff; +.about-wrap .about-colors .scheme-list { + margin-bottom: 1em; } -.about-wrap .about-auto-update { - text-align: center; - background-color: #f9f9ef; - clear: both; - padding: 10px; +.about-wrap .about-colors .color-option { + width: 24%; + padding-top: 10px; } - -.about-wrap .about-auto-update.cool { - background-color: #eff9ef; +.about-wrap .about-colors .color-option label { + display: inline-block; + margin: 0.25em 0 0.5em; } -.about-wrap .about-password-meter input { - font-size: 250%; - line-height: 1; - width: 100%; - display: block; - padding: 5px; +.about-wrap .feature-section.two-col div p { + margin-right: 3%; } -.about-wrap .about-password-meter #pass-strength-result { - display: block !important; - font-size: 150%; - font-weight: normal !important; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - padding: 17px 0; - margin-bottom: 15px; -} - .about-wrap .feature-section div p img { float: right; margin-left: 10px; @@ -12727,39 +12703,18 @@ } /* About Page */ - .about-wrap .feature-section.two-col div { + .about-wrap .feature-section.one-col > div, + .about-wrap .feature-section.two-col > div, + .about-wrap .three-col.about-updates > div { width: 100%; margin: 0; float: none; } - .about-wrap .three-col.about-updates .col-1, - /*.about-wrap .three-col.about-updates .col-2,*/ - .about-wrap .three-col.about-updates .col-3 { - padding: 0; + .about-wrap .about-colors .color-option { + width: 49%; } - .about-wrap .three-col.about-updates .col-1 { - width: 100%; - padding-right: 210px; - } - - .about-wrap .three-col.about-updates .col-2 { - position: relative; - float: right; - width: 180px; - margin-left: -100%; - } - - .about-wrap .three-col.about-updates .col-3 { - width: 100%; - } - - .about-wrap .about-password-meter input, - .about-wrap .about-password-meter #pass-strength-result { - width: 99%; - } - /* Moderate Comment */ .comment-ays { border-bottom: none; @@ -12900,10 +12855,6 @@ float: none; } - .about-wrap .about-passwords { - margin: 20px -20px; - } - /* Align Add Media + Visual + Text tabs */ #wp-content-media-buttons a { font-size: 14px; Index: src/wp-admin/js/about.js =================================================================== --- src/wp-admin/js/about.js (revision 26725) +++ src/wp-admin/js/about.js (working copy) @@ -1,81 +1,51 @@ -/* global pwsL10n:true */ +/* global isRtl */ (function($){ - var password = 'Gosh, WordPress is grand.', - $input = $('#pass'), - shouldAnimate = true, - timesForAnimation = [280, 300, 305, 310, 315, 325, 330, 345, 360, 370, 380, 400, 450, 500, 600], - resultsCache = {}, - indicatorString = $('#pass-strength-result').text(); - function updateResult(){ - var strength; - - if ( typeof( resultsCache[ $input.val() ]) === 'undefined') { - strength = wp.passwordStrength.meter($input.val(), [], $input.val()); - resultsCache[ $input.val() ] = strength; - } else { - strength = resultsCache[ $input.val() ]; + $(document).ready( function() { + var $colorpicker, $stylesheet; + + $('.color-palette').click( function() { + $(this).siblings('input[name="admin_color"]').prop('checked', true); + }); + + $colorpicker = $( '#color-picker' ); + $stylesheet = $( '#colors-css' ); + if ( isRtl ){ + $stylesheet = $( '#colors-rtl-css' ); } + + $colorpicker.on( 'click.colorpicker', '.color-option', function() { + var colors, css_url, + $this = $(this); + + if ( $this.hasClass( 'selected' ) ) { + return; + } + + $this.siblings( '.selected' ).removeClass( 'selected' ); + $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true ); + + // Set color scheme + // Load the colors stylesheet + css_url = $this.children( '.css_url' ).val(); + if ( isRtl ){ + css_url = css_url.replace('.min', '-rtl.min'); + } - $('#pass-strength-result').removeClass('short bad good strong'); - switch ( strength ) { - case 2: - $('#pass-strength-result').addClass('bad').html( pwsL10n.bad ); - break; - case 3: - $('#pass-strength-result').addClass('good').html( pwsL10n.good ); - break; - case 4: - $('#pass-strength-result').addClass('strong').html( pwsL10n.strong ); - break; - default: - $('#pass-strength-result').addClass('short').html( pwsL10n['short'] ); - } - } - function resetMeter(){ - $input.val(''); - $('#pass-strength-result').text(indicatorString); - $('#pass-strength-result').removeClass('short bad good strong'); - } + $stylesheet.attr( 'href', css_url ); - function animate(){ - if (shouldAnimate === false) - return; - if ($input.val().length < password.length){ - $input.val( password.substr(0, $input.val().length + 1) ); - updateResult(); + // repaint icons + if ( typeof wp !== 'undefined' && wp.svgPainter ) { + try { + colors = $.parseJSON( $this.children( '.icon_colors' ).val() ); + } catch ( error ) {} - // Look like real typing by changing the speed new letters are added each time - setTimeout( animate, ( timesForAnimation[ Math.floor( Math.random() * timesForAnimation.length ) ] ) ); - } else { - resetMeter(); - - // When we reset, let's wait a bit longer than normal to start again - setTimeout(animate, 700); - } - - } - - function begin(){ - // we async load zxcvbn, so we need to make sure it's loaded before starting - if (typeof(zxcvbn) !== 'undefined') - animate(); - else - setTimeout(begin,800); - } - - // Turn off the animation on focus - $input.on('focus', function(){ - shouldAnimate = false; - resetMeter(); + if ( colors ) { + wp.svgPainter.setColors( colors ); + wp.svgPainter.paint(); + } + } + }); }); - // Act like a normal password strength meter - $input.on('keyup', function(){ - updateResult(); - }); - - // Start the animation - begin(); - })(jQuery);