Feature filter visuals. First pass. see #14936

git-svn-id: http://svn.automattic.com/wordpress/trunk@15656 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/theme-install.css

@@ -1 +1 @@
-div.star-holder{position:relative;height:19px;width:100px;font-size:19px;}div.star{height:100%;position:absolute;top:0;left:0;background-color:transparent;letter-spacing:1ex;border:none;}.star1{width:20%;}.star2{width:40%;}.star3{width:60%;}.star4{width:80%;}.star5{width:100%;}.star img,div.star a,div.star a:hover,div.star a:visited{display:block;position:absolute;right:0;border:none;text-decoration:none;}div.star img{width:19px;height:19px;border-left:1px solid #fff;border-right:1px solid #fff;}.theme-listing .theme-item{display:inline-block;width:200px;border:thin solid #ccc;vertical-align:top;}.theme-listing .theme-item h3{text-align:center;font-size:14px;font-style:italic;margin:0;padding:0;}.theme-listing .theme-item img{max-width:150px;max-height:150px;}.theme-listing .theme-item-info span{display:none;}.theme-listing .theme-item:hover .theme-item-info span{display:inline;}.theme-listing .theme-item:hover .theme-item-info span.dots{display:none;}.theme-listing .theme-item-info span.action-links{font-weight:bold;text-align:center;}.theme-listing br.line{border-bottom-width:1px;border-bottom-style:solid;margin-bottom:3px;}.available-theme{padding:20px 15px;}#theme-information .theme-preview-img{float:left;margin:5px 25px 10px 15px;width:300px;}#theme-information .action-button{border-top-width:1px;border-top-style:solid;margin:10px 5px 0;}#theme-information .action-button #cancel{float:left;margin:10px 15px;}#theme-information .action-button #install{float:right;margin:10px 15px;}#theme-information .available-theme h3{margin:1em 0;}body#theme-information{height:auto;}.feature-filter{-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;border-width:1px;border-style:solid;padding:8px 12px 0;}.feature-filter .feature-group{float:left;margin-bottom:20px;width:695px;}.feature-filter .feature-name{float:left;text-align:right;width:95px;}.feature-filter .feature-group li{display:inline;float:left;list-style-type:none;padding-right:25px;min-width:145px;}
+div.star-holder{position:relative;height:19px;width:100px;font-size:19px;}div.star{height:100%;position:absolute;top:0;left:0;background-color:transparent;letter-spacing:1ex;border:none;}.star1{width:20%;}.star2{width:40%;}.star3{width:60%;}.star4{width:80%;}.star5{width:100%;}.star img,div.star a,div.star a:hover,div.star a:visited{display:block;position:absolute;right:0;border:none;text-decoration:none;}div.star img{width:19px;height:19px;border-left:1px solid #fff;border-right:1px solid #fff;}.theme-listing .theme-item{display:inline-block;width:200px;border:thin solid #ccc;vertical-align:top;}.theme-listing .theme-item h3{text-align:center;font-size:14px;font-style:italic;margin:0;padding:0;}.theme-listing .theme-item img{max-width:150px;max-height:150px;}.theme-listing .theme-item-info span{display:none;}.theme-listing .theme-item:hover .theme-item-info span{display:inline;}.theme-listing .theme-item:hover .theme-item-info span.dots{display:none;}.theme-listing .theme-item-info span.action-links{font-weight:bold;text-align:center;}.theme-listing br.line{border-bottom-width:1px;border-bottom-style:solid;margin-bottom:3px;}.available-theme{padding:20px 15px;}#theme-information .theme-preview-img{float:left;margin:5px 25px 10px 15px;width:300px;}#theme-information .action-button{border-top-width:1px;border-top-style:solid;margin:10px 5px 0;}#theme-information .action-button #cancel{float:left;margin:10px 15px;}#theme-information .action-button #install{float:right;margin:10px 15px;}#theme-information .available-theme h3{margin:1em 0;}body#theme-information{height:auto;}.feature-filter{-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;border-width:1px;border-style:solid;padding:8px 12px 0;}.feature-filter .feature-group{float:left;margin-bottom:20px;width:695px;}.feature-filter .feature-name{float:left;text-align:right;width:95px;}.feature-filter .feature-group li{display:inline;float:left;list-style-type:none;padding-right:25px;min-width:145px;}.feature-container{width:100%;overflow:auto;margin-bottom:10px;}.feature-group{margin-bottom:0!important;}

wp-admin/css/theme-install.dev.css

@@ -143,3 +143,13 @@ body#theme-information {
 	padding-right: 25px;
 	min-width: 145px;
 }
+
+.feature-container {
+width: 100%;
+overflow: auto;
+margin-bottom: 10px;
+}
+
+.feature-group {
+	margin-bottom: 0px !important;
+}

wp-admin/js/theme.dev.js

@@ -0,0 +1,71 @@
+var ThemeViewer;
+
+(function($){
+	ThemeViewer = function( args ) {
+
+		function filter_count() {
+			var count = $( '#filters :checked' ).length;
+			var text  = $( '#filter-click' ).text();
+
+			if ( text.indexOf( '(' ) != -1 )
+				text = text.substr( 0, text.indexOf( '(' ) );
+
+			if ( count == 0 )
+				$( '#filter-click' ).text( text );
+			else
+				$( '#filter-click' ).text( text + ' (' + count + ')' );
+		}
+
+		function init() {
+			$( '#filter-click, #mini-filter-click' ).unbind( 'click' ).click( function() {
+				$( '#filter-click' ).toggleClass( 'current' );
+				$( '#filters' ).slideToggle();
+				$( '#current-theme' ).slideToggle( 300 );
+				return false;
+			});
+
+			$( '#filters :checkbox' ).unbind( 'click' ).click( function() {
+				filter_count();
+			});
+
+			$( 'p.tags a' ).unbind( 'click' ).click(function() {
+				$( 'p.tags a' ).unbind( 'click' ).click(function() { slow_down(); return false });   // Stop further clicks until we've done
+				$( '.loading' ).fadeIn();
+				$( '.random-info' ).fadeOut();
+
+				var item = this.href.replace( /.*?s=(.*?)#.*/, '$1' );
+
+				// Is this in the features list?
+				if ( $( 'input[value="' + item + '"]' ).length > 0 ) {
+					$( 'input[value="' + item + '"]' ).attr( 'checked', $( 'input[value="' + item + '"]' ).attr( 'checked' ) ? false : true );
+
+					filter_count();
+				}
+				else
+					$( 'input[name=s]' ).val( item );   // Can't find it, just use a search
+
+				// Set the options
+				opts.search = $( 'input[name=s]' ).val();
+				opts.order  = document.location.href.match( /order=(\w*)/ ) ? document.location.href.match( /order=(\w*)/ )[1] : 'random';
+				
+				$( '#availablethemes td' ).fadeTo( 500, 0.1, function() {
+					$( '#availablethemes td img' ).hide();
+				} );
+
+				return false;
+			});
+		}
+		
+		// These are the functions we expose
+		var api = {
+			init: init
+		};
+
+  	return api;
+	}
+})(jQuery);
+
+jQuery( document ).ready( function($) {
+	theme_viewer = new ThemeViewer();
+	theme_viewer.init();
+});	

wp-admin/js/theme.js

@@ -0,0 +1 @@
+var ThemeViewer;(function(a){ThemeViewer=function(b){function d(){var f=a("#filters :checked").length;var g=a("#filter-click").text();if(g.indexOf("(")!=-1){g=g.substr(0,g.indexOf("("))}if(f==0){a("#filter-click").text(g)}else{a("#filter-click").text(g+" ("+f+")")}}function e(){a("#filter-click, #mini-filter-click").unbind("click").click(function(){a("#filter-click").toggleClass("current");a("#filters").slideToggle();a("#current-theme").slideToggle(300);return false});a("#filters :checkbox").unbind("click").click(function(){d()});a("p.tags a").unbind("click").click(function(){a("p.tags a").unbind("click").click(function(){slow_down();return false});a(".loading").fadeIn();a(".random-info").fadeOut();var f=this.href.replace(/.*?s=(.*?)#.*/,"$1");if(a('input[value="'+f+'"]').length>0){a('input[value="'+f+'"]').attr("checked",a('input[value="'+f+'"]').attr("checked")?false:true);d()}else{a("input[name=s]").val(f)}opts.search=a("input[name=s]").val();opts.order=document.location.href.match(/order=(\w*)/)?document.location.href.match(/order=(\w*)/)[1]:"random";a("#availablethemes td").fadeTo(500,0.1,function(){a("#availablethemes td img").hide()});return false})}var c={init:e};return c}})(jQuery);jQuery(document).ready(function(a){theme_viewer=new ThemeViewer();theme_viewer.init()});

wp-admin/themes.php

@@ -47,6 +47,8 @@ add_contextual_help($current_screen, $help);
 
 add_thickbox();
 wp_enqueue_script( 'theme-preview' );
+wp_enqueue_script( 'theme' );
+wp_enqueue_style( 'theme-install' );
 
 endif;
 
@@ -135,7 +137,48 @@ if ( ! current_user_can( 'switch_themes' ) ) {
 	<label class="screen-reader-text" for="theme-search-input"><?php _e('Search Themes'); ?>:</label>
 	<input type="text" id="tag-search-input" name="s" value="<?php _admin_search_query(); ?>" />
 	<input type="submit" value="<?php esc_attr_e('Search Themes');  ?>" class="button" />
+	<a id="filter-click" href="?filter=1"><?php _e( 'Feature Filter' ); ?></a>
 </p>
+
+<br class="clear"/>
+
+<div id="filters" <?php if ( $tpage != 'filter' ) echo ' style="display: none"' ?>>
+<?php $feature_list = get_theme_feature_list(); ?>
+	<div class="feature-filter">
+		<p class="install-help"><?php _e('Theme filters') ?></p>
+
+	<?php foreach ( $feature_list as $feature_name => $features ) : ?>
+		<?php	$feature_name = esc_html( $feature_name ); ?>
+		
+		<div class="feature-container">
+			<div class="feature-name"><?php echo $feature_name ?></div>
+		
+			<ol style="float: left; width: 725px;" class="feature-group">
+				<?php foreach ( $features as $key => $feature ) : ?>
+					<?php
+						$feature_name = $feature;
+						$feature_name = esc_html( $feature_name );
+						$feature = esc_attr($feature);
+						?>
+				<li>
+					<input type="checkbox" name="features[<?php echo $key; ?>]" id="feature-id-<?php echo $key; ?>" value="<?php echo $key; ?>" <?php if ( in_array( $key, $checked_features ) ) echo ' checked="checked"' ?>/>
+					<label for="feature-id-<?php echo $key; ?>"><?php echo $feature_name; ?></label>
+				</li>
+				<?php	endforeach; ?>
+			</ol>
+		</div>
+	<?php	endforeach; ?>
+
+	<div class="feature-container">
+		<input style="margin-left: 120px" type="submit" class="button-secondary submitter" value="<?php _e( 'Apply Filters' ); ?>" />
+		&nbsp;
+		<small><a id="mini-filter-click" href="<?php echo admin_url( 'themes.php' ); ?>"><?php _e( 'Close filters' )?></a></small>
+	</div>
+	<br/>
+	</div>
+	<br class="clear"/>
+</div>
+
 </form>
 <br class="clear" />
 

wp-includes/script-loader.php

@@ -335,6 +335,9 @@ function wp_default_scripts( &$scripts ) {
 			'l10n_print_after' => 'try{convertEntities(wordCountL10n);}catch(e){};'
 		));
 
+		$scripts->add( 'theme-preview', "/wp-admin/js/theme$suffix.js", array( 'thickbox', 'jquery' ), '20100407' );
+		$scripts->add_data( 'theme', 'group', 1 );
+
 		$scripts->add( 'theme-preview', "/wp-admin/js/theme-preview$suffix.js", array( 'thickbox', 'jquery' ), '20100407' );
 		$scripts->add_data( 'theme-preview', 'group', 1 );