Ticket #26387: 26387.4.diff
| File 26387.4.diff, 7.9 KB (added by , 9 years ago) |
|---|
-
src/wp-admin/about.php
84 84 <div> 85 85 <h3><?php echo ( 'Now with more color' ); ?></h3> 86 86 <p><?php echo ( 'Your admin is not longer monochromatic — we’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; ?> 89 96 <p><?php echo ( 'You can change your color scheme at any time from your profile page.' ); ?></p> 90 97 </div> 91 98 </div> -
src/wp-admin/css/wp-admin.css
7948 7948 margin-bottom: 0; 7949 7949 } 7950 7950 7951 .about-wrap .feature-section.one-col div {7951 .about-wrap .feature-section.one-col > div { 7952 7952 margin: auto; 7953 7953 width: 60%; 7954 7954 } 7955 7955 7956 .about-wrap .about-colors .one-col div {7956 .about-wrap .about-colors .one-col > div { 7957 7957 width: 100%; 7958 7958 } 7959 7959 7960 .about-wrap .feature-section.two-col div {7960 .about-wrap .feature-section.two-col > div { 7961 7961 position: relative; 7962 7962 width: 50%; 7963 7963 float: left; 7964 7964 } 7965 7965 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 { 7971 7967 position: relative; 7972 7968 width: 30%; 7973 7969 margin-right: 4.999999999%; … … 7986 7982 overflow: hidden; 7987 7983 } 7988 7984 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; 7993 7987 } 7994 7988 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; 8000 7992 } 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; 8004 7996 } 8005 7997 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%; 8012 8000 } 8013 8001 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 8026 8002 .about-wrap .feature-section div p img { 8027 8003 float: right; 8028 8004 margin-left: 10px; … … 12727 12703 } 12728 12704 12729 12705 /* 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 { 12731 12709 width: 100%; 12732 12710 margin: 0; 12733 12711 float: none; 12734 12712 } 12735 12713 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%; 12740 12716 } 12741 12717 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 12763 12718 /* Moderate Comment */ 12764 12719 .comment-ays { 12765 12720 border-bottom: none; … … 12900 12855 float: none; 12901 12856 } 12902 12857 12903 .about-wrap .about-passwords {12904 margin: 20px -20px;12905 }12906 12907 12858 /* Align Add Media + Visual + Text tabs */ 12908 12859 #wp-content-media-buttons a { 12909 12860 font-size: 14px; -
src/wp-admin/js/about.js
1 /* global pwsL10n:true*/1 /* global isRtl */ 2 2 (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();9 3 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' ); 18 15 } 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 } 19 34 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 ); 40 36 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 ) {} 47 42 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 }); 71 49 }); 72 50 73 // Act like a normal password strength meter74 $input.on('keyup', function(){75 updateResult();76 });77 78 // Start the animation79 begin();80 81 51 })(jQuery);