diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 82e34a3066..955ded133c 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -21,7 +21,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );

-
+
@@ -36,40 +36,37 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-

+

-

Image

-

-

+ +

+

-

Image

-

-

+ +

+

-

Image

-

-

+ +

+

- - -
-

-

-

-

+

+

+

+

@@ -82,11 +79,17 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-

-

-

- -

+

+

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

visit your profile settings.' ), get_edit_profile_url( get_current_user_id() ) ); ?>

@@ -97,13 +100,13 @@ include( ABSPATH . 'wp-admin/admin-header.php' );

-

-

-

+

+

+

-

-

-

+

+

+

@@ -117,10 +120,10 @@ include( ABSPATH . 'wp-admin/admin-header.php' );

-
+
-

-

+

+

@@ -128,24 +131,6 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-
-

- -
-
-

-

-
-
-

-

-
-
-

-

-
-
-
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%; + width: 29.95%; margin-right: 4.999999999%; float: left; } @@ -7979,49 +7978,32 @@ body.press-this { margin-right: 0; } -.about-wrap .three-col.about-updates img { - margin: 0; -} +.about-wrap .about-updates img { + margin: 2em 0 0 0; + border: 1px solid #ddd; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} .about-wrap .changelog .feature-section { 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-colors .color-option label { + display: inline-block; + margin: 0.25em 0 0.5em; } -.about-wrap .about-auto-update.cool { - background-color: #eff9ef; -} - -.about-wrap .about-password-meter input { - font-size: 250%; - line-height: 1; - width: 100%; - display: block; - padding: 5px; -} - -.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.two-col div p { + margin-right: 3%; } .about-wrap .feature-section div p img { @@ -12733,37 +12715,16 @@ li#wp-admin-bar-menu-toggle { } /* 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 .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%; + .about-wrap .about-colors .color-option { + width: 49%; } /* Moderate Comment */ @@ -12906,10 +12867,6 @@ li#wp-admin-bar-menu-toggle { float: none; } - .about-wrap .about-passwords { - margin: 20px -20px; - } - /* Align Add Media + Visual + Text tabs */ #wp-content-media-buttons a { font-size: 14px; diff --git a/src/wp-admin/images/about-contrast.png b/src/wp-admin/images/about-contrast.png new file mode 100644 index 0000000000..74f56f64e0 Binary files /dev/null and b/src/wp-admin/images/about-contrast.png differ diff --git a/src/wp-admin/images/about-modern-aesthetics.png b/src/wp-admin/images/about-modern-aesthetics.png new file mode 100644 index 0000000000..d068abef88 Binary files /dev/null and b/src/wp-admin/images/about-modern-aesthetics.png differ diff --git a/src/wp-admin/images/about-typography.png b/src/wp-admin/images/about-typography.png new file mode 100644 index 0000000000..077968bea2 Binary files /dev/null and b/src/wp-admin/images/about-typography.png differ diff --git a/src/wp-admin/js/about.js b/src/wp-admin/js/about.js index 984b92ffec..b7290cc20d 100644 --- a/src/wp-admin/js/about.js +++ b/src/wp-admin/js/about.js @@ -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);