Index: src/wp-admin/css/customize-controls.css =================================================================== --- src/wp-admin/css/customize-controls.css (revision 32987) +++ src/wp-admin/css/customize-controls.css (working copy) @@ -639,26 +639,6 @@ 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 */ /* Index: src/wp-admin/css/customize-nav-menus.css =================================================================== --- src/wp-admin/css/customize-nav-menus.css (revision 32987) +++ src/wp-admin/css/customize-nav-menus.css (working copy) @@ -374,13 +374,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; } Index: src/wp-admin/css/themes.css =================================================================== --- src/wp-admin/css/themes.css (revision 32987) +++ src/wp-admin/css/themes.css (working copy) @@ -512,8 +512,6 @@ content: "\f345"; } - - .theme-overlay .theme-wrap { clear: both; position: fixed; @@ -1477,65 +1475,78 @@ } /* 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 { @@ -1544,21 +1555,6 @@ 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, @@ -1619,10 +1615,6 @@ transition: opacity 0.3s; } -#customize-container .collapse-sidebar { - bottom: 16px; -} - #customize-controls { margin-top: 0; } Index: src/wp-admin/customize.php =================================================================== --- src/wp-admin/customize.php (revision 32987) +++ src/wp-admin/customize.php (working copy) @@ -166,10 +166,10 @@
Index: src/wp-admin/includes/class-wp-theme-install-list-table.php =================================================================== --- src/wp-admin/includes/class-wp-theme-install-list-table.php (revision 32987) +++ src/wp-admin/includes/class-wp-theme-install-list-table.php (working copy) @@ -328,10 +328,10 @@
- +
Index: src/wp-admin/js/customize-controls.js =================================================================== --- src/wp-admin/js/customize-controls.js (revision 32987) +++ src/wp-admin/js/customize-controls.js (working copy) @@ -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 ) { Index: src/wp-admin/js/theme.js =================================================================== --- src/wp-admin/js/theme.js (revision 32987) +++ src/wp-admin/js/theme.js (working copy) @@ -793,7 +793,13 @@ 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; Index: src/wp-admin/theme-install.php =================================================================== --- src/wp-admin/theme-install.php (revision 32987) +++ src/wp-admin/theme-install.php (working copy) @@ -51,6 +51,8 @@ '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 ), ) ); @@ -256,10 +258,10 @@
- +
Index: src/wp-includes/script-loader.php =================================================================== --- src/wp-includes/script-loader.php (revision 32987) +++ src/wp-includes/script-loader.php (working copy) @@ -419,9 +419,10 @@ '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 );