<!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>[29031] trunk/src/wp-admin: More consistent icons in place of some buttons for the Customizer and theme install preview.</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/29031">29031</a></dd>
<dt>Author</dt> <dd>helen</dd>
<dt>Date</dt> <dd>2014-07-08 18:18:23 +0000 (Tue, 08 Jul 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>More consistent icons in place of some buttons for the Customizer and theme install preview.
* Use a single close icon instead of a context-changing cancel/close button in the Customizer. In user testing, this small distinction in language was overlooked, and we use an AYS now instead. This also makes it consistent with the back arrow in Customizer panels.
* Use the same close icon as well as the previous/next arrows from the theme details browser in the theme install preview.
props celloexpressions. fixes <a href="http://core.trac.wordpress.org/ticket/28655">#28655</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscolors_adminscss">trunk/src/wp-admin/css/colors/_admin.scss</a></li>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincssthemescss">trunk/src/wp-admin/css/themes.css</a></li>
<li><a href="#trunksrcwpadmincustomizephp">trunk/src/wp-admin/customize.php</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminthemeinstallphp">trunk/src/wp-admin/theme-install.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscolors_adminscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/colors/_admin.scss (29030 => 29031)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/colors/_admin.scss 2014-07-08 17:51:58 UTC (rev 29030)
+++ trunk/src/wp-admin/css/colors/_admin.scss 2014-07-08 18:18:23 UTC (rev 29031)
</span><span class="lines">@@ -453,6 +453,16 @@
</span><span class="cx"> color: $menu-highlight-text;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+ background-color: $menu-highlight-background;
+ color: $menu-highlight-text;
+}
+
</ins><span class="cx"> /* Widgets */
</span><span class="cx">
</span><span class="cx"> .widgets-chooser li.widgets-chooser-selected {
</span><span class="lines">@@ -472,6 +482,8 @@
</span><span class="cx"> color: $menu-highlight-text;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.customize-controls-close:focus,
+.customize-controls-close:hover,
</ins><span class="cx"> .control-panel-back:focus,
</span><span class="cx"> .control-panel-back:hover {
</span><span class="cx"> background-color: $menu-highlight-background;
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/customize-controls.css (29030 => 29031)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/customize-controls.css 2014-07-08 17:51:58 UTC (rev 29030)
+++ trunk/src/wp-admin/css/customize-controls.css 2014-07-08 18:18:23 UTC (rev 29031)
</span><span class="lines">@@ -170,6 +170,22 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.customize-controls-close {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 45px;
+ height: 45px;
+ padding-right: 2px;
+ background: #eee;
+ border-right: 1px solid #ddd;
+ color: #444;
+ cursor: pointer;
+ -webkit-transition: color ease-in .1s;
+ transition: color ease-in .1s;
+}
+
</ins><span class="cx"> .control-panel-back {
</span><span class="cx"> display: block;
</span><span class="cx"> position: fixed;
</span><span class="lines">@@ -190,13 +206,25 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.customize-controls-close:focus,
+.customize-controls-close:hover,
</ins><span class="cx"> .control-panel-back:focus,
</span><span class="cx"> .control-panel-back:hover {
</span><span class="cx"> background-color: #0074a2;
</span><span class="cx"> color: #fff;
</span><span class="cx"> outline: none;
</span><ins>+ -webkit-box-shadow: none;
+ box-shadow: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.customize-controls-close:before {
+ font: normal 32px/1 dashicons;
+ content: "\f335";
+ position: relative;
+ top: 8px;
+ left: 8px;
+}
+
</ins><span class="cx"> .control-panel-back:before {
</span><span class="cx"> font: normal 29px/1 dashicons;
</span><span class="cx"> content: "\f340";
</span><span class="lines">@@ -217,17 +245,6 @@
</span><span class="cx"> height: 22px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#customize-header-actions a.back {
- position: relative;
- left: 0;
- -webkit-transition: left ease-in-out .18s;
- transition: left ease-in-out .18s;
-}
-
-.in-sub-panel #customize-header-actions a.back {
- left: -120px;
-}
-
</del><span class="cx"> .wp-full-overlay-sidebar .wp-full-overlay-header {
</span><span class="cx"> -webkit-transition: padding ease-in-out .18s;
</span><span class="cx"> transition: padding ease-in-out .18s;
</span></span></pre></div>
<a id="trunksrcwpadmincssthemescss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/themes.css (29030 => 29031)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/themes.css 2014-07-08 17:51:58 UTC (rev 29030)
+++ trunk/src/wp-admin/css/themes.css 2014-07-08 18:18:23 UTC (rev 29031)
</span><span class="lines">@@ -1617,11 +1617,85 @@
</span><span class="cx"> overflow: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-/* Close Link */
-.wp-full-overlay .close-full-overlay {
</del><ins>+/* Close & Navigation Links */
+.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
+ padding: 0;
+}
+
+.theme-install-overlay .close-full-overlay,
+.theme-install-overlay .previous-theme,
+.theme-install-overlay .next-theme {
+ display: block;
+ position: relative;
+ float: left;
+ width: 45px;
+ height: 45px;
+ padding-right: 2px;
+ background: #eee;
+ border-right: 1px solid #ddd;
+ color: #444;
+ cursor: pointer;
</ins><span class="cx"> text-decoration: none;
</span><ins>+ -webkit-transition: color ease-in .1s;
+ transition: color ease-in .1s;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+ background-color: #0074a2;
+ color: #fff;
+ outline: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.theme-install-overlay .close-full-overlay:before {
+ font: normal 30px/1 dashicons;
+ content: "\f335";
+ position: relative;
+ top: 9px;
+ left: 9px;
+}
+
+.theme-install-overlay .previous-theme:before {
+ font: normal 20px/1 dashicons;
+ content: "\f340";
+ position: relative;
+ top: 6px;
+ left: 14px;
+}
+
+.theme-install-overlay .next-theme:before {
+ font: normal 20px/1 dashicons;
+ content: "\f344";
+ position: relative;
+ top: 6px;
+ left: 13px;
+}
+
+.theme-install-overlay .previous-theme.disabled,
+.theme-install-overlay .next-theme.disabled,
+.theme-install-overlay .previous-theme.disabled:hover,
+.theme-install-overlay .previous-theme.disabled:focus,
+.theme-install-overlay .next-theme.disabled:hover,
+.theme-install-overlay .next-theme.disabled:focus {
+ color: #bbb;
+ background: #eee;
+ cursor: default;
+}
+
+.rtl .theme-install-overlay .previous-theme:before {
+ content: "\f344";
+}
+
+.rtl .theme-install-overlay .next-theme:before {
+ content: "\f340";
+}
+
</ins><span class="cx"> /* Collapse Button */
</span><span class="cx"> .wp-full-overlay a.collapse-sidebar {
</span><span class="cx"> position: absolute;
</span><span class="lines">@@ -1704,19 +1778,6 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-full-overlay .theme-navigation {
- padding: 10px 20px;
- position: absolute;
- bottom: 10px;
- text-align: left;
-}
-.wp-full-overlay .theme-navigation .next-theme {
- float: right;
-}
-.wp-full-overlay.no-navigation .theme-navigation {
- display: none;
-}
-
</del><span class="cx"> /* Animations */
</span><span class="cx"> .wp-full-overlay,
</span><span class="cx"> .wp-full-overlay-sidebar,
</span><span class="lines">@@ -1845,21 +1906,24 @@
</span><span class="cx"> max-width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.theme-install-overlay .wp-full-overlay-header {
- margin-top: 9px;
-}
-
</del><span class="cx"> .theme-install-overlay .wp-full-overlay-header .theme-install {
</span><span class="cx"> float: right;
</span><ins>+ margin: 8px 10px 0 0;
</ins><span class="cx"> /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
</span><span class="cx"> line-height: 26px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .theme-install-overlay .wp-full-overlay-sidebar {
</span><del>- background: #EEE;
- border-right: 1px solid #DDD;
</del><ins>+ background: #eee;
+ border-right: 1px solid #ddd;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.theme-install-overlay .wp-full-overlay-sidebar-content {
+ background: #fff;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+}
+
</ins><span class="cx"> .theme-install-overlay .wp-full-overlay-main {
</span><span class="cx"> background: #fff url(../images/spinner.gif) no-repeat center center;
</span><span class="cx"> -webkit-background-size: 20px 20px;
</span></span></pre></div>
<a id="trunksrcwpadmincustomizephp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/customize.php (29030 => 29031)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/customize.php 2014-07-08 17:51:58 UTC (rev 29030)
+++ trunk/src/wp-admin/customize.php 2014-07-08 18:18:23 UTC (rev 29031)
</span><span class="lines">@@ -112,8 +112,8 @@
</span><span class="cx"> submit_button( $save_text, 'primary save', 'save', false );
</span><span class="cx"> ?>
</span><span class="cx"> <span class="spinner"></span>
</span><del>- <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
- <?php _e( 'Cancel' ); ?>
</del><ins>+ <a class="customize-controls-close" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
+ <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
</ins><span class="cx"> </a>
</span><span class="cx"> </div>
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/customize-controls.js (29030 => 29031)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/customize-controls.js 2014-07-08 17:51:58 UTC (rev 29030)
+++ trunk/src/wp-admin/js/customize-controls.js 2014-07-08 18:18:23 UTC (rev 29031)
</span><span class="lines">@@ -916,7 +916,7 @@
</span><span class="cx"> var previewer, parent, topFocus,
</span><span class="cx"> body = $( document.body ),
</span><span class="cx"> overlay = body.children( '.wp-full-overlay' ),
</span><del>- backBtn = $( '.back' ),
</del><ins>+ closeBtn = $( '.customize-controls-close' ),
</ins><span class="cx"> saveBtn = $( '#save' );
</span><span class="cx">
</span><span class="cx"> // Prevent the form from saving when enter is pressed on an input or select element.
</span><span class="lines">@@ -1044,15 +1044,15 @@
</span><span class="cx"> state.bind( 'change', function() {
</span><span class="cx"> if ( ! activated() ) {
</span><span class="cx"> saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
</span><del>- backBtn.text( api.l10n.cancel );
</del><ins>+ closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
</ins><span class="cx">
</span><span class="cx"> } else if ( saved() ) {
</span><span class="cx"> saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
</span><del>- backBtn.text( api.l10n.close );
</del><ins>+ closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
</ins><span class="cx">
</span><span class="cx"> } else {
</span><span class="cx"> saveBtn.val( api.l10n.save ).prop( 'disabled', false );
</span><del>- backBtn.text( api.l10n.cancel );
</del><ins>+ closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -1091,7 +1091,7 @@
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> });
</span><span class="cx">
</span><del>- backBtn.keydown( function( event ) {
</del><ins>+ closeBtn.keydown( function( event ) {
</ins><span class="cx"> if ( 9 === event.which ) // tab
</span><span class="cx"> return;
</span><span class="cx"> if ( 13 === event.which ) // enter
</span><span class="lines">@@ -1121,7 +1121,7 @@
</span><span class="cx"> // If we receive a 'back' event, we're inside an iframe.
</span><span class="cx"> // Send any clicks to the 'Return' link to the parent page.
</span><span class="cx"> parent.bind( 'back', function() {
</span><del>- backBtn.on( 'click.back', function( event ) {
</del><ins>+ closeBtn.on( 'click.customize-controls-close', function( event ) {
</ins><span class="cx"> event.preventDefault();
</span><span class="cx"> parent.send( 'close' );
</span><span class="cx"> });
</span><span class="lines">@@ -1206,7 +1206,7 @@
</span><span class="cx"> api.trigger( 'ready' );
</span><span class="cx">
</span><span class="cx"> // Make sure left column gets focus
</span><del>- topFocus = backBtn;
</del><ins>+ topFocus = closeBtn;
</ins><span class="cx"> topFocus.focus();
</span><span class="cx"> setTimeout(function () {
</span><span class="cx"> topFocus.focus();
</span></span></pre></div>
<a id="trunksrcwpadminthemeinstallphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/theme-install.php (29030 => 29031)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/theme-install.php 2014-07-08 17:51:58 UTC (rev 29030)
+++ trunk/src/wp-admin/theme-install.php 2014-07-08 18:18:23 UTC (rev 29031)
</span><span class="lines">@@ -225,7 +225,9 @@
</span><span class="cx"> <script id="tmpl-theme-preview" type="text/template">
</span><span class="cx"> <div class="wp-full-overlay-sidebar">
</span><span class="cx"> <div class="wp-full-overlay-header">
</span><del>- <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
</del><ins>+ <a href="#" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></a>
+ <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
+ <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
</ins><span class="cx"> <# if ( data.installed ) { #>
</span><span class="cx"> <a href="#" class="button button-primary theme-install disabled"><?php _ex( 'Installed', 'theme' ); ?></a>
</span><span class="cx"> <# } else { #>
</span><span class="lines">@@ -262,10 +264,6 @@
</span><span class="cx"> <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
</span><span class="cx"> <span class="collapse-sidebar-arrow"></span>
</span><span class="cx"> </a>
</span><del>- <div class="theme-navigation">
- <a class="previous-theme button" href="#"><?php _ex( 'Previous', 'Button label for a theme' ); ?></a>
- <a class="next-theme button" href="#"><?php _ex( 'Next', 'Button label for a theme' ); ?></a>
- </div>
</del><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> <div class="wp-full-overlay-main">
</span></span></pre>
</div>
</div>
</body>
</html>