Index: wp-admin/includes/theme-install.php =================================================================== --- wp-admin/includes/theme-install.php (revision 27623) +++ wp-admin/includes/theme-install.php (working copy) @@ -134,6 +134,37 @@ } // add_action('install_themes_dashboard', 'install_themes_dashboard'); +/** + * Display all the available tag filters. + * + * @since 3.9.0 + */ +function install_themes_more_filters() { + + $feature_list = get_theme_feature_list(); + + foreach ( (array) $feature_list as $feature_name => $features ) { + echo '
'; + $feature_name = esc_html( $feature_name ); + echo '

' . $feature_name . '

'; + + echo '
    '; + foreach ( $features as $feature => $feature_name ) { + $feature_name = esc_html( $feature_name ); + $feature = esc_attr($feature); + ?> +
  1. + + +
    2. + +
+
+ +
+

Index: wp-admin/js/theme.js =================================================================== --- wp-admin/js/theme.js (revision 27623) +++ wp-admin/js/theme.js (working copy) @@ -992,7 +992,8 @@ events: { 'click .theme-section': 'onSort', 'click .theme-filter': 'onFilter', - 'click .more-filters': 'moreFilters' + 'click .more-filters': 'moreFilters', + 'click [type="checkbox"]': 'addFilter' }, // Send Ajax POST request to api.wordpress.org/themes @@ -1126,6 +1127,7 @@ // using the default values // @todo Cache the collection after fetching based on the filter + filter = _.union( filter, this.filtersChecked() ); request = { tag: [ filter ] }; // Send Ajax POST request to api.wordpress.org/themes @@ -1146,6 +1148,40 @@ return false; }, + // Clicking on a checkbox triggers a tag request + addFilter: function() { + var self = this, + tags = this.filtersChecked(), + request = { tag: tags }; + + // Send Ajax POST request to api.wordpress.org/themes + this.apiCall( request ).done( function( data ) { + // Update the collection with the queried data + self.collection.reset( data.themes ); + // Trigger a collection refresh event to render the views + self.collection.trigger( 'update' ); + + // Un-spin it + $( 'body' ).removeClass( 'loading-themes' ); + $( '.theme-browser' ).find( 'div.error' ).remove(); + }).fail( function() { + $( '.theme-browser' ).find( 'div.error' ).remove(); + $( '.theme-browser' ).append( '

' + l10n.error + '

' ); + }); + }, + + // Get the checked filters and return an array + filtersChecked: function() { + var items = $( '.feature-group' ).find( ':checkbox' ), + tags = []; + + _.each( items.filter( ':checked' ), function( item ) { + tags.push( $( item ).prop( 'value' ) ); + }); + + return tags; + }, + activeClass: 'current', // Overwrite search container class to append search @@ -1153,11 +1189,14 @@ searchContainer: $( '.theme-navigation' ), uploader: function() { - $( 'a.upload.button' ).on( 'click', function() { - $( '.upload-theme' ) - .toggleClass( 'opened' ) - .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload ); + $( 'a.upload' ).on( 'click', function() { + $( 'body' ).addClass( 'show-upload-theme' ); + themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } ); }); + $( 'a.browse-themes' ).on( 'click', function() { + $( 'body' ).removeClass( 'show-upload-theme' ); + themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } ); + }); }, moreFilters: function() { @@ -1168,7 +1207,8 @@ themes.InstallerRouter = Backbone.Router.extend({ routes: { 'theme-install.php?theme=:slug': 'preview', - 'theme-install.php(?sort=:sort)': 'sort', + 'theme-install.php?sort=:sort': 'sort', + 'theme-install.php?upload': 'upload', '': 'sort' }, @@ -1225,6 +1265,10 @@ self.view.trigger( 'theme:close' ); }); + themes.router.on( 'route:upload', function( slug ) { + $( 'a.upload' ).trigger( 'click' ); + }); + this.extraRoutes(); }, Index: wp-admin/css/themes.css =================================================================== --- wp-admin/css/themes.css (revision 27623) +++ wp-admin/css/themes.css (working copy) @@ -1065,9 +1065,6 @@ 16.2 - Install Themes ------------------------------------------------------------------------------*/ -.theme-install-php h2 .upload { - margin-left: 10px; -} .theme-navigation { background: #fff; box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); @@ -1081,6 +1078,17 @@ position: relative; width: 100%; } +.theme-install-php a.upload, +.theme-install-php a.browse-themes { + cursor: pointer; +} +.theme-install-php a.browse-themes, +.theme-install-php.show-upload-theme a.upload { + display: none; +} +.theme-install-php.show-upload-theme a.browse-themes { + display: inline; +} .upload-theme { -moz-box-sizing: border-box; box-sizing: border-box; @@ -1092,7 +1100,7 @@ position: relative; top: 10px; } -.upload-theme.opened { +body.show-upload-theme .upload-theme { display: block; } .upload-theme .wp-upload-form { @@ -1110,14 +1118,18 @@ padding: 40px 0 0; text-align: center; } -.upload-theme.opened + .theme-navigation, -.upload-theme.opened + .theme-navigation + .theme-browser { +body.show-upload-theme .upload-theme + .theme-navigation, +body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser { display: none; } .theme-navigation .theme-count { - top: 3px; margin-left: 0; + position: absolute; + top: 12px; } +.theme-count + .theme-section { + margin-left: 60px; +} .theme-section, .theme-filter { border-bottom: 4px solid #fff; @@ -1148,7 +1160,7 @@ transition: color .1s ease-in, background .1s ease-in; } body.more-filters-opened .more-filters, -.theme-navigation .more-filters.current { +body.more-filters-opened .more-filters:before { background: rgb(46, 162, 204); border-radius: 2px; border: none; @@ -1197,10 +1209,50 @@ body.more-filters-opened .more-filters-container { display: block; } +.more-filters-container .filters-group { + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + width: 20%; +} +.more-filters-container .feature-name { + margin-top: 0; +} +.more-filters-container ol { + list-style-type: none; + margin: 0; +} + .theme-install-php .add-new-theme { display: none !important; } +@media only screen and (max-width: 1120px) { + .theme-install-php .theme-search { + margin: 20px 0; + position: static; + width: 100%; + } + .more-filters-container { + border-bottom: 1px solid #eee; + } + .upload-theme .wp-upload-form { + margin: 20px 0; + max-width: 100%; + } + .upload-theme .install-help { + font-size: 15px; + padding: 20px 0 0; + text-align: left; + } + .more-filters-container .filters-group { + width: 50%; + } + .more-filters-container .filters-group:nth-child(3n) { + clear: left; + } +} + .rating { margin: 30px 0; } Index: wp-admin/theme-install.php =================================================================== --- wp-admin/theme-install.php (revision 27623) +++ wp-admin/theme-install.php (working copy) @@ -104,7 +104,8 @@

- + +

@@ -119,10 +120,10 @@
Photography Responsive - More + More
- Display more filters. +