diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 4462b85162..31ca6e6a2d 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -648,26 +648,6 @@ p.customize-section-description { border-right: 1px solid #ddd; } -.collapse-sidebar { - background-color: transparent !important; - border: none !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; - -webkit-border-radius: 0 !important; - border-radius: 0 !important; -} - - -.collapse-sidebar:active, -.collapse-sidebar:active .collapse-sidebar-label, -.collapse-sidebar:active .collapse-sidebar-arrow:before { - text-shadow: none; -} - -.collapsed .collapse-sidebar-arrow:before { - color: #82878c; -} - /* Style for custom settings */ /* diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 7f8c444015..6f50f12032 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -379,13 +379,6 @@ display: block; } - -/* Not exactly sure what broke this, or why it works without these styles in core. */ -.wp-customizer .wp-full-overlay a.collapse-sidebar { - position: fixed; - left: 0; -} - /* WARNING: The 20px factor is hard-coded in JS. */ .menu-item-depth-0 { margin-left: 0; } .menu-item-depth-1 { margin-left: 20px; } diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 4c026a2ed6..16b5e307fb 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -512,8 +512,6 @@ content: "\f345"; } - - .theme-overlay .theme-wrap { clear: both; position: fixed; @@ -1470,65 +1468,78 @@ body.full-overlay-active { } /* Collapse Button */ -.wp-full-overlay a.collapse-sidebar { - position: absolute; - bottom: 12px; - left: 0; - z-index: 50; - display: block; - width: 19px; - height: 19px; - margin-left: 15px; +.wp-core-ui .wp-full-overlay .collapse-sidebar { + position: fixed; + bottom: 8px; + left: 10px; padding: 0; - -webkit-border-radius: 50%; - border-radius: 50%; - color: #777; - text-decoration: none; + color: #656a6f; + outline: 0; + line-height: 1; + background-color: transparent !important; + border: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + -webkit-border-radius: 0 !important; + border-radius: 0 !important; } -.wp-full-overlay a.collapse-sidebar:hover { +.wp-core-ui .wp-full-overlay .collapse-sidebar:hover, +.wp-core-ui .wp-full-overlay .collapse-sidebar:focus { color: #0073aa; } -.wp-full-overlay.collapsed .collapse-sidebar { - position: absolute; - left: 100%; +.wp-full-overlay .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar-label { + display: inline-block; + vertical-align: middle; + line-height: 20px; } .wp-full-overlay .collapse-sidebar-arrow { - position: static; - margin-top: 0; - margin-left: 0; - display: block; - width: auto; - height: auto; - background: none; + width: 20px; + height: 20px; + margin: 0 2px; /* avoid the focus box-shadow to be cut-off */ + -webkit-border-radius: 50%; + border-radius: 50%; + overflow: hidden; +} + +.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, +.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + +.wp-full-overlay .collapse-sidebar-label { + margin-left: 3px; +} + +.wp-full-overlay.collapsed .collapse-sidebar-label { + display: none; } .wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-border-radius: 50%; - border-radius: 50%; - float: left; + display: block; content: "\f148"; background: #eee; font: normal 20px/1 'dashicons'; speak: none; - display: block; padding: 0; - text-indent: 0; - text-align: center; - position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; } /* rtl:ignore */ .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, .rtl .wp-full-overlay .collapse-sidebar-arrow:before { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); + -webkit-transform: rotate(180.001deg); + -ms-transform: rotate(180.001deg); + transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing */ } .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before { @@ -1537,21 +1548,6 @@ body.full-overlay-active { transform: none; } -.wp-full-overlay.collapsed .collapse-sidebar-arrow { - background-position: -1px -109px; -} - -.wp-full-overlay .collapse-sidebar-label { - position: absolute; - left: 100%; - line-height: 20px; - margin-left: 10px; -} - -.wp-full-overlay.collapsed .collapse-sidebar-label { - display: none; -} - /* Animations */ .wp-full-overlay, .wp-full-overlay-sidebar, @@ -1612,10 +1608,6 @@ body.full-overlay-active { transition: opacity 0.3s; } -#customize-container .collapse-sidebar { - bottom: 16px; -} - #customize-controls { margin-top: 0; } diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index e3ea406f28..6871fdb552 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -166,10 +166,10 @@ do_action( 'customize_controls_print_scripts' );
diff --git a/src/wp-admin/includes/class-wp-theme-install-list-table.php b/src/wp-admin/includes/class-wp-theme-install-list-table.php index da4ed275d9..427c539148 100644 --- a/src/wp-admin/includes/class-wp-theme-install-list-table.php +++ b/src/wp-admin/includes/class-wp-theme-install-list-table.php @@ -328,10 +328,10 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
- - +
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index b6d1c62d06..e763e34a32 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -3086,13 +3086,14 @@ event.preventDefault(); }); - $('.collapse-sidebar').on( 'click keydown', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; + $( '.collapse-sidebar' ).on( 'click', function() { + if ( 'true' === $( this ).attr( 'aria-expanded' ) ) { + $( this ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar }); + } else { + $( this ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar }); } overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); - event.preventDefault(); }); $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) { diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index c307636a37..0e83f4e04b 100644 --- a/src/wp-admin/js/theme.js +++ b/src/wp-admin/js/theme.js @@ -793,7 +793,13 @@ themes.view.Preview = themes.view.Details.extend({ return false; }, - collapse: function() { + collapse: function( event ) { + var $button = $( event.currentTarget ); + if ( 'true' === $button.attr( 'aria-expanded' ) ) { + $button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar }); + } else { + $button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar }); + } this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); return false; diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index a69eb07b21..92fd53ccb1 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -51,6 +51,8 @@ wp_localize_script( 'theme', '_wpThemeSettings', array( 'error' => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the support forums.' ), 'themesFound' => __( 'Number of Themes found: %d' ), 'noThemesFound' => __( 'No themes found. Try a different search.' ), + 'collapseSidebar' => __( 'Collapse Sidebar' ), + 'expandSidebar' => __( 'Expand Sidebar' ), ), 'installedThemes' => array_keys( $installed_themes ), ) ); @@ -252,10 +254,10 @@ if ( $tab ) {
- - +
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 3e55a11c4f..0d219d69e2 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -419,9 +419,10 @@ function wp_default_scripts( &$scripts ) { 'cheatin' => __( 'Cheatin’ uh?' ), 'previewIframeTitle' => __( 'Site Preview' ), 'loginIframeTitle' => __( 'Session expired' ), - + 'collapseSidebar' => __( 'Collapse Sidebar' ), + 'expandSidebar' => __( 'Expand Sidebar' ), // Used for overriding the file types allowed in plupload. - 'allowedFiles' => __( 'Allowed Files' ), + 'allowedFiles' => __( 'Allowed Files' ), ) ); $scripts->add( 'customize-widgets', "/wp-admin/js/customize-widgets$suffix.js", array( 'jquery', 'jquery-ui-sortable', 'jquery-ui-droppable', 'wp-backbone', 'customize-controls' ), false, 1 );