Changeset 31954

Timestamp:

04/01/2015 12:35:26 PM (11 years ago)

Author:

ocean90

Message:

Customizer Theme Switcher: Switch the details/live preview buttons.

props celloexpressions, ocean90.
fixes #31791.

Location:

trunk/src

Files:

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

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

@@ -907 +907 @@
 }
 
-.wp-customizer .theme-browser .theme.active .theme-name {
-        padding-right: 15px;
-}
-
 .wp-customizer #themes-filter {
         font-size: 16px;
@@ -916 +912 @@
         line-height: 1.5;
         width: 100%;
+}
+
+
+.wp-customizer .theme-browser .theme.active:hover,
+.wp-customizer .theme-browser .theme.active:focus {
+        cursor: default;
+}
+
+.wp-customizer .theme-browser .theme.active .more-details {
+        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;
 }
 

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

@@ -548 +548 @@
                         </div>
 
-                        <div class="theme-actions">
-                                <# if ( ! data.active ) { #>
+                        <# if ( ! data.active ) { #>
+                                <div class="theme-actions">
                                         <div class="inactive-theme">
                                                 <a href="<?php echo add_query_arg( 'theme', '{{ data.id }}' ); ?>" target="_top" class="button button-primary"><?php _e( 'Live Preview' ); ?></a>
                                         </div>
-                                <# } #>
-                        </div>
+                                </div>
+                        <# } #>
                 </div>
         </script>

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

@@ -647 +647 @@
 
                                 section.closeDetails();
-                        });
-
-                        section.container.on( 'click keydown', '.theme-actions .button', function( event ) {
-                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
-
-                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
                         });
 
@@ -1908 +1900 @@
                                 }
 
-                                api.section( control.section() ).showDetails( control.params.theme );
-                        });
-
-                        control.container.on( 'click keydown', '.theme-actions .button', function( event ) {
+                                if ( $( this ).hasClass( 'active' ) ) {
+                                        return;
+                                }
+
+                                var previewUrl = $( this ).data( 'previewUrl' );
+
+                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+
+                                window.parent.location = previewUrl;
+                        });
+
+                        control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
                                 }
 
-                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+                                event.preventDefault(); // Keep this AFTER the key filter above
+
+                                api.section( control.section() ).showDetails( control.params.theme );
                         });
                 },

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

@@ -1201 +1201 @@
          */
         public function content_template() {
-        ?>
-                <div class="theme<# if ( data.theme.active ) { #> active<# } #>" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
+                $preview_url = site_url( add_query_arg( 'theme', '{{ data.theme.id }}' ) );
+                ?>
+                <div class="theme<# if ( data.theme.active ) { #> active<# } #>"<# if ( ! data.theme.active ) { #> tabindex="0"<# } #> data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
                         <# if ( data.theme.screenshot[0] ) { #>
                                 <div class="theme-screenshot">
@@ -1210 +1211 @@
                                 <div class="theme-screenshot blank"></div>
                         <# } #>
-                        <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
+                        <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
                         <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
 
@@ -1226 +1227 @@
                         <# if ( ! data.theme.active ) { #>
                                 <div class="theme-actions">
-                                        <a class="button" href="<?php echo add_query_arg( 'theme', '{{ data.theme.id }}' ); ?>" target="_top"><?php _e( 'Live Preview' ); ?></a>
+                                        <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
                                 </div>
                         <# } #>