Ticket #29949: 29949.diff

Index: src/wp-admin/css/customize-controls.css
===================================================================
--- src/wp-admin/css/customize-controls.css     (revision 29885)
+++ src/wp-admin/css/customize-controls.css     (working copy)
@@ -208,7 +208,8 @@
        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,14 +225,26 @@
        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,6 +269,18 @@
        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,9 +456,11 @@
        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,10 +467,110 @@
        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 */
 
 /*
Index: src/wp-admin/css/themes.css
===================================================================
--- src/wp-admin/css/themes.css (revision 29885)
+++ src/wp-admin/css/themes.css (working copy)
@@ -1464,7 +1464,7 @@
 
 /* Collapse Button */
 .wp-full-overlay a.collapse-sidebar {
-       position: absolute;
+       position: fixed;
        bottom: 12px;
        left: 0;
        z-index: 50;
@@ -1483,11 +1483,6 @@
        color: #0074a2;
 }
 
-.wp-full-overlay.collapsed .collapse-sidebar {
-       position: absolute;
-       left: 100%;
-}
-
 .wp-full-overlay .collapse-sidebar-arrow {
        position: static;
        margin-top: 0;
Index: src/wp-admin/customize.php
===================================================================
--- src/wp-admin/customize.php  (revision 29885)
+++ src/wp-admin/customize.php  (working copy)
@@ -122,6 +122,7 @@
                                <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,7 +174,7 @@
                <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>
Index: src/wp-admin/js/customize-controls.js
===================================================================
--- src/wp-admin/js/customize-controls.js       (revision 29885)
+++ src/wp-admin/js/customize-controls.js       (working copy)
@@ -1185,14 +1185,33 @@
                                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() {