Ticket #36017: 36017.diff

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

@@ -1334 +1334 @@
         color: #00a0d2;
 }
 
-/* Device/preview size toggles */
-
-.wp-full-overlay {
-        background: #191e23;
-}
-
-#customize-preview.wp-full-overlay-main {
-        background-color: #f1f1f1;
-}
-
-.expanded #customize-footer-actions {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 300px;
-        height: 45px;
-        border-top: 1px solid #ddd;
-}
-
-#customize-footer-actions .devices {
-        float: right;
-}
-
-#customize-footer-actions .devices button {
-        cursor: pointer;
-        background: transparent;
-        border: none;
-        height: 45px;
-        padding: 0 3px;
-        margin: 0 0 0 -4px;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        border-top: 1px solid transparent;
-        border-bottom: 4px solid transparent;
-        -webkit-transition: background .1s ease-in-out;
-        transition: background .1s ease-in-out;
-}
-
-#customize-footer-actions .devices button:focus {
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        outline: none;
-}
-
-#customize-footer-actions .devices button:before {
-        display: inline-block;
-        -webkit-font-smoothing: antialiased;
-        font: normal 20px/30px "dashicons";
-        vertical-align: top;
-        margin: 3px 0;
-        padding: 4px 8px;
-        color: #656a6f;
-}
-
-#customize-footer-actions .devices button.active {
-        border-bottom-color: #191e23;
-}
-
-#customize-footer-actions .devices button:hover,
-#customize-footer-actions .devices button:focus {
-        background-color: #fff;
-}
-
-#customize-footer-actions .devices button:focus {
-        background-color: #fff;
-        border-bottom-color: #0073aa;
-}
-
-#customize-footer-actions .devices button.active:before,
-#customize-footer-actions .devices button:hover:before,
-#customize-footer-actions .devices button:focus:before {
-        color: #191e23;
-}
-
-.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
-.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
-        color: #191e23;
-}
-
-#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 .devices {
-                display: none;
-        }
-}
-
-.collapsed #customize-footer-actions .devices button:before {
-        display: none;
-}
-
-.collapsed #customize-footer-actions .devices .preview-full {
-        left: 0;
-}
-
-.preview-mobile #customize-preview {
-        margin: auto 0 auto -160px;
-        width: 320px;
-        height: 480px;
-        max-height: 100%;
-        max-width: 100%;
-        left: 50%;
-}
-
-.preview-tablet #customize-preview {
-        margin: auto 0 auto -3in;
-        width: 6in;
-        height: 9in;
-        max-height: 100%;
-        max-width: 100%;
-        left: 50%;
-}
-
 .widget-reorder-nav span,
 .menu-item-reorder-nav button {
         position: relative;

src/wp-admin/css/themes.css

@@ -1480 +1480 @@
         transition-duration: 0.2s;
 }
 
