Changeset 31975

Timestamp:

04/01/2015 10:50:10 PM (9 years ago)

Author:

ocean90

Message:

Customizer Theme Switcher: Navigation streamlining.

• Detach Themes section from other controls
• Move to buttons to navigate back and forth
• Change titles based on current theme status, active/previewing
• Hide the active/previewing theme from the list of available themes

props folletto for the design concepts.
props designsimply, celloexpressions for initial patches.
props Team Gandalf.
see #31289.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (5 diffs)
• wp-admin/js/customize-controls.js (modified) (6 diffs)
• wp-includes/class-wp-customize-manager.php (modified) (2 diffs)
• wp-includes/class-wp-customize-section.php (modified) (1 diff)

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

@@ -883 +883 @@
 }
 
+.control-section-themes .accordion-section-title {
+    cursor: default;
+}
+
+#customize-theme-controls .control-section-themes .accordion-section-title:hover,
+#customize-theme-controls .control-section-themes .accordion-section-title:focus {
+    color: #555555;
+    background-color: #fff;
+}
+
+.control-section-themes .accordion-section-title {
+    margin: 15px 0;
+}
+
+.customize-themes-panel .accordion-section-title {
+    margin: 15px -8px;
+}
+
+.control-section-themes .accordion-section-title {
+    padding-right: 100px; /* Space for the button */
+}
+
+.control-section-themes .accordion-section-title span {
+    font-size: small;
+    display: block;
+    font-weight: 400;
+}
+
+.control-section-themes .accordion-section-title .change-theme,
+.control-section-themes .accordion-section-title .customize-theme {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -14px;
+    font-weight: normal;
+}
+
 .customize-themes-panel {
     display: none;
@@ -890 +927 @@
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+
+.customize-themes-panel > h2 {
+    padding: 15px 8px 0 8px;
 }
 
@@ -934 +977 @@
 }
 
-
-.wp-customizer .theme-browser .theme.active:hover,
-.wp-customizer .theme-browser .theme.active:focus {
-    cursor: default;
-}
-
-.wp-customizer .theme-browser .theme.active .more-details {
+#accordion-section-themes .accordion-section-title:after {
     display: none;
-}
-
-.wp-customizer .theme-browser .theme.active .theme-name {
-    padding-right: 15px;
-}
-
-.wp-customizer .theme-browser.rendered .theme.active:hover .theme-screenshot img,
-.wp-customizer .theme-browser.rendered .theme.active:focus .theme-screenshot img {
-    opacity: 1;
-}
-
-/* Panel-like behavior */
-#accordion-section-themes .accordion-section-title:after {
-    content: "\f148";
-}
-
-.rtl #accordion-section-themes .accordion-section-title:after {
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
 }
 
@@ -979 +996 @@
 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
     left: 100%;
-}
-
-.in-themes-panel .control-panel-back:before {
-    content: "\f345";
-    left: 14px;
-}
-
-.in-themes-panel .control-panel-back {
-    left: 0;
-}
-
-.in-themes-panel .control-panel-back:before {
 }
 
@@ -1040 +1045 @@
 }
 
-
-/** Handle cheaters. */
+/* Handle cheaters. */
 body.cheatin {
     font-size: medium;

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

@@ -592 +592 @@
 
             // Expand/Collapse section/panel.
-            section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
+            section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                     return;
@@ -602 +602 @@
                 } else {
                     section.expand();
-                }
-            });
-
-
-            $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-
-                event.preventDefault(); // Keep this AFTER the key filter above
-
-                if ( section.expanded() ) {
-                    section.collapse();
                 }
             });
@@ -693 +680 @@
                 siblings = container.find( '.open' ),
                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
-                backBtn = overlay.find( '.control-panel-back' ),
-                panelTitle = section.find( '.accordion-section-title' ).first(),
+                customizeBtn = section.find( '.customize-theme' ),
+                changeBtn = section.find( '.change-theme' ),
                 content = section.find( '.control-panel-content' );
 
@@ -723 +710 @@
                 } );
                 topPanel.attr( 'tabindex', '-1' );
-                backBtn.attr( 'tabindex', '0' );
-                backBtn.focus();
+                customizeBtn.focus();
             } else {
                 siblings.removeClass( 'open' );
@@ -736 +722 @@
                 } );
                 topPanel.attr( 'tabindex', '0' );
-                backBtn.attr( 'tabindex', '-1' );
-                panelTitle.focus();
+                changeBtn.focus();
                 container.scrollTop( 0 );
             }
@@ -1900 +1885 @@
                 }
 
-                if ( $( this ).hasClass( 'active' ) ) {
-                    return;
-                }
-
                 var previewUrl = $( this ).data( 'previewUrl' );
 

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

@@ -1149 +1149 @@
 
         $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
-            'title' => sprintf( __( 'Theme: %s' ), $this->theme()->display('Name') ),
+            'title'      => $this->theme()->display( 'Name' ),
             'capability' => 'switch_themes',
-            'priority' => 0,
+            'priority'   => 0,
         ) ) );
 
@@ -1164 +1164 @@
         $themes = wp_prepare_themes_for_js();
         foreach ( $themes as $theme ) {
+            if ( $theme['active'] ) {
+                continue;
+            }
+
             $theme_id = 'theme_' . $theme['id'];
             $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
-                'theme' => $theme,
-                'section' => 'themes',
+                'theme'    => $theme,
+                'section'  => 'themes',
                 'settings' => 'active_theme',
             ) ) );

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

@@ -342 +342 @@
         ?>
         <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
-            <h3 class="accordion-section-title" tabindex="0">
-                <?php echo esc_html( $this->title ); ?>
-                <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
+            <h3 class="accordion-section-title">
+                <?php
+                if ( $this->manager->is_theme_active() ) {
+                    /* translators: %s: theme name */
+                    printf( __( '<span>Active theme</span> %s' ), $this->title );
+                } else {
+                    /* translators: %s: theme name */
+                    printf( __( '<span>Previewing theme</span> %s' ), $this->title );
+                }
+                ?>
+
+                <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
             </h3>
             <div class="customize-themes-panel control-panel-content themes-php">
-                <h2><?php esc_html_e( 'Themes' ); ?>
-                    <span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
+                <h2>
+                    <?php _e( 'Themes' ); ?>
+                    <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
                 </h2>
+
+                <h3 class="accordion-section-title customize-section-title">
+                    <?php
+                    if ( $this->manager->is_theme_active() ) {
+                        /* translators: %s: theme name */
+                        printf( __( '<span>Active theme</span> %s' ), $this->title );
+                    } else {
+                        /* translators: %s: theme name */
+                        printf( __( '<span>Previewing theme</span> %s' ), $this->title );
+                    }
+                    ?>
+                    <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
+                </h3>
+
                 <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
+
                 <div id="customize-container"></div>
-                <?php if ( 6 < count( $this->controls ) ) : ?>
+                <?php if ( count( $this->controls ) > 4 ) : ?>
                     <p><label for="themes-filter">
                         <span class="screen-reader-text"><?php _e( 'Search installed themes...' ); ?></span>