Changeset 31974

Timestamp:

04/01/2015 10:24:21 PM (10 years ago)

Author:

ocean90

Message:

Customizer: Make the available widgets overlay closable on narrow screens.

see #28784.

Location:

trunk/src/wp-admin

Files:

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

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

@@ -40 +40 @@
 #customize-header-actions {
     border-bottom: 1px solid #ddd;
+}
+
+#customize-header-actions .secondary-actions {
+    display: none;
 }
 
@@ -194 +198 @@
 }
 
+.customize-close-overlay,
 .customize-controls-close {
     display: block;
@@ -203 +208 @@
     padding-right: 2px;
     background: #eee;
+    border: none;
     border-right: 1px solid #ddd;
     color: #444;
@@ -208 +214 @@
     -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     transition: color .1s ease-in-out, background .1s ease-in-out;
+}
+
+.customize-close-overlay {
+    left: auto;
+    right: 0;
 }
 
@@ -230 +241 @@
 }
 
+.customize-close-overlay:focus,
+.customize-close-overlay:hover,
 .customize-controls-close:focus,
 .customize-controls-close:hover,
@@ -250 +263 @@
     top: 7px;
     left: 13px;
+}
+
+.customize-close-overlay:before {
+    font: normal 22px/1 dashicons;
+    content: "\f335";
+    position: relative;
+    top: 3px;
 }
 
@@ -1128 +1148 @@
     }
 
+    .adding-widget #customize-header-actions .primary-actions {
+        display: none;
+    }
+
+    .adding-widget #customize-header-actions .secondary-actions {
+        display: block;
+    }
+
     #customize-header-actions .button-primary {
         margin-top: 6px;

trunk/src/wp-admin/customize.php

@@ -120 +120 @@
     <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
         <div id="customize-header-actions" class="wp-full-overlay-header">
-            <?php
-                $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
-                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>
-            <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
+            <div class="primary-actions">
+                <?php
+                    $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
+                    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>
+                <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
+            </div>
+            <div class="secondary-actions">
+                <button type="button" class="dashicons dashicons-no customize-close-overlay">
+                    <span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
+                </button>
+            </div>
         </div>
 

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

@@ -178 +178 @@
             // interacted with (i.e. available widgets panel is blurred) then close the
             // available widgets panel.
-            $( '#customize-controls' ).on( 'click keydown', function( e ) {
+            $( '#customize-controls, .customize-close-overlay' ).on( 'click keydown', function( e ) {
                 var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );
                 if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {