<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[26737] trunk/src/wp-admin: Updates to the About page:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/26737">26737</a></dd>
<dt>Author</dt> <dd>iammattthomas</dd>
<dt>Date</dt> <dd>2013-12-06 19:35:25 +0000 (Fri, 06 Dec 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Updates to the About page:
* A live color scheme preview
* Replace the hard-coded version number
* Copy edits
* New screenshots
* Size adjustments to the header and WP badge
* Capitalize 'Open Sans'
See <a href="http://core.trac.wordpress.org/ticket/26387">#26387</a>, props markoheijnen, ryelle, siobhan, melchoyce.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminaboutphp">trunk/src/wp-admin/about.php</a></li>
<li><a href="#trunksrcwpadmincsswpadmincss">trunk/src/wp-admin/css/wp-admin.css</a></li>
<li><a href="#trunksrcwpadminjsaboutjs">trunk/src/wp-admin/js/about.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpadminimagesaboutcontrastpng">trunk/src/wp-admin/images/about-contrast.png</a></li>
<li><a href="#trunksrcwpadminimagesaboutmodernaestheticspng">trunk/src/wp-admin/images/about-modern-aesthetics.png</a></li>
<li><a href="#trunksrcwpadminimagesabouttypographypng">trunk/src/wp-admin/images/about-typography.png</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminaboutphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/about.php (26736 => 26737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/about.php 2013-12-06 19:17:35 UTC (rev 26736)
+++ trunk/src/wp-admin/about.php 2013-12-06 19:35:25 UTC (rev 26737)
</span><span class="lines">@@ -21,7 +21,7 @@
</span><span class="cx">
</span><span class="cx"> <h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1>
</span><span class="cx">
</span><del>-<div class="about-text"><?php printf( __( 'Thank you for updating to WordPress 3.8! We’re happy to bring you the most beautiful WordPress yet.' ), $display_version ); ?></div>
</del><ins>+<div class="about-text"><?php printf( __( 'Thank you for updating to WordPress %s, the most beautiful WordPress yet.' ), $display_version ); ?></div>
</ins><span class="cx">
</span><span class="cx"> <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
</span><span class="cx">
</span><span class="lines">@@ -36,40 +36,37 @@
</span><span class="cx"> </h2>
</span><span class="cx">
</span><span class="cx"> <div class="changelog">
</span><del>- <h2 class="about-headline-callout"><?php echo ( 'Introducing a new, modern admin design' ); ?></h2>
</del><ins>+ <h2 class="about-headline-callout"><?php echo ( 'Introducing a modern new design' ); ?></h2>
</ins><span class="cx"> <img class="about-overview-img" src="<?php echo admin_url( 'images/about-overview.png' ); ?>" />
</span><span class="cx">
</span><span class="cx"> <div class="feature-section col three-col about-updates">
</span><span class="cx"> <div class="col-1">
</span><del>- <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
- <h3><?php echo ( 'Modern aesthetics' ); ?></h3>
- <p><?php echo ( 'Goodbye decoration, hello simplicity. We removed extraneous details, focusing on a cleaner, more streamlined admin design.' ); ?></p>
</del><ins>+ <img src="images/about-modern-aesthetics.png" />
+ <h3><?php echo ( 'Modern aesthetic' ); ?></h3>
+ <p><?php echo ( 'The new admin has a fresh, simple design that puts clarity and simplicity ahead of web design flourishes.' ); ?></p>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="col-2">
</span><del>- <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
- <h3><?php echo ( 'Improved typography' ); ?></h3>
- <p><?php echo ( 'You might notice the type is a little bit bigger. We improved the typography, crafting a better reading experience.' ); ?></p>
</del><ins>+ <img src="images/about-typography.png" />
+ <h3><?php echo ( 'Clean typography' ); ?></h3>
+ <p><?php echo ( 'Open Sans meets open source. WordPress’s new typography is upright, friendly, and optimized for web and mobile interfaces.' ); ?></p>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="col-3 last-feature">
</span><del>- <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
- <h3><?php echo ( 'Higher contrast' ); ?></h3>
- <p><?php echo ( 'With bigger typography and both high and low contrast color schemes, our new admin design is great for users of all ages.' ); ?></p>
</del><ins>+ <img src="images/about-contrast.png" />
+ <h3><?php echo ( 'Refined contrast' ); ?></h3>
+ <p><?php echo ( 'What good is beautiful design if you can’t see it? Improved contrast gives you a better reading experience.' ); ?></p>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <hr>
</span><span class="cx">
</span><del>-<!-- Image example -->
-<!-- <img alt="" src="<?php echo admin_url( 'images/about-search-2x.png' ); ?>" /> -->
-
</del><span class="cx"> <div class="changelog">
</span><span class="cx"> <div class="feature-section col two-col">
</span><span class="cx"> <div>
</span><del>- <h3><?php echo ( 'Take WordPress with you anywhere with our responsive design' ); ?></h3>
- <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>
- <h4><?php echo ( 'Naturally HiDPI' ); ?></h4>
- <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 mobile device you use.' ); ?></p>
</del><ins>+ <h3><?php echo ( 'WordPress on every device' ); ?></h3>
+ <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>
+ <h4><?php echo ( 'High definition is here' ); ?></h4>
+ <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>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="last-feature about-colors-img">
</span><span class="cx"> <img src="<?php echo admin_url( 'images/about-colors.png' ); ?>" />
</span><span class="lines">@@ -82,11 +79,17 @@
</span><span class="cx"> <div class="changelog about-colors">
</span><span class="cx"> <div class="feature-section col one-col">
</span><span class="cx"> <div>
</span><del>- <h3><?php echo ( 'Now with more color' ); ?></h3>
- <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>
- <p><?php echo ( 'Try them out below:' ); ?></p>
- <img src="https://i.cloudup.com/NBlGusRk0H.png" style="border: 2px solid red; max-width: 99%; margin: 0;" />
- <p><?php echo ( 'You can change your color scheme at any time from your profile page.' ); ?></p>
</del><ins>+ <h3><?php echo ( 'Pick a color' ); ?></h3>
+ <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>
+ <?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) :?>
+ <?php
+ /** This action is documented in wp-admin/user-edit.php */
+ do_action( 'admin_color_scheme_picker' );
+ ?>
+ <?php else : ?>
+ <img src="<?php echo admin_url( 'images/about-color-schemes.png' ); ?>" />
+ <?php endif; ?>
+ <p><?php printf( ( 'To change your color scheme later, just <a href="%1$s">visit your profile settings</a>.' ), get_edit_profile_url( get_current_user_id() ) ); ?></p>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -97,13 +100,13 @@
</span><span class="cx"> <div class="feature-section col two-col">
</span><span class="cx"> <div>
</span><span class="cx"> <h3><?php echo ( 'A new theme experience' ); ?></h3>
</span><del>- <p><?php echo ( 'A sleeker, faster, and more visual organization of your themes that is responsive.' ); ?></p>
- <h4><?php echo ( 'Browse better' ); ?></h4>
- <p><?php echo ( 'Enjoy a focused experience with theme screenshots at the center. Quickly search through your themes or add new ones.' ); ?></p>
</del><ins>+ <p><?php echo ( 'Finding and installing the right theme has never been easier.' ); ?></p>
+ <h4><?php echo ( 'Better browsing' ); ?></h4>
+ <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>
</ins><span class="cx"> <h4><?php echo ( 'Dive into the details' ); ?></h4>
</span><del>- <p><?php echo ( 'Expand a theme to see more information and preview it. Use the arrow navigation to quickly swift through your themes.' ); ?></p>
- <h4><?php echo ( 'Easier updates' ); ?></h4>
- <p><?php echo ( 'Identify immediately when a theme update is available.' ); ?></p>
</del><ins>+ <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>
+ <h4><?php echo ( 'Stay updated' ); ?></h4>
+ <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>
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="last-feature about-themes-img">
</span><span class="cx"> <img src="<?php echo admin_url( 'images/about-themes.png' ); ?>" />
</span><span class="lines">@@ -117,10 +120,10 @@
</span><span class="cx"> <h2 class="about-headline-callout"><?php echo ( 'Twenty Fourteen, a sleek new magazine theme' ); ?></h2>
</span><span class="cx"> <img src="<?php echo admin_url( 'images/about-twentyfourteen.png' ); ?>" />
</span><span class="cx">
</span><del>- <div class="feature-section col one-col">
</del><ins>+ <div class="feature-section col one-col center-col">
</ins><span class="cx"> <div>
</span><del>- <h3><?php echo ( 'Our new default theme lets you create a responsive magazine website with an elegant, modern design.' ); ?></h3>
- <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>
</del><ins>+ <h3><?php echo ( 'Turn your blog into a magazine' ); ?></h3>
+ <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>
</ins><span class="cx"> <p><?php echo ( 'Creating a magazine website with WordPress has never been easier.' ); ?></p>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="lines">@@ -128,24 +131,6 @@
</span><span class="cx">
</span><span class="cx"> <hr>
</span><span class="cx">
</span><del>-<div class="changelog">
- <h3><?php echo ( 'Under the Hood' ); ?></h3>
-
- <div class="feature-section col three-col">
- <div>
- <h4><?php echo ( 'Meta query fixes' ); ?></h4>
- <p><?php echo ( 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis.' ); ?></p>
- </div>
- <div>
- <h4><?php echo ( 'Automated RTL styles' ); ?></h4>
- <p><?php echo ( 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis.' ); ?></p>
- </div>
- <div class="last-feature">
- <h4><?php echo ( 'Improved customizer' ); ?></h4>
- <p><?php echo ( 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis.' ); ?></p>
- </div>
-</div>
-
</del><span class="cx"> <div class="return-to-dashboard">
</span><span class="cx"> <?php if ( current_user_can( 'update_core' ) && isset( $_GET['updated'] ) ) : ?>
</span><span class="cx"> <a href="<?php echo esc_url( self_admin_url( 'update-core.php' ) ); ?>"><?php
</span></span></pre></div>
<a id="trunksrcwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/wp-admin.css (26736 => 26737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/wp-admin.css 2013-12-06 19:17:35 UTC (rev 26736)
+++ trunk/src/wp-admin/css/wp-admin.css 2013-12-06 19:35:25 UTC (rev 26737)
</span><span class="lines">@@ -7827,13 +7827,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .about-text {
</span><del>- margin: 1em 200px 1.4em 0;
</del><ins>+ margin: 1em 200px 0em 0;
</ins><span class="cx"> min-height: 60px;
</span><span class="cx"> font-size: 24px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .about-wrap .changelog h2.about-headline-callout {
</span><del>- margin: 1em 0 0;
</del><ins>+ margin: 1.5em 0 0;
</ins><span class="cx"> font-size: 2.2em;
</span><span class="cx"> font-weight: 300;
</span><span class="cx"> line-height: 1.3;
</span><span class="lines">@@ -7862,11 +7862,14 @@
</span><span class="cx">
</span><span class="cx"> /* 3.8 Images */
</span><span class="cx">
</span><del>-.about-wrap .about-colors-img,
-.about-wrap .about-themes-img {
</del><ins>+.about-wrap .about-colors-img {
</ins><span class="cx"> bottom: -25px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.about-wrap .about-themes-img {
+ bottom: -32px;
+}
+
</ins><span class="cx"> .about-wrap .about-overview-img {
</span><span class="cx"> border-bottom: 1px solid #ddd;
</span><span class="cx"> }
</span><span class="lines">@@ -7901,16 +7904,16 @@
</span><span class="cx"> .wp-badge {
</span><span class="cx"> background: url('../images/w-logo-white.png?ver=20131202') no-repeat;
</span><span class="cx"> background: none, url('../images/wordpress-logo-white.svg?ver=20131110') no-repeat;
</span><del>- background-position: center 30px;
- background-size: 110px 110px;
</del><ins>+ background-position: center 24px;
+ background-size: 85px 85px;
</ins><span class="cx"> font-size: 14px;
</span><span class="cx"> text-align: center;
</span><span class="cx"> font-weight: 600;
</span><span class="cx"> margin: 5px 0 0;
</span><del>- padding-top: 155px;
- height: 45px;
</del><ins>+ padding-top: 120px;
+ height: 40px;
</ins><span class="cx"> display: inline-block;
</span><del>- width: 165px;
</del><ins>+ width: 150px;
</ins><span class="cx"> text-rendering: optimizeLegibility;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -7949,28 +7952,24 @@
</span><span class="cx"> margin-bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .feature-section.one-col div {
</del><ins>+.about-wrap .feature-section.center-col > div {
</ins><span class="cx"> margin: auto;
</span><span class="cx"> width: 60%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .about-colors .one-col div {
</del><ins>+.about-wrap .about-colors .one-col > div {
</ins><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .feature-section.two-col div {
</del><ins>+.about-wrap .feature-section.two-col > div {
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 50%;
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .feature-section.two-col div p {
- margin-right: 3%;
-}
-
-.about-wrap .feature-section.three-col div {
</del><ins>+.about-wrap .feature-section.three-col > div {
</ins><span class="cx"> position: relative;
</span><del>- width: 30%;
</del><ins>+ width: 29.95%;
</ins><span class="cx"> margin-right: 4.999999999%;
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><span class="lines">@@ -7979,51 +7978,34 @@
</span><span class="cx"> margin-right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .three-col.about-updates img {
- margin: 0;
-}
</del><ins>+.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);
+}
</ins><span class="cx">
</span><span class="cx"> .about-wrap .changelog .feature-section {
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .about-passwords {
- margin: 20px 0;
- padding: 1px 20px 10px;
- background-color: #fff;
</del><ins>+.about-wrap .about-colors .scheme-list {
+ margin-bottom: 1em;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .about-auto-update {
- text-align: center;
- background-color: #f9f9ef;
- clear: both;
- padding: 10px;
</del><ins>+.about-wrap .about-colors .color-option {
+ width: 24%;
+ padding-top: 10px;
</ins><span class="cx"> }
</span><del>-
-.about-wrap .about-auto-update.cool {
- background-color: #eff9ef;
</del><ins>+.about-wrap .about-colors .color-option label {
+ display: inline-block;
+ margin: 0.25em 0 0.5em;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.about-wrap .about-password-meter input {
- font-size: 250%;
- line-height: 1;
- width: 100%;
- display: block;
- padding: 5px;
</del><ins>+.about-wrap .feature-section.two-col div p {
+ margin-right: 3%;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.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;
-}
-
</del><span class="cx"> .about-wrap .feature-section div p img {
</span><span class="cx"> float: right;
</span><span class="cx"> margin-left: 10px;
</span><span class="lines">@@ -12733,39 +12715,18 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* About Page */
</span><del>- .about-wrap .feature-section.two-col div {
</del><ins>+ .about-wrap .feature-section.one-col > div,
+ .about-wrap .feature-section.two-col > div,
+ .about-wrap .three-col.about-updates > div {
</ins><span class="cx"> width: 100%;
</span><span class="cx"> margin: 0;
</span><span class="cx"> float: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .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;
</del><ins>+ .about-wrap .about-colors .color-option {
+ width: 49%;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .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%;
- }
-
</del><span class="cx"> /* Moderate Comment */
</span><span class="cx"> .comment-ays {
</span><span class="cx"> border-bottom: none;
</span><span class="lines">@@ -12906,10 +12867,6 @@
</span><span class="cx"> float: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .about-wrap .about-passwords {
- margin: 20px -20px;
- }
-
</del><span class="cx"> /* Align Add Media + Visual + Text tabs */
</span><span class="cx"> #wp-content-media-buttons a {
</span><span class="cx"> font-size: 14px;
</span></span></pre></div>
<a id="trunksrcwpadminimagesaboutcontrastpng"></a>
<div class="binary"><h4>Added: trunk/src/wp-admin/images/about-contrast.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/src/wp-admin/images/about-contrast.png
</span><span class="cx">===================================================================
</span><del>--- trunk/src/wp-admin/images/about-contrast.png 2013-12-06 19:17:35 UTC (rev 26736)
</del><ins>+++ trunk/src/wp-admin/images/about-contrast.png 2013-12-06 19:35:25 UTC (rev 26737)
</ins><span class="cx">Property changes on: trunk/src/wp-admin/images/about-contrast.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+application/octet-stream
</ins><span class="cx">\ No newline at end of property
</span><a id="trunksrcwpadminimagesaboutmodernaestheticspng"></a>
<div class="binary"><h4>Added: trunk/src/wp-admin/images/about-modern-aesthetics.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/src/wp-admin/images/about-modern-aesthetics.png
</span><span class="cx">===================================================================
</span><del>--- trunk/src/wp-admin/images/about-modern-aesthetics.png 2013-12-06 19:17:35 UTC (rev 26736)
</del><ins>+++ trunk/src/wp-admin/images/about-modern-aesthetics.png 2013-12-06 19:35:25 UTC (rev 26737)
</ins><span class="cx">Property changes on: trunk/src/wp-admin/images/about-modern-aesthetics.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+application/octet-stream
</ins><span class="cx">\ No newline at end of property
</span><a id="trunksrcwpadminimagesabouttypographypng"></a>
<div class="binary"><h4>Added: trunk/src/wp-admin/images/about-typography.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/src/wp-admin/images/about-typography.png
</span><span class="cx">===================================================================
</span><del>--- trunk/src/wp-admin/images/about-typography.png 2013-12-06 19:17:35 UTC (rev 26736)
</del><ins>+++ trunk/src/wp-admin/images/about-typography.png 2013-12-06 19:35:25 UTC (rev 26737)
</ins><span class="cx">Property changes on: trunk/src/wp-admin/images/about-typography.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+application/octet-stream
</ins><span class="cx">\ No newline at end of property
</span><a id="trunksrcwpadminjsaboutjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/about.js (26736 => 26737)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/about.js 2013-12-06 19:17:35 UTC (rev 26736)
+++ trunk/src/wp-admin/js/about.js 2013-12-06 19:35:25 UTC (rev 26737)
</span><span class="lines">@@ -1,81 +1,51 @@
</span><del>-/* global pwsL10n:true */
</del><ins>+/* global isRtl */
</ins><span class="cx"> (function($){
</span><del>- 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();
</del><span class="cx">
</span><del>- 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() ];
</del><ins>+ $(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' );
</ins><span class="cx"> }
</span><ins>+
+ $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');
+ }
</ins><span class="cx">
</span><del>- $('#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');
- }
</del><ins>+ $stylesheet.attr( 'href', css_url );
</ins><span class="cx">
</span><del>- function animate(){
- if (shouldAnimate === false)
- return;
- if ($input.val().length < password.length){
- $input.val( password.substr(0, $input.val().length + 1) );
- updateResult();
</del><ins>+ // repaint icons
+ if ( typeof wp !== 'undefined' && wp.svgPainter ) {
+ try {
+ colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
+ } catch ( error ) {}
</ins><span class="cx">
</span><del>- // 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();
</del><ins>+ if ( colors ) {
+ wp.svgPainter.setColors( colors );
+ wp.svgPainter.paint();
+ }
+ }
+ });
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- // Act like a normal password strength meter
- $input.on('keyup', function(){
- updateResult();
- });
-
- // Start the animation
- begin();
-
</del><span class="cx"> })(jQuery);
</span></span></pre>
</div>
</div>
</body>
</html>