From bfdd641013377d3125784d78e0de9d8d035c3050 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Tue, 8 Jul 2014 18:18:23 +0000 Subject: [PATCH] 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 #28655. git-svn-id: https://develop.svn.wordpress.org/trunk@29031 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/colors/_admin.scss | 12 +++ src/wp-admin/css/customize-controls.css | 39 ++++++--- src/wp-admin/css/themes.css | 106 +++++++++++++++++++----- src/wp-admin/customize.php | 4 +- src/wp-admin/js/customize-controls.js | 14 ++-- src/wp-admin/theme-install.php | 8 +- 6 files changed, 137 insertions(+), 46 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index eb869c6610..984d4d8c2b 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -453,6 +453,16 @@ body.more-filters-opened .more-filters:focus:before { color: $menu-highlight-text; } +.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; +} + /* Widgets */ .widgets-chooser li.widgets-chooser-selected { @@ -472,6 +482,8 @@ body.more-filters-opened .more-filters:focus:before { color: $menu-highlight-text; } +.customize-controls-close:focus, +.customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover { background-color: $menu-highlight-background; diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index f92389e0d8..a753d2ef5b 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -170,6 +170,22 @@ body { width: 100%; } +.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; +} + .control-panel-back { display: block; position: fixed; @@ -190,11 +206,23 @@ body { display: none; } +.customize-controls-close:focus, +.customize-controls-close:hover, .control-panel-back:focus, .control-panel-back:hover { background-color: #0074a2; color: #fff; outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.customize-controls-close:before { + font: normal 32px/1 dashicons; + content: "\f335"; + position: relative; + top: 8px; + left: 8px; } .control-panel-back:before { @@ -217,17 +245,6 @@ body { height: 22px; } -#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; -} - .wp-full-overlay-sidebar .wp-full-overlay-header { -webkit-transition: padding ease-in-out .18s; transition: padding ease-in-out .18s; diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 13076cbf6f..0b4a65eeb4 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -1617,9 +1617,83 @@ body.full-overlay-active { overflow: auto; } -/* Close Link */ -.wp-full-overlay .close-full-overlay { +/* 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; text-decoration: none; + -webkit-transition: color ease-in .1s; + transition: color ease-in .1s; +} + +.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"; } /* Collapse Button */ @@ -1704,19 +1778,6 @@ body.full-overlay-active { display: none; } -.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; -} - /* Animations */ .wp-full-overlay, .wp-full-overlay-sidebar, @@ -1845,19 +1906,22 @@ body.full-overlay-active { max-width: 100%; } -.theme-install-overlay .wp-full-overlay-header { - margin-top: 9px; -} - .theme-install-overlay .wp-full-overlay-header .theme-install { float: right; + margin: 8px 10px 0 0; /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ line-height: 26px; } .theme-install-overlay .wp-full-overlay-sidebar { - background: #EEE; - border-right: 1px solid #DDD; + background: #eee; + border-right: 1px solid #ddd; +} + +.theme-install-overlay .wp-full-overlay-sidebar-content { + background: #fff; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; } .theme-install-overlay .wp-full-overlay-main { diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index 7e69d13488..7d1aa47b58 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -112,8 +112,8 @@ do_action( 'customize_controls_print_scripts' ); submit_button( $save_text, 'primary save', 'save', false ); ?> - - + + diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index a550d3e9bc..53a11678a6 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -916,7 +916,7 @@ var previewer, parent, topFocus, body = $( document.body ), overlay = body.children( '.wp-full-overlay' ), - backBtn = $( '.back' ), + closeBtn = $( '.customize-controls-close' ), saveBtn = $( '#save' ); // Prevent the form from saving when enter is pressed on an input or select element. @@ -1044,15 +1044,15 @@ state.bind( 'change', function() { if ( ! activated() ) { saveBtn.val( api.l10n.activate ).prop( 'disabled', false ); - backBtn.text( api.l10n.cancel ); + closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel ); } else if ( saved() ) { saveBtn.val( api.l10n.saved ).prop( 'disabled', true ); - backBtn.text( api.l10n.close ); + closeBtn.find( '.screen-reader-text' ).text( api.l10n.close ); } else { saveBtn.val( api.l10n.save ).prop( 'disabled', false ); - backBtn.text( api.l10n.cancel ); + closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel ); } }); @@ -1091,7 +1091,7 @@ event.preventDefault(); }); - backBtn.keydown( function( event ) { + closeBtn.keydown( function( event ) { if ( 9 === event.which ) // tab return; if ( 13 === event.which ) // enter @@ -1121,7 +1121,7 @@ // If we receive a 'back' event, we're inside an iframe. // Send any clicks to the 'Return' link to the parent page. parent.bind( 'back', function() { - backBtn.on( 'click.back', function( event ) { + closeBtn.on( 'click.customize-controls-close', function( event ) { event.preventDefault(); parent.send( 'close' ); }); @@ -1206,7 +1206,7 @@ api.trigger( 'ready' ); // Make sure left column gets focus - topFocus = backBtn; + topFocus = closeBtn; topFocus.focus(); setTimeout(function () { topFocus.focus(); diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 19b9828abe..d7e2dbfb84 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -225,7 +225,9 @@ if ( $tab ) {