Ticket #27055: 27055.20.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'
         },
 
         // Handles all the rendering of the public theme directory
@@ -1284 +1285 @@
                         tags.push( $( item ).prop( 'value' ) );
                 });
 
+                $( '.apply-filters' ).find( 'span' ).text( tags.length );
+
                 return tags;
         },
 
@@ -1306 +1309 @@
 
         moreFilters: function() {
                 $( 'body' ).toggleClass( 'more-filters-opened' );
+
+                $( '.feature-name' ).on( 'click', function() {
+                        $( this ).parent().toggleClass( 'open' );
+                });
         }
 });
 

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% 20px 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;
+}
+.apply-filters span {
+        font-size: 12px;
+        margin-left: 10px;
+        opacity: 0.8;
+}
 
 .theme-install-php .add-new-theme {
         display: none !important;

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>0</span></a>
                 </div>
         </div>
         <div class="theme-browser"></div>