Changeset 29610

Timestamp:

08/25/2014 11:04:43 PM (10 years ago)

Author:

helen

Message:

Customizer panels: use a single back button for all panels.

This also ensures the back button is visible on iOS devices.

props celloexpressions.
fixes #29135.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (2 diffs)
• wp-admin/customize.php (modified) (1 diff)
• wp-admin/js/accordion.js (modified) (3 diffs)
• wp-includes/class-wp-customize-panel.php (modified) (1 diff)

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

@@ -253 +253 @@
     content: "\f341";
     position: relative;
-    top: 13px;
+    top: 7px;
     left: 13px;
 }
@@ -261 +261 @@
 }
 
-.current-panel .control-panel-back {
+.in-sub-panel .control-panel-back {
     left: 0;
 }

trunk/src/wp-admin/customize.php

@@ -122 +122 @@
                 <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>
 

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

@@ -48 +48 @@
 
         // Go back to the top-level Customizer accordion.
-        $( '.accordion-container' ).on( 'click keydown', '.control-panel-back', function( e ) {
+        $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( e ) {
             if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
                 return;
@@ -55 +55 @@
             e.preventDefault(); // Keep this AFTER the key filter above
 
-            panelSwitch( $( this ) );
+            panelSwitch( $( '.current-panel' ) );
         });
     });
@@ -109 +109 @@
             siblings = container.find( '.open' ),
             topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
-            backBtn = section.find( '.control-panel-back' ),
+            backBtn = overlay.find( '.control-panel-back' ),
             panelTitle = section.find( '.accordion-section-title' ).first(),
             content = section.find( '.control-panel-content' );

trunk/src/wp-includes/class-wp-customize-panel.php

@@ -175 +175 @@
                 <span class="screen-reader-text"><?php _e( 'Press return or enter to open this panel' ); ?></span>
             </h3>
-            <span class="control-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
             <ul class="accordion-sub-container control-panel-content">
                 <li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">