Changeset 36858

Timestamp:

03/05/2016 10:06:57 PM (9 years ago)

Author:

ocean90

Message:

Themes: Bring the device preview from [31195] to the theme install previewer.

Props celloexpressions.
Fixes #36017.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (1 diff)
• css/themes.css (modified) (2 diffs)
• js/theme.js (modified) (3 diffs)
• theme-install.php (modified) (1 diff)

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

@@ -1309 +1309 @@
 }
 
-/* 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 {

trunk/src/wp-admin/css/themes.css

@@ -1481 +1481 @@
 }
 
+/* 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;
+}
+
+.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
@@ -1601 +1716 @@
 
 .theme-install-overlay .wp-full-overlay-main {
-    position: relative;
+    position: absolute;
     z-index: 0;
     background-color: #f1f1f1;

trunk/src/wp-admin/js/theme.js

@@ -757 +757 @@
         'click .close-full-overlay': 'close',
         'click .collapse-sidebar': 'collapse',
+        'click .devices button': 'previewDevice',
         'click .previous-theme': 'previousTheme',
         'click .next-theme': 'nextTheme',
@@ -766 +767 @@
 
     render: function() {
-        var self = this,
+        var self = this, currentPreviewDevice,
             data = this.model.toJSON();
 
         this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
+
+        currentPreviewDevice = this.$el.data( 'current-preview-device' );
+        if ( currentPreviewDevice ) {
+            self.tooglePreviewDeviceButtons( currentPreviewDevice );
+        }
 
         themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
@@ -814 +820 @@
         this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
         return false;
+    },
+
+    previewDevice: function( event ) {
+        var device = $( event.currentTarget ).data( 'device' );
+
+        this.$el
+            .removeClass( 'preview-desktop preview-tablet preview-mobile' )
+            .addClass( 'preview-' + device )
+            .data( 'current-preview-device', device );
+
+        this.tooglePreviewDeviceButtons( device );
+    },
+
+    tooglePreviewDeviceButtons: function( newDevice ) {
+        var $devices = $( '.wp-full-overlay-footer .devices' );
+
+        $devices.find( 'button' )
+            .removeClass( 'active' )
+            .attr( 'aria-pressed', false );
+
+        $devices.find( 'button.preview-' + newDevice )
+            .addClass( 'active' )
+            .attr( 'aria-pressed', true );
     },
 

trunk/src/wp-admin/theme-install.php

@@ -278 +278 @@
         </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>