Changeset 27896

Timestamp:

04/01/2014 10:19:51 PM (9 years ago)

Author:

nacin

Message:

Theme Installer fixes:

• Better more filters section. props sonjanyc for some mockups.
• Better handling of no results.
• Use # for hrefs.

props matveb.
see #27055.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (7 diffs)
• js/theme.js (modified) (11 diffs)
• theme-install.php (modified) (5 diffs)

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

@@ -1151 +1151 @@
     margin: 0 10px;
     padding: 15px 0;
-    -webkit-transition: border-color .1s ease-in;
-    transition: border-color .1s ease-in;
 }
 .theme-section.current,
@@ -1168 +1166 @@
     margin: 0 10px;
     padding: 4px 6px;
-    -webkit-transition: color .1s ease-in, background .1s ease-in;
-    transition: color .1s ease-in, background .1s ease-in;
 }
 body.more-filters-opened .more-filters,
@@ -1178 +1174 @@
     border: none;
     color: #fff;
-    -webkit-transition: color .1s ease-in, background .1s ease-in;
-    transition: color .1s ease-in, background .1s ease-in;
 }
 
@@ -1231 +1225 @@
     display: block;
 }
+body.more-filters-opened .theme-section.current {
+    border-bottom: none;
+}
+body.more-filters-opened .theme-browser,
+body.more-filters-opened.filters-applied.loading-themes .theme-browser {
+    display: none;
+}
+body.more-filters-opened.filters-applied .theme-browser {
+    display: block;
+}
 .more-filters-container .filters-group {
     -webkit-box-sizing: border-box;
@@ -1236 +1240 @@
     box-sizing: border-box;
     float: left;
-    width: 20%;
+    width: 19%;
+    background: #fff;
+    margin: 0 1% 0 0;
+    border: 1px solid #e5e5e5;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+    padding: 10px;
 }
 .more-filters-container .feature-name {
-    margin-top: 0;
+    margin: 0;
+    position: relative;
 }
 .more-filters-container ol {
     list-style-type: none;
+    margin: 20px 0 0;
+    display: block;
+    font-size: 12px;
+}
+.theme-navigation .more-filters-container .apply-filters {
+    margin: 20px 0 0;
+}
+.theme-navigation .more-filters-container .clear-filters {
+    display: none;
+    margin: 20px 0 0 10px;
+}
+.more-filters-container .apply-filters span {
+    display: inline-block;
+    font-size: 12px;
+    text-indent: 10px;
+    opacity: 0.8;
+}
+.more-filters-container .filtering-by {
+    display: none;
     margin: 0;
 }
+.more-filters-container .filtering-by > span {
+    font-weight: 600;
+}
+.more-filters-container .filtering-by .tags {
+    display: inline;
+}
+.more-filters-container .filtering-by .tag {
+    background: #fff;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+    font-size: 11px;
+    margin: 0 5px;
+    padding: 4px 8px;
+}
+body.filters-applied .more-filters-container .filters-group,
+body.filters-applied .more-filters-container a,
+body.filters-applied .more-filters-container br {
+    display: none !important;
+}
+body.filters-applied .more-filters-container .filtering-by {
+    display: block;
+}
+body.filters-applied .more-filters-container {
+    padding: 20px;
+}
+p.no-themes {
+    color: #999;
+    font-size: 18px;
+    font-style: normal;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    display: none;
+}
+body.no-results p.no-themes {
+    display: block;
+}
+body.show-upload-theme p.no-themes {
+    display: none !important;
+}
+
 
 .theme-install-php .add-new-theme {
@@ -1269 +1340 @@
     }
     .more-filters-container .filters-group {
-        width: 50%;
+        margin-bottom: 0;
+        margin-top: 5px;
+        width: 49%;
     }
     .more-filters-container .filters-group:nth-child(3n) {
         clear: left;
+    }
+}
+
+@media only screen and (max-width: 782px) {
+    .more-filters-container .filters-group {
+        width: 100%;
     }
 }
@@ -1718 +1797 @@
     color: #777;
     line-height: 20px;
+    max-width: 100%;
 }
 

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

@@ -256 +256 @@
                 self.trigger( 'query:success', count );
 
+                if ( data.themes.length === 0 ) {
+                    self.trigger( 'query:empty' );
+                }
+
                 // Store the results and the query request
                 queries.push( { themes: data.themes, request: request } );
@@ -276 +280 @@
                     self.trigger( 'query:fail' );
                 });
+            }
+
+            if ( query.themes.length === 0 ) {
+                self.trigger( 'query:empty' );
+            } else {
+                $( 'body' ).removeClass( 'no-results' );
             }
 
