Ticket #29949: 29949.4.diff

src/wp-admin/css/customize-controls.css

@@ -228 +228 @@
         transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 }
 
-.collapsed .control-panel-back {
-        display: none;
+.collapsed .customize-controls-close {
+        padding-right: 0;
 }
 
 .customize-controls-close:focus,
@@ -469 +469 @@
         box-shadow: none !important;
         -webkit-border-radius: 0 !important;
         border-radius: 0 !important;
+        position: fixed;
+        left: 0;
+        bottom: 0;
 }
 
-
 .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: #888;
+
+/* Collapsed Mode */
+.collapsed .control-panel-back,
+.expanded .expand-sidebar-label {
+        display: none;
 }
 
+.collapsed .accordion-section-content {
+        display: none !important;
+}
+
+.collapsed.in-sub-panel #customize-info,
+.collapsed.in-sub-panel #customize-theme-controls > ul > .accordion-section,
+.collapsed #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
+        left: 0;
+}
+
+@media screen and (min-width:600px) {
+        .collapsed #customize-preview {
+                left: 46px;
+        }
+
+        .wp-full-overlay.collapsed #customize-controls {
+                margin-left: 0;
+                width: 46px;
+                white-space: nowrap;
+        }
+
+        .collapsed .wp-full-overlay-main {
+                right: 0;
+                width: auto;
+        }
+
+        .collapsed #customize-info,
+        .collapsed #customize-controls .accordion-section-title:after {
+                display: none;
+        }
+
+        .collapsed .control-section .accordion-section-title,
+        .collapsed .control-panel .accordion-section-title { 
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+        }
+
+        .collapsed #customize-controls .wp-full-overlay-sidebar-content {
+                overflow-y: hidden;
+        }
+
+        /* No animation coming in, as it causes layout issues */
+        .expanded.wp-full-overlay,
+        .expanded #customize-preview,
+        .expanded #customize-controls {
+                transition: none;
+        }
+
+        /* No animation going out, as it causes layout issues */
+        .collapsed.wp-full-overlay,
+        .collapsed #customize-preview,
+        .collapsed #customize-controls {
+                transition: none;
+        }
+}
+
+
 /* Style for custom settings */
 
 /*

src/wp-admin/css/customize-widgets.css

@@ -394 +394 @@
         color: #777;
 }
 
-#customize-preview {
+.in-sub-panel #customize-preview {
         -webkit-transition: all 0.2s;
         transition: all 0.2s;
 }

src/wp-admin/css/themes.css

@@ -1468 +1468 @@
 
 /* Collapse Button */
 .wp-full-overlay a.collapse-sidebar {
-        position: absolute;
+        position: fixed;
         bottom: 12px;
         left: 0;
         z-index: 50;
@@ -1487 +1487 @@
         color: #0074a2;
 }
 
-.wp-full-overlay.collapsed .collapse-sidebar {
-        position: absolute;
-        left: 100%;
-}
-
 .wp-full-overlay .collapse-sidebar-arrow {
         position: static;
         margin-top: 0;

src/wp-admin/customize.php

@@ -174 +174 @@
                 </div>
 
                 <div id="customize-footer-actions" class="wp-full-overlay-footer">
-                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
+                        <a href="#" class="collapse-sidebar button-secondary">
                                 <span class="collapse-sidebar-arrow"></span>
-                                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
+                                <span class="collapse-sidebar-label"><?php _e( 'Collapse controls' ); ?></span>
+                                <span class="expand-sidebar-label"><span class="screen-reader-text"><?php _e( 'Expand controls' ); ?></span></span>
                         </a>
                 </div>
         </form>

src/wp-admin/js/customize-controls.js

@@ -2112 +2112 @@
                         event.preventDefault();
                 });
 
+                // Expand Customizer controls on section icon click in collapsed mode.
+                $('.accordion-section-title').on( 'click keydown', function( event ) {
+                        if ( isKeydownButNotEnterEvent( event ) ) { // enter
+                                return;
+                        } else if ( overlay.hasClass( 'collapsed' ) ) {
+                                var section = $( this ).closest( '.control-section' );
+                                if ( section.hasClass( 'control-panel' ) ) {
+                                        if ( section.hasClass( 'current-panel' ) ) {
+                                                // Prevent panel-expand from triggering.
+                                                event.stopImmediatePropagation();
+                                        } else {
+                                                if ( overlay.hasClass( 'in-sub-panel' ) ) {
+                                                        $( '.control-panel-back' ).trigger( 'click' );
+                                                }
+                                        }
+                                } else {
+                                        if ( section.hasClass( 'open' ) ) {
+                                                // Prevent the section from trying to close.
+                                                event.stopImmediatePropagation();
+                                        }
+                                        else {
+                                                // Close any open sections/panels.
+                                                if ( overlay.hasClass( 'in-sub-panel' ) ) {
+                                                        $( '.control-panel-back' ).trigger( 'click' );
+                                                } else {
+                                                        $( '.control-section.open .accordion-section-title' ).trigger( 'click' );
+                                                }
+                                        }
+                                }
+                                // Expand the controls.
+                                $( '.collapse-sidebar' ).trigger( 'click' );
+                        }
+                });
+
+
                 // Bind site title display to the corresponding field.
                 if ( title.length ) {
                         $( '#customize-control-blogname input' ).on( 'input', function() {