Ticket #29949: 29949.2.diff

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

@@ -208 +208 @@
         transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
-.control-panel-back {
+.control-panel-back,
+.expand-controls {
         display: block;
         position: fixed;
         top: 0;
@@ -224 +225 @@
         transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
 }
 
-.collapsed .control-panel-back {
+.expand-controls {
+        padding-right: 0;
+        transition: none;
+}
+
+.collapsed .control-panel-back,
+.collapsed .customize-controls-close {
         display: none;
 }
 
+.collapsed .expand-controls {
+        left: 0;
+}
+
 .customize-controls-close:focus,
 .customize-controls-close:hover,
 .control-panel-back:focus,
-.control-panel-back:hover {
+.control-panel-back:hover,
+.expand-controls:focus,
+.expand-controls:hover {
         background: #ddd;
         border-color: #ccc;
         color: #000;
@@ -256 +269 @@
         left: 13px;
 }
 
+.expand-controls:before {
+        font: normal 20px/1 dashicons;
+        content: "\f345";
+        position: relative;
+        top: 7px;
+        left: 13px;
+}
+
+.rtl .expand-controls:before {
+        content: "\f341";
+}
+
 .rtl .control-panel-back:before {
         content: "\f344";
 }
@@ -431 +456 @@
         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 {
@@ -440 +467 @@
         text-shadow: none;
 }
 
-.collapsed .collapse-sidebar-arrow:before {
-        color: #888;
+/* Collapsed Mode */
+@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 fading in, as it causes layout issues */
+        .expanded.wp-full-overlay,
+        .expanded #customize-preview,
+        .expanded #customize-controls {
+                transition: none;
+        }
+
+        .in-sub-panel.wp-full-overlay,
+        .collapsed.wp-full-overlay,
+        .in-sub-panel #customize-preview,
+        .collapsed #customize-preview,
+        .collapsed #customize-controls {
+                transition: all .2s linear;
+        }
+
 }
 
+
 /* Style for custom settings */
 
 /*

src/wp-admin/css/themes.css

@@ -1464 +1464 @@
 
 /* Collapse Button */
 .wp-full-overlay a.collapse-sidebar {
-        position: absolute;
+        position: fixed;
         bottom: 12px;
         left: 0;
         z-index: 50;
@@ -1483 +1483 @@
         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

@@ -122 +122 @@
                                 <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
                         </a>
                         <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
+                        <span class="expand-controls" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Expand controls' ); ?></span></span>
                 </div>
 
                 <?php
@@ -173 +174 @@
                 <div id="customize-footer-actions" class="wp-full-overlay-footer">
                         <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
                                 <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>
                         </a>
                 </div>
         </form>

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

@@ -1185 +1185 @@
                                 this.click();
                 });
 
+                $('.expand-controls').on( 'click keydown', function( event ) {
+                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+                });
+
                 $('.collapse-sidebar').on( 'click keydown', function( event ) {
-                        if ( event.type === 'keydown' &&  13 !== event.which ) // enter
+                        if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
                                 return;
+                        }
 
                         overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+                        $('.control-section.open .accordion-section-title').trigger( 'click' );
+                        if ( overlay.hasClass('in-sub-panel') ) {
+                                $('.control-panel-back').trigger( 'click' );
+                        }
                         event.preventDefault();
                 });
 
+                $('.accordion-section-title').on( 'click keydown', function( event ) {
+                        if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
+                                return;
+                        } else if ( overlay.hasClass( 'collapsed' ) ) {
+                                if ( ! $( this ).closest( '.control-section' ).hasClass( 'open' ) ) {
+                                        $( '.expand-controls' ).trigger( 'click' );                             
+                                }
+                        }
+                });
+
                 // Bind site title display to the corresponding field.
                 if ( title.length ) {
                         $( '#customize-control-blogname input' ).on( 'input', function() {