Theme installer:

* Restore the feature filter.
 * Improve responsiveness.
 * Router updates, fixes.
 * Make "Upload Theme" button more consistent with the admin.
 * Avoid theme-count causing filters to jump.

props matveb.
see #27055.


git-svn-id: https://develop.svn.wordpress.org/trunk@27636 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/themes.css

@@ -169,9 +169,9 @@
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	opacity: 0;
 	position: absolute;
-		top: 35%;
+	top: 35%;
-		right: 25%;
+	right: 25%;
-		left: 25%;
+	left: 25%;
 	background: #222;
 	background: rgba(0,0,0,0.7);
 	color: #fff;
@@ -1065,9 +1065,6 @@ body.folded .theme-overlay .theme-wrap {
   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 @@ body.folded .theme-overlay .theme-wrap {
 	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;
@@ -1090,9 +1098,9 @@ body.folded .theme-overlay .theme-wrap {
 	width: 100%;
 	overflow: hidden;
 	position: relative;
-		top: 10px;
+	top: 10px;
 }
-.upload-theme.opened {
+body.show-upload-theme .upload-theme {
 	display: block;
 }
 .upload-theme .wp-upload-form {
@@ -1110,13 +1118,17 @@ body.folded .theme-overlay .theme-wrap {
 	padding: 40px 0 0;
 	text-align: center;
 }
-.upload-theme.opened + .theme-navigation,
+body.show-upload-theme .upload-theme + .theme-navigation,
-.upload-theme.opened + .theme-navigation + .theme-browser {
+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 {
@@ -1142,13 +1154,13 @@ body.folded .theme-overlay .theme-wrap {
 	cursor: pointer;
 	display: inline-block;
 	margin: 0 10px;
-	padding: 4px 5px;
+	padding: 4px 6px;
 	-moz-transition: color .1s ease-in, background .1s ease-in;
 	-webkit-transition: color .1s ease-in, background .1s ease-in;
 	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;
@@ -1156,8 +1168,8 @@ body.more-filters-opened .more-filters,
 }
 .theme-install-php .theme-search {
 	position: absolute;
-		right: 10px;
+	right: 10px;
-		top: 9px;
+	top: 9px;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
@@ -1197,10 +1209,50 @@ body.more-filters-opened .more-filters,
 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;
 }

src/wp-admin/js/theme.js

@@ -992,7 +992,8 @@ themes.view.Installer = themes.view.Appearance.extend({
 	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 @@ themes.view.Installer = themes.view.Appearance.extend({
 		// 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 @@ themes.view.Installer = themes.view.Appearance.extend({
 		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( '<div class="error"><p>' + l10n.error + '</p></div>' );
+		});
+	},
+
+	// 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,10 +1189,13 @@ themes.view.Installer = themes.view.Appearance.extend({
 	searchContainer: $( '.theme-navigation' ),
 
 	uploader: function() {
-		$( 'a.upload.button' ).on( 'click', function() {
+		$( 'a.upload' ).on( 'click', function() {
-			$( '.upload-theme' )
+			$( 'body' ).addClass( 'show-upload-theme' );
-				.toggleClass( 'opened' )
+			themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
-				.hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
+		});
+		$( 'a.browse-themes' ).on( 'click', function() {
+			$( 'body' ).removeClass( 'show-upload-theme' );
+			themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
 		});
 	},
 
@@ -1168,7 +1207,8 @@ themes.view.Installer = themes.view.Appearance.extend({
 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 @@ themes.RunInstaller = {
 			self.view.trigger( 'theme:close' );
 		});
 
+		themes.router.on( 'route:upload', function( slug ) {
+			$( 'a.upload' ).trigger( 'click' );
+		});
+
 		this.extraRoutes();
 	},
 

src/wp-admin/theme-install.php

@@ -104,7 +104,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 <div class="wrap">
 	<h2>
 		<?php echo esc_html( $title ); ?>
-		<a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+		<a class="upload add-new-h2"><?php esc_html_e( 'Upload Theme' ); ?></a>
+		<a class="browse-themes add-new-h2"><?php esc_html_e( 'Browse' ); ?></a>
 	</h2>
 
 	<div class="upload-theme">
@@ -117,12 +118,28 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 		<span class="theme-section" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></span>
 		<span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
 		<div class="theme-top-filters">
-			<span class="theme-filter" data-filter="photoblogging">Photography</span>
+			<!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
-			<span class="theme-filter" data-filter="responsive-layout">Responsive</span>
+			<span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
-			<span class="theme-filter more-filters">More</span>
+			<span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
 		</div>
 		<div class="more-filters-container">
-			Display more filters.
+		<?php
+		$feature_list = get_theme_feature_list();
+		foreach ( $feature_list as $feature_name => $features ) {
+			echo '<div class="filters-group">';
+			$feature_name = esc_html( $feature_name );
+			echo '<h4 class="feature-name">' . $feature_name . '</h4>';
+			echo '<ol class="feature-group">';
+			foreach ( $features as $feature => $feature_name ) {
+				$feature = esc_attr( $feature );
+				echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
+				echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
+			}
+			echo '</ol>';
+			echo '</div>';
+		}
+		?>
+			<br class="clear" />
 		</div>
 	</div>
 	<div class="theme-browser"></div>