Ticket #27055: 27055.21.diff

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'
         },
 
         // Handles all the rendering of the public theme directory
@@ -1275 +1277 @@
                 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 +1287 @@
                         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();
+                        return false;
+                }
+
+                $( '.apply-filters' ).find( 'span' ).text( tags.length );
+                $( '.clear-filters' ).css( 'display', 'inline-block' );
+
                 return tags;
         },
 
@@ -1304 +1317 @@
                 });
         },
 
+        // Toggle the full filters navigation and
+        // sets the handler for collapsing each individual section
         moreFilters: function() {
                 $( 'body' ).toggleClass( 'more-filters-opened' );
+
+                $( '.feature-name' ).on( 'click', function() {
+                        $( this ).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/css/themes.css

@@ -1235 +1235 @@
         -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;
 }
+.filters-group .feature-name:after {
+        color: #aaa;
+        content: '\f140';
+        font: normal 20px/1 'dashicons';
+        speak: none;
+        display: inline-block;
+        position: absolute;
+                right: 0;
+                top: -2px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-decoration: none !important;
+}
+.filters-group:hover .feature-name:after {
+        color: #666;
+}
+.filters-group.open .feature-name:after {
+        content: '\f142';
+}
 .more-filters-container ol {
         list-style-type: none;
-        margin: 0;
+        margin: 20px 0 0;
+        display: none;
+        font-size: 12px;
 }
+.filters-group.open ol {
+        display: block;
+}
+.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;
+}
 
 .theme-install-php .add-new-theme {
         display: none !important;
@@ -1268 +1313 @@
                 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/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>
         </div>
         <div class="theme-browser"></div>