Ticket #28784: 28784.diff

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

@@ -235 +235 @@
 .customize-controls-close:focus,
 .customize-controls-close:hover,
 .control-panel-back:focus,
-.control-panel-back:hover {
+.control-panel-back:hover,
+.customize-controls-preview-toggle:focus,
+.customize-controls-preview-toggle:hover {
         background: #ddd;
         border-color: #ccc;
         color: #000;
@@ -848 +850 @@
         line-height: 1.5;
         margin: 25px 0 20px;
 }
+
+/* Responsive */
+.customize-controls-preview-toggle {
+        display: none;
+}
+
+@media screen and (max-width:640px) {
+        #customize-controls {
+                width: 100%;
+        }
+
+        .wp-full-overlay.expanded {
+                margin-left: 0;
+        }
+
+        .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
+                bottom: 0;
+        }
+
+        .customize-controls-preview-toggle {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 48px;
+                line-height: 45px;
+                font-size: 14px;
+                padding: 0 12px 0 12px;
+                margin: 0;
+                height: 45px;
+                background: #eee;
+                border-right: 1px solid #ddd;
+                color: #444;
+                cursor: pointer;
+                -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+                transition: color .1s ease-in-out, background .1s ease-in-out;
+        }
+
+        #customize-footer-actions,
+        #customize-preview,
+        .customize-controls-preview-toggle .controls,
+        .preview-only .wp-full-overlay-sidebar-content,
+        .preview-only .customize-controls-preview-toggle .preview {
+                display: none;
+        }
+
+        .customize-controls-preview-toggle .preview:before,
+        .customize-controls-preview-toggle .controls:before {
+                font: normal 20px/1 dashicons;
+                content: "\f177";
+                position: relative;
+                top: 4px;
+                margin-right: 6px;
+        }
+
+        .customize-controls-preview-toggle .controls:before {
+                content: "\f100";
+        }
+
+        .preview-only #customize-controls {
+                height: 45px;
+        }
+
+        .preview-only #customize-preview,
+        .preview-only .customize-controls-preview-toggle .controls {
+                display: block;
+        }
+
+        #customize-preview {
+                top: 45px;
+                bottom: 0;
+                height: auto;
+        }
+}

src/wp-admin/customize.php

@@ -126 +126 @@
                                 submit_button( $save_text, 'primary save', 'save', false );
                         ?>
                         <span class="spinner"></span>
+                        <a class="customize-controls-preview-toggle" href="#">
+                                <span class="controls"><?php _e( 'Customize' ); ?></span>
+                                <span class="preview"><?php _e( 'Preview' ); ?></span>
+                        </a>
                         <a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
                                 <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
                         </a>

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

@@ -2239 +2239 @@
                         event.preventDefault();
                 });
 
+                $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {
+                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                return;
+                        }
+
+                        overlay.toggleClass( 'preview-only' );
+                        event.preventDefault();
+                });
+
                 // Bind site title display to the corresponding field.
                 if ( title.length ) {
                         $( '#customize-control-blogname input' ).on( 'input', function() {