Changeset 41860

Timestamp:

10/13/2017 09:20:42 PM (7 years ago)

Author:

westonruter

Message:

Customize: Fix positioning of device-previewed window when publish settings are open.

• Update date control padding.
• Collapse publish settings section when opening panes for available widgets or nav menus.
• Remove save and cog buttons in mobile preview only mode.
• Move definition of wp.customize.previewedDevice to wp.customize.state('previewedDevice') for centralization, maintaining old alias.
• Remove unused CSS because the section is inside form now.

Props sayedwp, westonruter.
See #39896.
Fixes #42027, #42199.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (7 diffs)
• js/customize-controls.js (modified) (2 diffs)
• js/customize-nav-menus.js (modified) (1 diff)
• js/customize-widgets.js (modified) (1 diff)

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

@@ -128 +128 @@
 }
 
-.outer-section-open .wp-full-overlay.expanded #customize-preview {
+.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
     left: 300px;
     opacity: 0.4;
+}
+
+.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
+.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
+.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
+.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
+    left: 64%;
 }
 
@@ -380 +389 @@
     width: 100%;
     margin-left: -12px;
-    padding: 12px 12px 10px;
+    padding: 12px;
     background: #ffffff;
     border-bottom: 1px solid #ddd;
@@ -507 +516 @@
 }
 
-#customize-controls .customize-info .customize-section-description,
-#customize-outer-theme-controls .customize-section-description {
+#customize-controls .customize-info .customize-section-description {
     margin-bottom: 15px;
 }
@@ -563 +571 @@
 #customize-controls .control-section .accordion-section-title:hover,
 #customize-controls .control-section.open .accordion-section-title,
-#customize-outer-theme-controls .control-section .accordion-section-title:hover,
-#customize-outer-theme-controls .control-section.open .accordion-section-title,
-#customize-outer-theme-controls .control-section .accordion-section-title:focus,
 #customize-controls .control-section .accordion-section-title:focus {
     color: #0073aa;
@@ -1725 +1730 @@
 #customize-controls .customize-section-title span.customize-action,
 #customize-controls .control-section-themes .accordion-section-title span.customize-action,
-#customize-controls .customize-section-title span.customize-action,
-#customize-outer-theme-controls .customize-section-title span.customize-action {
+#customize-controls .customize-section-title span.customize-action {
     font-size: 13px;
     display: block;
@@ -2792 +2796 @@
 }
 
+@media screen and ( max-width: 1200px ) {
+    .outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+    .adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+    .adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
+        left: 67%;
+    }
+}
+
 @media screen and ( max-width: 640px ) {
     #customize-controls {
@@ -2838 +2850 @@
     }
 
+    .preview-only #customize-save-button-wrapper {
+        margin-top: -46px;
+    }
+
     .customize-controls-preview-toggle .preview:before,
     .customize-controls-preview-toggle .controls:before {

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

@@ -6789 +6789 @@
         'previewerAlive',
         'editShortcutVisibility',
-        'changesetLocked'
+        'changesetLocked',
+        'previewedDevice'
     ], function( name ) {
         api.state.create( name );
@@ -8318 +8319 @@
         }());
 
-        // Previewed device bindings.
-        api.previewedDevice = new api.Value();
+        // Previewed device bindings. (The api.previewedDevice property is how this Value was first introduced, but since it has moved to api.state.)
+        api.previewedDevice = api.state( 'previewedDevice' );
 
         // Set the default device.

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -682 +682 @@
 
             this.itemSectionHeight();
+
+            if ( api.section.has( 'publish_settings' ) ) {
+                api.section( 'publish_settings' ).collapse();
+            }
 
             $( 'body' ).addClass( 'adding-menu-items' );

trunk/src/wp-admin/js/customize-widgets.js

@@ -331 +331 @@
             } );
 
+            if ( api.section.has( 'publish_settings' ) ) {
+                api.section( 'publish_settings' ).collapse();
+            }
+
             $( 'body' ).addClass( 'adding-widget' );