<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[15656] trunk: Feature filter visuals.</title>
</head>
<body>
<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/15656">15656</a></dd>
<dt>Author</dt> <dd>ryan</dd>
<dt>Date</dt> <dd>2010-09-24 18:50:31 +0000 (Fri, 24 Sep 2010)</dd>
</dl>
<h3>Log Message</h3>
<pre>Feature filter visuals. First pass. see <a href="http://trac.wordpress.org/ticket/14936">#14936</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincssthemeinstallcss">trunk/wp-admin/css/theme-install.css</a></li>
<li><a href="#trunkwpadmincssthemeinstalldevcss">trunk/wp-admin/css/theme-install.dev.css</a></li>
<li><a href="#trunkwpadminthemesphp">trunk/wp-admin/themes.php</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkwpadminjsthemedevjs">trunk/wp-admin/js/theme.dev.js</a></li>
<li><a href="#trunkwpadminjsthemejs">trunk/wp-admin/js/theme.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincssthemeinstallcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/theme-install.css (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/theme-install.css 2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-admin/css/theme-install.css 2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -1 +1 @@
</span><del>-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;}
</del><span class="cx">\ No newline at end of file
</span><ins>+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;}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpadmincssthemeinstalldevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/theme-install.dev.css (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/theme-install.dev.css 2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-admin/css/theme-install.dev.css 2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -143,3 +143,13 @@
</span><span class="cx"> padding-right: 25px;
</span><span class="cx"> min-width: 145px;
</span><span class="cx"> }
</span><ins>+
+.feature-container {
+width: 100%;
+overflow: auto;
+margin-bottom: 10px;
+}
+
+.feature-group {
+ margin-bottom: 0px !important;
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpadminjsthemedevjs"></a>
<div class="addfile"><h4>Added: trunk/wp-admin/js/theme.dev.js (0 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/theme.dev.js (rev 0)
+++ trunk/wp-admin/js/theme.dev.js 2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -0,0 +1,71 @@
</span><ins>+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();
+});
</ins><span class="cx">\ No newline at end of file
</span><span class="cx">Property changes on: trunk/wp-admin/js/theme.dev.js
</span><span class="cx">___________________________________________________________________
</span><span class="cx">Name: svn:eol-style
</span><span class="cx"> + native
</span></span></pre></div>
<a id="trunkwpadminjsthemejs"></a>
<div class="addfile"><h4>Added: trunk/wp-admin/js/theme.js (0 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/theme.js (rev 0)
+++ trunk/wp-admin/js/theme.js 2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -0,0 +1 @@
</span><ins>+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()});
</ins><span class="cx">\ No newline at end of file
</span><span class="cx">Property changes on: trunk/wp-admin/js/theme.js
</span><span class="cx">___________________________________________________________________
</span><span class="cx">Name: svn:eol-style
</span><span class="cx"> + native
</span></span></pre></div>
<a id="trunkwpadminthemesphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/themes.php (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/themes.php 2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-admin/themes.php 2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -47,6 +47,8 @@
</span><span class="cx">
</span><span class="cx"> add_thickbox();
</span><span class="cx"> wp_enqueue_script( 'theme-preview' );
</span><ins>+wp_enqueue_script( 'theme' );
+wp_enqueue_style( 'theme-install' );
</ins><span class="cx">
</span><span class="cx"> endif;
</span><span class="cx">
</span><span class="lines">@@ -135,7 +137,48 @@
</span><span class="cx"> <label class="screen-reader-text" for="theme-search-input"><?php _e('Search Themes'); ?>:</label>
</span><span class="cx"> <input type="text" id="tag-search-input" name="s" value="<?php _admin_search_query(); ?>" />
</span><span class="cx"> <input type="submit" value="<?php esc_attr_e('Search Themes'); ?>" class="button" />
</span><ins>+ <a id="filter-click" href="?filter=1"><?php _e( 'Feature Filter' ); ?></a>
</ins><span class="cx"> </p>
</span><ins>+
+<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>
+
</ins><span class="cx"> </form>
</span><span class="cx"> <br class="clear" />
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-includes/script-loader.php 2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -335,6 +335,9 @@
</span><span class="cx"> 'l10n_print_after' => 'try{convertEntities(wordCountL10n);}catch(e){};'
</span><span class="cx"> ));
</span><span class="cx">
</span><ins>+ $scripts->add( 'theme-preview', "/wp-admin/js/theme$suffix.js", array( 'thickbox', 'jquery' ), '20100407' );
+ $scripts->add_data( 'theme', 'group', 1 );
+
</ins><span class="cx"> $scripts->add( 'theme-preview', "/wp-admin/js/theme-preview$suffix.js", array( 'thickbox', 'jquery' ), '20100407' );
</span><span class="cx"> $scripts->add_data( 'theme-preview', 'group', 1 );
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>