Changeset 28025

Timestamp:

04/07/2014 11:03:05 PM (13 years ago)

Author:

nacin

Message:

Theme Installer: Handle currently installed themes, add search route, let prev/next refresh collections.

props matveb.
see #27055. fixes #27695.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (3 diffs)
• js/theme.js (modified) (16 diffs)
• theme-install.php (modified) (4 diffs)

trunk/src/wp-admin/css/themes.css

@@ -217 +217 @@
  * when an update is available.
  */
-.theme-browser .theme .theme-update {
+.theme-browser .theme .theme-update,
+.theme-browser .theme .theme-installed {
         background: #d54e21;
         background: rgba(213, 78, 33, 0.95);
@@ -235 +236 @@
 }
 
-.theme-browser .theme .theme-update:before {
+.theme-browser .theme .theme-update:before,
+.theme-browser .theme .theme-installed:before {
         content: '\f463';
         display: inline-block;
@@ -1074 +1076 @@
   16.2 - Install Themes
 ------------------------------------------------------------------------------*/
+
+/* Already installed theme */
+.theme-browser .theme.is-installed {
+        cursor: default;
+}
+.theme-browser .theme .theme-installed {
+        background: #0074a2;
+}
+.theme-browser .theme .theme-installed:before {
+        content: '\f147';
+}
+.theme-browser .theme.is-installed .theme-actions,
+.theme-browser.rendered .theme.is-installed .more-details {
+        display: none !important;
+}
+.theme-browser.rendered .theme.is-installed:hover .theme-screenshot img,
+.theme-browser.rendered .theme.is-installed:focus .theme-screenshot img {
+        opacity: 1 !important;
+}
 
 .theme-navigation {

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

@@ -23 +23 @@
         // Map `id` to `slug` for shared code
         initialize: function() {
-                var install, preview;
+                var install, installed;
 
                 // Install url for the theme
@@ -36 +36 @@
                 install = themes.data.settings.updateURI + '?' + $.param( install );
 
-                // Preview url for the theme
-                preview = {
-                        tab: 'theme-information',
-                        theme: this.get( 'slug' )
-                };
-
-                preview = themes.data.settings.installURI + '?' + $.param( preview );
+                // If theme is already installed, set an attribute.
+                if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) {
+                        this.set({ installed: true });
+                }
 
                 // Set the attributes
                 this.set({
-                        installURI: install,
-                        previewURI: preview,
+                        installURI: ( this.get( 'slug' ) ) ? install : false,
                         // slug is for installation, id is for existing.
                         id: this.get( 'slug' ) || this.get( 'id' )
@@ -392 +388 @@
                         this.$el.addClass( 'display-author' );
                 }
+
+                if ( this.model.get( 'installed' ) ) {
+                        this.$el.addClass( 'is-installed' );
+                        this.$el.unbind();
+                }
         },
 
@@ -452 +453 @@
                 }
 
+                // Allow direct link path to installing a theme.
+                if ( $( event.target ).hasClass( 'button-primary' ) ) {
+                        return;
+                }
+
                 // 'enter' and 'space' keys expand the details view when a theme is :focused
                 if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
@@ -495 +501 @@
                         // If we have no more themes, bail.
                         if ( _.isUndefined( self.current ) ) {
+                                self.options.parent.parent.trigger( 'theme:end' );
                                 return self.current = current;
                         }
@@ -506 +513 @@
                         preview.render();
                         $( 'div.wrap' ).append( preview.el );
+                        $( '.next-theme' ).focus();
                 })
                 .listenTo( preview, 'theme:previous', function() {
@@ -533 +541 @@
                         preview.render();
                         $( 'div.wrap' ).append( preview.el );
+                        $( '.previous-theme' ).focus();
                 });
         }
@@ -883 +892 @@
                 self.instance.each( function( theme ) {
                         self.theme = new themes.view.Theme({
-                                model: theme
+                                model: theme,
+                                parent: self
                         });
 
@@ -1159 +1169 @@
                 // Handles search route event
                 themes.router.on( 'route:search', function( query ) {
-                        self.view.trigger( 'theme:close' );
-                        self.themes.doSearch( query );
+                        $( '.theme-search' ).trigger( 'keyup' );
                 });
 
@@ -1225 +1234 @@
                 // or searching the local cache
                 this.collection.query( request );
+
+                // Set route
+                themes.router.navigate( themes.router.baseUrl( '?search=' + value ), { replace: true } );
         }, 300 )
 });
@@ -1330 +1342 @@
 
         sort: function( sort ) {
-                $( '#theme-search-input' ).val( '' );
+                this.clearSearch();
 
                 $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
@@ -1451 +1463 @@
                 }
 
+                this.clearSearch();
+
+                themes.router.navigate( themes.router.baseUrl( '' ) );
                 $( 'body' ).toggleClass( 'more-filters-opened' );
         },
@@ -1475 +1490 @@
         backToFilters: function() {
                 $( 'body' ).removeClass( 'filters-applied' );
+        },
+
+        clearSearch: function() {
+                $( '#theme-search-input').val( '' );
         }
 });
@@ -1483 +1502 @@
                 'theme-install.php?sort=:sort': 'sort',
                 'theme-install.php?upload': 'upload',
+                'theme-install.php?search=:query': 'search',
                 '': 'sort'
         },
@@ -1488 +1508 @@
         baseUrl: function( url ) {
                 return 'theme-install.php' + url;
-        }
+        },
+
+        search: function( query ) {
+                $( '.theme-search' ).val( query );
+        },
 });
 
@@ -1541 +1565 @@
                 themes.router.on( 'route:upload', function() {
                         $( 'a.upload' ).trigger( 'click' );
+                });
+
+                // Handles search route event
+                themes.router.on( 'route:search', function( query ) {
+                        $( '.theme-search' ).focus().trigger( 'keyup' );
                 });
 

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

@@ -33 +33 @@
         'new'      => __( 'Newest Themes' ),
 );
+
+$installed_themes = search_theme_directories();
+foreach ( $installed_themes as $k => $v ) {
+        if ( false !== strpos( $k, '/' ) ) {
+                unset( $installed_themes[ $k ] );
+        }
+}
 
 wp_localize_script( 'theme', '_wpThemeSettings', array(
@@ -52 +59 @@
                 'error'  => ( 'There was a problem trying to load the themes. Please, try again.' ), // @todo improve
         ),
+        'installedThemes' => array_keys( $installed_themes ),
         'browse' => array(
                 'sections' => $sections,
@@ -191 +199 @@
                 <a class="button button-secondary preview install-theme-preview" href="#"><?php esc_html_e( 'Preview' ); ?></a>
         </div>
+
+        <# if ( data.installed ) { #>
+                <div class="theme-installed"><?php _e( 'Already Installed' ); ?></div>
+        <# } #>
 </script>
 
@@ -197 +209 @@
                 <div class="wp-full-overlay-header">
                         <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+                <# if ( data.installed ) { #>
+                        <a href="#" class="button button-primary theme-install disabled"><?php _e( 'Installed' ); ?></a>
+                <# } else { #>
                         <a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
+                <# } #>
                 </div>
                 <div class="wp-full-overlay-sidebar-content">