diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index cd3f0d5d4f..d347dfeef6 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -13,6 +13,8 @@ $title = __( 'About' ); list( $display_version ) = explode( '-', $wp_version ); +wp_enqueue_script( 'about' ); + include( ABSPATH . 'wp-admin/admin-header.php' ); ?>
@@ -36,11 +38,18 @@ include( ABSPATH . 'wp-admin/admin-header.php' );

-
+

- +
+
+

+

+

+
+ is able to apply these updates automatically. Cool!' ); ?>

is not able to apply these updates automatically. But we’ll email %s when there is a new security release.' ), esc_html( get_site_option( 'admin_email' ) ) ); ?>

- -
-
-

-

-

-
+
-
+

-

+

+

-
- (Actual password meter demo) +
+ +

+ change your password?' ), esc_url( self_admin_url( 'profile.php' ) ) ); ?>
@@ -84,11 +90,11 @@ include( ABSPATH . 'wp-admin/admin-header.php' );

-

+

-

+

diff --git a/src/wp-admin/css/colors-classic.css b/src/wp-admin/css/colors-classic.css index 2dbbb30a50..32bc6f4bf4 100644 --- a/src/wp-admin/css/colors-classic.css +++ b/src/wp-admin/css/colors-classic.css @@ -2000,13 +2000,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper { color: #464646; } -.about-wrap .feature-section img { - background: #fff; - border: 1px #ccc solid; - -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 ); - box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 ); -} - .about-wrap h4.wp-people-group { text-shadow: 1px 1px 1px #fff; } diff --git a/src/wp-admin/css/colors-fresh.css b/src/wp-admin/css/colors-fresh.css index 92d8332daf..547d6f4173 100644 --- a/src/wp-admin/css/colors-fresh.css +++ b/src/wp-admin/css/colors-fresh.css @@ -1889,13 +1889,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper { color: #464646; } -.about-wrap .feature-section img { - background: #fff; - border: 1px #ccc solid; - -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 ); - box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 ); -} - .about-wrap h4.wp-people-group { text-shadow: 1px 1px 1px #fff; } diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index ff26406f68..30fb9b0052 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/src/wp-admin/css/wp-admin.css @@ -5766,6 +5766,51 @@ h2 .nav-tab { display: none !important; } +.about-wrap p.about-notice { + background-color: #ffffe0; + border: 1px solid #e6db55; + margin: 5px 0 15px; + padding: 0.4em 0.8em; + border-radius: 3px; + -webkit-border-radius: 3px; +} + +.about-wrap .about-passwords { + margin: 20px 0; + padding: 1px 20px 10px; + background-color: #f9f9f9; +} + +.about-wrap .about-password-meter input { + font-size: 250%; + width: 100%; + display: block; + width: 100%; + padding: 5px; +} + +.about-wrap .about-password-meter #pass-strength-result { + font-weight: normal !important; + display:block !important; + font-size: 150%; + width: 100%; + padding: 17px 0; + margin-bottom: 15px; +} + +.about-wrap .feature-section img { + border: 0; + background: transparent; + box-shadow: none; + -webkit-box-shadow: none; + max-width: 20%; +} + +.about-wrap .feature-section div p img { + float: right; + margin-left: 10px; +} + /* Typography */ .about-wrap p { @@ -5808,6 +5853,8 @@ h2 .nav-tab { padding-bottom: 20px; } +.about-wrap .feature-section + .about-wrap .feature-section h4 { margin-bottom: 0.6em; } @@ -5960,6 +6007,21 @@ h2 .nav-tab { float: left; } +.about-wrap .three-col.about-updates div:nth-of-type(1), +.about-wrap .three-col.about-updates div:nth-of-type(3) { + width: 37%; + margin: 0; +} + +.about-wrap .three-col.about-updates div:nth-of-type(2) { + width: 16%; + margin: 0 5%; +} + +.about-wrap .three-col.about-updates img { + margin: 0; +} + .about-wrap .three-col-images { text-align: center; } diff --git a/src/wp-admin/images/about-globe-2x.png b/src/wp-admin/images/about-globe-2x.png new file mode 100644 index 0000000000..648c5dafd3 Binary files /dev/null and b/src/wp-admin/images/about-globe-2x.png differ diff --git a/src/wp-admin/images/about-search-2x.png b/src/wp-admin/images/about-search-2x.png new file mode 100644 index 0000000000..0a051629af Binary files /dev/null and b/src/wp-admin/images/about-search-2x.png differ diff --git a/src/wp-admin/images/about-updates-2x.png b/src/wp-admin/images/about-updates-2x.png new file mode 100644 index 0000000000..7ecd47d81d Binary files /dev/null and b/src/wp-admin/images/about-updates-2x.png differ diff --git a/src/wp-admin/js/about.js b/src/wp-admin/js/about.js new file mode 100644 index 0000000000..5785e6c5c4 --- /dev/null +++ b/src/wp-admin/js/about.js @@ -0,0 +1,64 @@ +(function($){ + var password = 'Gosh, WordPress is grand.', + $input = $('#pass'), + shouldAnimate = true, + indicatorString = $('#pass-strength-result').text(); + + function updateResult(){ + var strength = wp.passwordStrength.meter($input.val(), [], $input.val()); + + $('#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 animate(){ + if (shouldAnimate === false) + return; + if ($input.val().length < password.length){ + $input.val( password.substr(0, $input.val().length + 1) ); + updateResult(); + } else { + $input.val(''); + $('#pass-strength-result').removeClass('short bad good strong'); + } + // Look like real typing by changing the speed new letters are added each time + setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) ); + } + // + 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; + $('#pass-strength-result').removeClass('short bad good strong'); + $('#pass-strength-result').text(indicatorString); + $input.val('') + }); + + // Act like a normal password strength meter + $input.on('keyup', function(){ + updateResult(); + }); + + // Start the animation + begin(); + +})(jQuery); \ No newline at end of file diff --git a/src/wp-admin/js/about.min.js b/src/wp-admin/js/about.min.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/wp-admin/js/password-strength-meter.js b/src/wp-admin/js/password-strength-meter.js index 4b64e04b3d..9ddee476bd 100644 --- a/src/wp-admin/js/password-strength-meter.js +++ b/src/wp-admin/js/password-strength-meter.js @@ -14,7 +14,7 @@ var passwordStrength; if ( ! $.isArray( blacklist ) ) blacklist = [ blacklist.toString() ]; - if (password1 != password2 && password2.length > 0) + if (password1 != password2 && password2 && password2.length > 0) return 5; var result = zxcvbn( password1, blacklist ); diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 06f1906cb0..b4e0333b2b 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -332,6 +332,8 @@ function wp_default_scripts( &$scripts ) { $scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 ); + $scripts->add( 'about', "/wp-admin/js/about$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 ); + $scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array(), false, 1 ); $scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery', 'wpdialogs' ), false, 1 );