@@ -331 +341 @@
                 if ( ! paginated ) {
                     // Spin it
-                    $( 'body' ).addClass( 'loading-themes' );
+                    $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
                 }
             }
@@ -658 +668 @@
 
     collapse: function() {
+
         this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
         return false;
@@ -703 +714 @@
                 self.count.text( self.collection.length );
             }
+        });
+
+        this.listenTo( self.collection, 'query:empty', function() {
+            $( 'body' ).addClass( 'no-results' );
         });
 
@@ -1144 +1159 @@
         'click .theme-filter': 'onFilter',
         'click .more-filters': 'moreFilters',
-        'click [type="checkbox"]': 'addFilter'
+        'click .apply-filters': 'addFilter',
+        'click [type="checkbox"]': 'filtersChecked',
+        'click .clear-filters': 'clearFilters',
+        'click .feature-name': 'filterSection'
     },
 
@@ -1218 +1236 @@
         event.preventDefault();
 
+        $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
+
         // Bail if this is already active
         if ( $el.hasClass( this.activeClass ) ) {
@@ -1267 +1287 @@
 
     // Clicking on a checkbox triggers a tag request
-    addFilter: function() {
-        var tags = this.filtersChecked(),
-            request = { tag: tags };
+    addFilter: function( event ) {
+        var name,
+            tags = this.filtersChecked(),
+            request = { tag: tags },
+            filteringBy = $( '.filtering-by .tags' );
+
+        if ( event ) {
+            event.preventDefault();
+        }
+
+        $( 'body' ).addClass( 'filters-applied' );
+        filteringBy.empty();
+
+        _.each( tags, function( tag ) {
+            name = $( 'label[for="feature-id-' + tag + '"]' ).text();
+            filteringBy.append( '<span class="tag">' + name + '</span>' );
+        });
 
         // Get the themes by sending Ajax POST request to api.wordpress.org/themes
@@ -1276 +1310 @@
     },
 
-    // Get the checked filters and return an array
+    // Get the checked filters
+    // @return {array} of tags or false
     filtersChecked: function() {
         var items = $( '.feature-group' ).find( ':checkbox' ),
@@ -1284 +1319 @@
             tags.push( $( item ).prop( 'value' ) );
         });
+
+        // When no filters are checked, restore initial state and return
+        if ( tags.length === 0 ) {
+            $( '.apply-filters' ).find( 'span' ).text( '' );
+            $( '.clear-filters' ).hide();
+            $( 'body' ).removeClass( 'filters-applied' );
+            return false;
+        }
+
+        $( '.apply-filters' ).find( 'span' ).text( tags.length );
+        $( '.clear-filters' ).css( 'display', 'inline-block' );
 
         return tags;
@@ -1305 +1351 @@
     },
 
-    moreFilters: function() {
+    // Toggle the full filters navigation
+    moreFilters: function( event ) {
+        event.preventDefault();
+
+        if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+            return $( 'body' ).removeClass( 'filters-applied' );
+        }
+
+        // If the filters section is opened and filters are checked
+        // run the relevant query collapsing to filtered-by state
+        if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
+            return this.addFilter();
+        }
+
         $( 'body' ).toggleClass( 'more-filters-opened' );
+    },
+
+    // Expand/collapse each individual filter section
+    filterSection: function() {
+        $( event.target ).parent().toggleClass( 'open' );
+    },
+
+    // Clears all the checked filters
+    // @uses filtersChecked()
+    clearFilters: function( event ) {
+        var items = $( '.feature-group' ).find( ':checkbox' ),
+            self = this;
+
+        event.preventDefault();
+
+        _.each( items.filter( ':checked' ), function( item ) {
+            $( item ).prop( 'checked', false );
+            return self.filtersChecked();
+        });
     }
 });

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

@@ -119 +119 @@
         <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
         <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" data-filter="photoblogging">Photography</span>
+            <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
             <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
         </div>
@@ -141 +141 @@
         ?>
             <br class="clear" />
+            <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
+            <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
+            <div class="filtering-by">
+                <span><?php _e( 'Filtering by:' ); ?></span>
+                <div class="tags"></div>
+            </div>
         </div>
     </div>
@@ -147 +153 @@
     <div id="theme-installer" class="wp-full-overlay expanded"></div>
 
+    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     <span class="spinner"></span>
 
@@ -189 +196 @@
     <div class="wp-full-overlay-sidebar">
         <div class="wp-full-overlay-header">
-            <a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+            <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
             <a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
         </div>
@@ -214 +221 @@
         </div>
         <div class="wp-full-overlay-footer">
-            <a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+            <a href="#" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
                 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
                 <span class="collapse-sidebar-arrow"></span>