Ticket #31195: 31195.diff

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

@@ -829 +829 @@
         float: right;
 }
 
+/* Device/preview size toggles */
+#customize-footer-actions {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 300px;
+        height: 45px;
+}
 
+#customize-footer-actions .devices {
+        width: 100%;
+        padding: 7px 0;
+        text-align: center;
+}
+
+#customize-footer-actions .devices button {
+        cursor: pointer;
+        color: #555;
+        background: transparent;
+        border: none;
+        -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 .devices button:hover,
+#customize-footer-actions .devices button:focus,
+#customize-footer-actions .devices button.active {
+        color: #222;
+}
+
+#customize-footer-actions .devices button:before {
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 30px/1 "dashicons";
+        vertical-align: top;
+}
+
+#customize-footer-actions .devices .preview-full:before {
+        content: "\f211";
+}
+
+#customize-footer-actions .devices .preview-desktop:before {
+        content: "\f472";
+}
+
+#customize-footer-actions .devices .preview-tablet:before {
+        content: "\f471";
+}
+
+#customize-footer-actions .devices .preview-mobile:before {
+        content: "\f470";
+}
+
+@media screen and (max-width:1024px) {
+        #customize-footer-actions {
+                display: none;
+        }
+}
+
+.collapsed #customize-footer-actions .devices button:before {
+        display: none;
+}
+
+.collapsed #customize-footer-actions .devices .preview-full {
+        left: 0;
+}
+
+.collapsed #customize-footer-actions .devices .preview-full:before {
+        display: inline-block;
+        content: "\f506";
+}
+
+.preview-mobile #customize-preview {
+        margin: auto 0 auto -160px;
+        width: 320px;
+        height: 480px;
+        max-height: calc(100% - 48px);
+        max-width: calc(100% - 48px);
+        left: 50%;
+        border: 24px solid #000;
+        border-radius: 12px;
+}
+
+.preview-tablet #customize-preview {
+        margin: auto 0 auto -3in;
+        width: 6in;
+        height: 9in;
+        max-height: calc(100% - 48px);
+        max-width: calc(100% - 48px);
+        left: 50%;
+        border: 24px solid #000;
+        border-radius: 12px;
+}
+
 /** Handle cheaters. */
 body.cheatin {
         font-size: medium;

src/wp-admin/customize.php

@@ -175 +175 @@
                 </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'); ?>">
-                                <span class="collapse-sidebar-arrow"></span>
-                                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
-                        </a>
+                        <div class="devices">
+                                <button class="preview-full collapse-sidebar"><span class="screen-reader-text"><?php _e( 'Enter fullscreen mode' ); ?></span></button>
+                                <button class="preview-desktop active"><span class="screen-reader-text"><?php _e( 'Return to desktop mode' ); ?></span></button>
+                                <button class="preview-tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet mode' ); ?></span></button>
+                                <button class="preview-mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile mode' ); ?></span></button>
+                        </div>
                 </div>
         </form>
         <div id="customize-preview" class="wp-full-overlay-main"></div>

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

@@ -2239 +2239 @@
                         event.preventDefault();
                 });
 
+                // Preview size toggles.
+                $( '#customize-footer-actions .devices button' ).on( 'click keydown', function( event ) {
+                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                return;
+                        }
+
+                        $( '#customize-footer-actions .devices button' ).removeClass( 'active' );
+                        overlay.removeClass( 'preview-full preview-desktop preview-tablet preview-mobile' )
+                               .toggleClass( event.currentTarget.className );
+                        $( event.currentTarget ).addClass( 'active' );
+                        event.preventDefault();
+                });
+                
                 // Bind site title display to the corresponding field.
                 if ( title.length ) {
                         $( '#customize-control-blogname input' ).on( 'input', function() {