Changeset 28025

Timestamp:

04/07/2014 11:03:05 PM (10 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">