Ticket #27055: 27055.22.diff

wp-admin/css/themes.css

@@ -1230 +1230 @@
 body.more-filters-opened .more-filters-container {
         display: block;
 }
+body.more-filters-opened .theme-section.current {
+        border-bottom: none;
+}
 .more-filters-container .filters-group {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         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;
+        cursor: pointer;
+        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;
+        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+        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;
+}
 
+
 .theme-install-php .add-new-theme {
         display: none !important;
 }
@@ -1268 +1324 @@
                 text-align: left;
         }
         .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%;
+        }
+}
+
 .rating {
         margin: 30px 0;
 }

wp-admin/js/theme.js

@@ -1143 +1143 @@
                 'click .theme-section': 'onSort',
                 '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'
         },
 
         // Handles all the rendering of the public theme directory
@@ -1217 +1220 @@
 
                 event.preventDefault();
 
+                $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
+
                 // Bail if this is already active
                 if ( $el.hasClass( this.activeClass ) ) {
                         return;
@@ -1268 +1273 @@
         // Clicking on a checkbox triggers a tag request
         addFilter: function() {
                 var tags = this.filtersChecked(),
-                        request = { tag: tags };
+                        request = { tag: tags },
+                        filteringBy = $( '.filtering-by .tags' );
 
+                $( 'body' ).addClass( 'filters-applied' );
+                filteringBy.empty();
+
+                _.each( tags, function( tag ) {
+                        filteringBy.append( '<span class="tag">' + tag + '</span>' );
+                });
+
                 // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                 // or searching the local cache
                 this.collection.query( request );
         },
 
-        // 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' ),
                         tags = [];
@@ -1284 +1298 @@
                         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;
         },
 
@@ -1304 +1329 @@
                 });
         },
 
+        // Toggle the full filters navigation
         moreFilters: function() {
+                if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+                        return $( 'body' ).removeClass( 'filters-applied' );
+                }
+
                 $( '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() {
+                var items = $( '.feature-group' ).find( ':checkbox' ),
+                        self = this;
+
+                _.each( items.filter( ':checked' ), function( item ) {
+                        $( item ).prop( 'checked', false );
+                        return self.filtersChecked();
+                });
         }
 });
 

wp-admin/theme-install.php

@@ -118 +118 @@
                 <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
                 <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>-->
-                        <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
+                        <!-- <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( 'All' ); ?></a>
                 </div>
                 <div class="more-filters-container">
                 <?php
@@ -140 +140 @@
                 }
                 ?>
                         <br class="clear" />
+                        <a class="apply-filters button button-secondary"><?php _e( 'Apply Filters' ); ?><span></span></a>
+                        <a class="clear-filters button button-secondary"><?php _e( 'Clear' ); ?></a>
+                        <div class="filtering-by">
+                                <span><?php _e( 'Filtering by:' ); ?></span>
+                                <div class="tags"></div>
+                        </div>
                 </div>
         </div>
         <div class="theme-browser"></div>