Changeset 27636

Timestamp:

03/20/2014 04:19:55 AM (11 years ago)

Author:

nacin

Message:

Theme installer:

• Restore the feature filter.
• Improve responsiveness.
• Router updates, fixes.
• Make "Upload Theme" button more consistent with the admin.
• Avoid theme-count causing filters to jump.

props matveb.
see #27055.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (9 diffs)
• js/theme.js (modified) (6 diffs)
• theme-install.php (modified) (2 diffs)

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

@@ -170 +170 @@
     opacity: 0;
     position: absolute;
-        top: 35%;
-        right: 25%;
-        left: 25%;
+    top: 35%;
+    right: 25%;
+    left: 25%;
     background: #222;
     background: rgba(0,0,0,0.7);
@@ -1066 +1066 @@
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h2 .upload {
-    margin-left: 10px;
-}
 .theme-navigation {
     background: #fff;
@@ -1082 +1079 @@
     width: 100%;
 }
+.theme-install-php a.upload,
+.theme-install-php a.browse-themes {
+    cursor: pointer;
+}
+.theme-install-php a.browse-themes,
+.theme-install-php.show-upload-theme a.upload {
+    display: none;
+}
+.theme-install-php.show-upload-theme a.browse-themes {
+    display: inline;
+}
 .upload-theme {
     -moz-box-sizing: border-box;
@@ -1091 +1099 @@
     overflow: hidden;
     position: relative;
-        top: 10px;
-}
-.upload-theme.opened {
+    top: 10px;
+}
+body.show-upload-theme .upload-theme {
     display: block;
 }
@@ -1111 +1119 @@
     text-align: center;
 }
-.upload-theme.opened + .theme-navigation,
-.upload-theme.opened + .theme-navigation + .theme-browser {
+body.show-upload-theme .upload-theme + .theme-navigation,
+body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
     display: none;
 }
 .theme-navigation .theme-count {
-    top: 3px;
     margin-left: 0;
+    position: absolute;
+    top: 12px;
+}
+.theme-count + .theme-section {
+    margin-left: 60px;
 }
 .theme-section,
@@ -1143 +1155 @@
     display: inline-block;
     margin: 0 10px;
-    padding: 4px 5px;
+    padding: 4px 6px;
     -moz-transition: color .1s ease-in, background .1s ease-in;
     -webkit-transition: color .1s ease-in, background .1s ease-in;
@@ -1149 +1161 @@
 }
 body.more-filters-opened .more-filters,
-.theme-navigation .more-filters.current {
+body.more-filters-opened .more-filters:before {
     background: rgb(46, 162, 204);
     border-radius: 2px;
@@ -1157 +1169 @@
 .theme-install-php .theme-search {
     position: absolute;
-        right: 10px;
-        top: 9px;
+    right: 10px;
+    top: 9px;
     font-size: 16px;
     font-weight: 300;
@@ -1198 +1210 @@
     display: block;
 }
+.more-filters-container .filters-group {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    float: left;
+    width: 20%;
+}
+.more-filters-container .feature-name {
+    margin-top: 0;
+}
+.more-filters-container ol {
+    list-style-type: none;
+    margin: 0;
+}
+
 .theme-install-php .add-new-theme {
     display: none !important;
+}
+
+@media only screen and (max-width: 1120px) {
+    .theme-install-php .theme-search {
+        margin: 20px 0;
+        position: static;
+        width: 100%;
+    }
+    .more-filters-container {
+        border-bottom: 1px solid #eee;
+    }
+    .upload-theme .wp-upload-form {
+        margin: 20px 0;
+        max-width: 100%;
+    }
+    .upload-theme .install-help {
+        font-size: 15px;
+        padding: 20px 0 0;
+        text-align: left;
+    }
+    .more-filters-container .filters-group {
+        width: 50%;
+    }
+    .more-filters-container .filters-group:nth-child(3n) {
+        clear: left;
+    }
 }
 

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

@@ -993 +993 @@
         'click .theme-section': 'onSort',
         'click .theme-filter': 'onFilter',
-        'click .more-filters': 'moreFilters'
+        'click .more-filters': 'moreFilters',
+        'click [type="checkbox"]': 'addFilter'
     },
 
@@ -1127 +1128 @@
 
         // @todo Cache the collection after fetching based on the filter
+        filter = _.union( filter, this.filtersChecked() );
         request = { tag: [ filter ] };
 
@@ -1147 +1149 @@
     },
 
