Ticket #26387: 26387.7.diff
| File 26387.7.diff, 14.8 KB (added by , 10 years ago) |
|---|
-
src/wp-admin/about.php
21 21 22 22 <h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1> 23 23 24 <div class="about-text"><?php printf( __( 'Thank you for updating to WordPress 3.8 ! We’re happy to bring youthe most beautiful WordPress yet.' ), $display_version ); ?></div>24 <div class="about-text"><?php printf( __( 'Thank you for updating to WordPress 3.8, the most beautiful WordPress yet.' ), $display_version ); ?></div> 25 25 26 26 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div> 27 27 … … 36 36 </h2> 37 37 38 38 <div class="changelog"> 39 <h2 class="about-headline-callout"><?php echo ( 'Introducing a new, modern admindesign' ); ?></h2>39 <h2 class="about-headline-callout"><?php echo ( 'Introducing a modern new design' ); ?></h2> 40 40 <img class="about-overview-img" src="<?php echo admin_url( 'images/about-overview.png' ); ?>" /> 41 41 42 42 <div class="feature-section col three-col about-updates"> 43 43 <div class="col-1"> 44 44 <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p> 45 <h3><?php echo ( 'Modern aesthetic s' ); ?></h3>46 <p><?php echo ( ' Goodbye decoration, hello simplicity. We removed extraneous details, focusing on a cleaner, more streamlined admin design.' ); ?></p>45 <h3><?php echo ( 'Modern aesthetic' ); ?></h3> 46 <p><?php echo ( 'The new admin has a fresh, simple design that puts clarity and simplicity ahead of web design flourishes.' ); ?></p> 47 47 </div> 48 48 <div class="col-2"> 49 49 <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p> 50 <h3><?php echo ( ' Improvedtypography' ); ?></h3>51 <p><?php echo ( ' You might notice the type is a little bit bigger. We improved the typography, crafting a better reading experience.' ); ?></p>50 <h3><?php echo ( 'Clean typography' ); ?></h3> 51 <p><?php echo ( 'Open sans meets open source. WordPress’s new typography is upright, friendly, and optimized for web and mobile interfaces.' ); ?></p> 52 52 </div> 53 53 <div class="col-3 last-feature"> 54 54 <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p> 55 <h3><?php echo ( ' Highercontrast' ); ?></h3>56 <p><?php echo ( 'W ith bigger typography and both high and low contrast color schemes, our new admin design is great for users of all ages.' ); ?></p>55 <h3><?php echo ( 'Refined contrast' ); ?></h3> 56 <p><?php echo ( 'What good is beautiful design if you can’t see it? Improved contrast gives you a better reading experience.' ); ?></p> 57 57 </div> 58 58 </div> 59 59 </div> … … 66 66 <div class="changelog"> 67 67 <div class="feature-section col two-col"> 68 68 <div> 69 <h3><?php echo ( ' Take WordPress with you anywhere with our responsive design' ); ?></h3>70 <p><?php echo ( ' The WordPress admin is now completely responsive: you can work on your website easily from your smartphone or tablet. The full power of WordPress is at your fingertips, even when you’re on the go.' ); ?></p>71 <h4><?php echo ( ' Naturally HiDPI' ); ?></h4>72 <p><?php echo ( ' No more blurry edges — with the inclusion of vector icons and graphics, the admin is now entirely HiDPI, so you get the best viewing experience no matter what kind of computer or mobiledevice you use.' ); ?></p>69 <h3><?php echo ( 'WordPress on every device' ); ?></h3> 70 <p><?php echo ( 'Whether you’re on your smartphone or tablet, your notebook or desktop, WordPress looks beautiful on every device. Now you can update your website wherever you are.' ); ?></p> 71 <h4><?php echo ( 'High definition is here' ); ?></h4> 72 <p><?php echo ( 'WordPress is sharper than ever; vector icons and graphics mean no more blurry edges. You get the best viewing experience no matter what type of device you use.' ); ?></p> 73 73 </div> 74 74 <div class="last-feature about-colors-img"> 75 75 <img src="<?php echo admin_url( 'images/about-colors.png' ); ?>" /> … … 82 82 <div class="changelog about-colors"> 83 83 <div class="feature-section col one-col"> 84 84 <div> 85 <h3><?php echo ( 'Now with more color' ); ?></h3> 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;" /> 89 <p><?php echo ( 'You can change your color scheme at any time from your profile page.' ); ?></p> 85 <h3><?php echo ( 'Pick a color' ); ?></h3> 86 <p><?php echo ( 'We’ve included four color schemes so that you can choose your favorite. Don’t like this striking new admin? Choose from any of the schemes below to change it in an instant.' ); ?></p> 87 <?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) :?> 88 <?php 89 /** This action is documented in wp-admin/user-edit.php */ 90 do_action( 'admin_color_scheme_picker' ); 91 ?> 92 <?php else : ?> 93 <img src="<?php echo admin_url( 'images/about-color-schemes.png' ); ?>" /> 94 <?php endif; ?> 95 <p><?php echo ( 'To change your color scheme later, just visit your profile settings.' ); ?></p> 90 96 </div> 91 97 </div> 92 98 </div> … … 97 103 <div class="feature-section col two-col"> 98 104 <div> 99 105 <h3><?php echo ( 'A new theme experience' ); ?></h3> 100 <p><?php echo ( ' A sleeker, faster, and more visual organization of your themes that is responsive.' ); ?></p>101 <h4><?php echo ( 'B rowse better' ); ?></h4>102 <p><?php echo ( ' Enjoy a focused experience with theme screenshots at the center. Quickly search through your themes or add new ones.' ); ?></p>106 <p><?php echo ( 'Finding and installing the right theme has never been easier.' ); ?></p> 107 <h4><?php echo ( 'Better browsing' ); ?></h4> 108 <p><?php echo ( 'Focus is placed on what’s important - your theme’s design. Search through your themes at a glance and add new ones with a click.' ); ?></p> 103 109 <h4><?php echo ( 'Dive into the details' ); ?></h4> 104 <p><?php echo ( ' Expand a theme to see more information and preview it. Use the arrow navigation to quickly swift through your themes.' ); ?></p>105 <h4><?php echo ( ' Easier updates' ); ?></h4>106 <p><?php echo ( ' Identify immediately when a theme update is available.' ); ?></p>110 <p><?php echo ( 'If you need information about any of your themes just click to discover more. Sit back and use your keyboard’s navigation arrows to flip through every theme you’ve got.' ); ?></p> 111 <h4><?php echo ( 'Stay updated' ); ?></h4> 112 <p><?php echo ( 'You can tell in an instant if a theme needs updated and, like so many things in WordPress, updating it takes just a second.' ); ?></p> 107 113 </div> 108 114 <div class="last-feature about-themes-img"> 109 115 <img src="<?php echo admin_url( 'images/about-themes.png' ); ?>" /> … … 119 125 120 126 <div class="feature-section col one-col"> 121 127 <div> 122 <h3><?php echo ( ' Our new default theme lets you create a responsive magazine website with an elegant, modern design.' ); ?></h3>123 <p><?php echo ( ' Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content’s layout with a full width page template and a contributor page to show of your authors.' ); ?></p>128 <h3><?php echo ( 'Turn your blog into a magazine' ); ?></h3> 129 <p><?php echo ( 'With a striking design that does not comprise on our trademark simplicity, Twenty Fourteen is our boldest default theme. Choose a grid or a slider to display featured content on your homepage. Customize your homepage with three widget areas or change your layout with two page templates.' ); ?></p> 124 130 <p><?php echo ( 'Creating a magazine website with WordPress has never been easier.' ); ?></p> 125 131 </div> 126 132 </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);