Index: wp-admin/css/themes.css
===================================================================
--- wp-admin/css/themes.css (revision 27871)
+++ wp-admin/css/themes.css (working copy)
@@ -1230,21 +1230,96 @@
body.more-filters-opened .more-filters-container {
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;
-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;
+ 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;
+}
+
.theme-install-php .add-new-theme {
display: none !important;
}
@@ -1268,13 +1343,21 @@
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;
}
Index: wp-admin/js/theme.js
===================================================================
--- wp-admin/js/theme.js (revision 27871)
+++ wp-admin/js/theme.js (working copy)
@@ -255,6 +255,10 @@
self.trigger( 'update' );
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 } );
}).fail( function() {
@@ -330,7 +334,7 @@
beforeSend: function() {
if ( ! paginated ) {
// Spin it
- $( 'body' ).addClass( 'loading-themes' );
+ $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
}
}
});
@@ -704,6 +708,10 @@
}
});
+ this.listenTo( self.collection, 'query:empty', function() {
+ $( 'body' ).addClass( 'no-results' );
+ });
+
this.listenTo( this.parent, 'theme:scroll', function() {
self.renderThemes( self.parent.page );
});
@@ -1143,7 +1151,10 @@
'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,6 +1228,8 @@
event.preventDefault();
+ $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
+
// Bail if this is already active
if ( $el.hasClass( this.activeClass ) ) {
return;
@@ -1268,14 +1281,25 @@
// Clicking on a checkbox triggers a tag request
addFilter: function() {
var tags = this.filtersChecked(),
- request = { tag: tags };
+ request = { tag: tags },
+ filteringBy = $( '.filtering-by .tags' ),
+ name;
+ $( 'body' ).addClass( 'filters-applied' );
+ filteringBy.empty();
+
+ _.each( tags, function( tag ) {
+ name = $( 'label[for="feature-id-' + tag + '"]' ).text();
+ filteringBy.append( '' + name + '' );
+ });
+
// 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,6 +1308,17 @@
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,8 +1339,36 @@
});
},
+ // Toggle the full filters navigation
moreFilters: function() {
+ 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() {
+ var items = $( '.feature-group' ).find( ':checkbox' ),
+ self = this;
+
+ _.each( items.filter( ':checked' ), function( item ) {
+ $( item ).prop( 'checked', false );
+ return self.filtersChecked();
+ });
}
});
Index: wp-admin/theme-install.php
===================================================================
--- wp-admin/theme-install.php (revision 27871)
+++ wp-admin/theme-install.php (working copy)
@@ -118,9 +118,9 @@
+