+    // Clicking on a checkbox triggers a tag request
+    addFilter: function() {
+        var self = this,
+            tags = this.filtersChecked(),
+            request = { tag: tags };
+
+        // Send Ajax POST request to api.wordpress.org/themes
+        this.apiCall( request ).done( function( data ) {
+                // Update the collection with the queried data
+                self.collection.reset( data.themes );
+                // Trigger a collection refresh event to render the views
+                self.collection.trigger( 'update' );
+
+                // Un-spin it
+                $( 'body' ).removeClass( 'loading-themes' );
+                $( '.theme-browser' ).find( 'div.error' ).remove();
+        }).fail( function() {
+                $( '.theme-browser' ).find( 'div.error' ).remove();
+                $( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
+        });
+    },
+
+    // Get the checked filters and return an array
+    filtersChecked: function() {
+        var items = $( '.feature-group' ).find( ':checkbox' ),
+            tags = [];
+
+        _.each( items.filter( ':checked' ), function( item ) {
+            tags.push( $( item ).prop( 'value' ) );
+        });
+
+        return tags;
+    },
+
     activeClass: 'current',
 
@@ -1154 +1190 @@
 
     uploader: function() {
-        $( 'a.upload.button' ).on( 'click', function() {
-            $( '.upload-theme' )
-                .toggleClass( 'opened' )
-                .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
+        $( 'a.upload' ).on( 'click', function() {
+            $( 'body' ).addClass( 'show-upload-theme' );
+            themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
+        });
+        $( 'a.browse-themes' ).on( 'click', function() {
+            $( 'body' ).removeClass( 'show-upload-theme' );
+            themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
         });
     },
@@ -1169 +1208 @@
     routes: {
         'theme-install.php?theme=:slug': 'preview',
-        'theme-install.php(?sort=:sort)': 'sort',
+        'theme-install.php?sort=:sort': 'sort',
+        'theme-install.php?upload': 'upload',
         '': 'sort'
     },
@@ -1224 +1264 @@
             self.view.sort( sort );
             self.view.trigger( 'theme:close' );
+        });
+
+        themes.router.on( 'route:upload', function( slug ) {
+            $( 'a.upload' ).trigger( 'click' );
         });
 

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

@@ -105 +105 @@
     <h2>
         <?php echo esc_html( $title ); ?>
-        <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+        <a class="upload add-new-h2"><?php esc_html_e( 'Upload Theme' ); ?></a>
+        <a class="browse-themes add-new-h2"><?php esc_html_e( 'Browse' ); ?></a>
     </h2>
 
@@ -118 +119 @@
         <span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
         <div class="theme-top-filters">
-            <span class="theme-filter" data-filter="photoblogging">Photography</span>
-            <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
-            <span class="theme-filter more-filters">More</span>
+            <!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
+            <span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
+            <span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
         </div>
         <div class="more-filters-container">
-            Display more filters.
+        <?php
+        $feature_list = get_theme_feature_list();
+        foreach ( $feature_list as $feature_name => $features ) {
+            echo '<div class="filters-group">';
+            $feature_name = esc_html( $feature_name );
+            echo '<h4 class="feature-name">' . $feature_name . '</h4>';
+            echo '<ol class="feature-group">';
+            foreach ( $features as $feature => $feature_name ) {
+                $feature = esc_attr( $feature );
+                echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
+                echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
+            }
+            echo '</ol>';
+            echo '</div>';
+        }
+        ?>
+            <br class="clear" />
         </div>
     </div>