+/* Device/preview size toggles */
+
+.wp-full-overlay {
+        background: #191e23;
+}
+
+.wp-full-overlay-main {
+        background-color: #f1f1f1;
+}
+
+.expanded .wp-full-overlay-footer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 300px;
+        height: 45px;
+        border-top: 1px solid #ddd;
+}
+
+.wp-full-overlay-footer .devices {
+        float: right;
+}
+
+.wp-full-overlay-footer .devices button {
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        height: 45px;
+        padding: 0 3px;
+        margin: 0 0 0 -4px;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        border-top: 1px solid transparent;
+        border-bottom: 4px solid transparent;
+        -webkit-transition: background .1s ease-in-out;
+        transition: background .1s ease-in-out;
+}
+
+.wp-full-overlay-footer .devices button:focus {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        outline: none;
+}
+
+.wp-full-overlay-footer .devices button:before {
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 20px/30px "dashicons";
+        vertical-align: top;
+        margin: 3px 0;
+        padding: 4px 8px;
+        color: #656a6f;
+}
+
+.wp-full-overlay-footer .devices button.active {
+        border-bottom-color: #191e23;
+}
+
+.wp-full-overlay-footer .devices button:hover,
+.wp-full-overlay-footer .devices button:focus {
+        background-color: #fff;
+}
+
+.wp-full-overlay-footer .devices button:focus {
+        background-color: #fff;
+        border-bottom-color: #0073aa;
+}
+
+.wp-full-overlay-footer .devices button.active:before,
+.wp-full-overlay-footer .devices button:hover:before,
+.wp-full-overlay-footer .devices button:focus:before {
+        color: #191e23;
+}
+
+.wp-full-overlay-footer .devices .preview-desktop:before {
+        content: "\f472";
+}
+
+.wp-full-overlay-footer .devices .preview-tablet:before {
+        content: "\f471";
+}
+
+.wp-full-overlay-footer .devices .preview-mobile:before {
+        content: "\f470";
+}
+
+@media screen and (max-width:1024px) {
+        .wp-full-overlay-footer .devices {
+                display: none;
+        }
+}
+
+.collapsed .wp-full-overlay-footer .devices button:before {
+        display: none;
+}
+
+.collapsed .wp-full-overlay-footer .devices .preview-full {
+        left: 0;
+}
+
+.preview-mobile .wp-full-overlay-main {
+        margin: auto 0 auto -160px;
+        width: 320px;
+        height: 480px;
+        max-height: 100%;
+        max-width: 100%;
+        left: 50%;
+}
+
+.preview-tablet .wp-full-overlay-main {
+        margin: auto 0 auto -3in;
+        width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
+        height: 9in;
+        max-height: 100%;
+        max-width: 100%;
+        left: 50%;
+}
+
+
 /*------------------------------------------------------------------------------
   24.0 - Customize Loader
 ------------------------------------------------------------------------------*/
@@ -1600 +1719 @@
 }
 
 .theme-install-overlay .wp-full-overlay-main {
-        position: relative;
+        position: absolute;
         z-index: 0;
         background-color: #f1f1f1;
 }

src/wp-admin/js/theme.js

@@ -756 +756 @@
         events: {
                 'click .close-full-overlay': 'close',
                 'click .collapse-sidebar': 'collapse',
+                'click .devices button': 'previewDevice',
                 'click .previous-theme': 'previousTheme',
                 'click .next-theme': 'nextTheme',
                 'keyup': 'keyEvent'
@@ -815 +816 @@
                 return false;
         },
 
+        previewDevice: function( event ) {
+                var $button = $( event.currentTarget );
+                var overlay = $( '.wp-full-overlay' ),
+                device = $button.data( 'device' );
+                $( '.wp-full-overlay-footer .devices button' ).removeClass( 'active' )
+                                                                .attr( 'aria-pressed', false );
+                overlay.removeClass( 'preview-full preview-desktop preview-tablet preview-mobile' )
+                   .toggleClass( 'preview-' + device );
+                $button.addClass( 'active' )
+                       .attr( 'aria-pressed', true );
+        },
+
         keyEvent: function( event ) {
                 // The escape key closes the preview
                 if ( event.keyCode === 27 ) {

src/wp-admin/theme-install.php

@@ -277 +277 @@
                         </div>
                 </div>
                 <div class="wp-full-overlay-footer">
+                        <div class="devices">
+                                <button type="button" class="preview-desktop active" aria-pressed="true" data-device="desktop"><span class="screen-reader-text"><?php _e( 'Enter desktop preview mode' ); ?></span></button>
+                                <button type="button" class="preview-tablet" aria-pressed="false" data-device="tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet preview mode' ); ?></span></button>
+                                <button type="button" class="preview-mobile" aria-pressed="false" data-device="mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile preview mode' ); ?></span></button>
+                        </div>
                         <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
                                 <span class="collapse-sidebar-arrow"></span>
                                 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>