From a2a9451ae6a2f29360c5e807e526ec30bfee77e9 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 24 Sep 2010 18:50:31 +0000 Subject: [PATCH] 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 | 2 +- wp-admin/css/theme-install.dev.css | 10 +++++ wp-admin/js/theme.dev.js | 71 ++++++++++++++++++++++++++++++ wp-admin/js/theme.js | 1 + wp-admin/themes.php | 43 ++++++++++++++++++ wp-includes/script-loader.php | 3 ++ 6 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 wp-admin/js/theme.dev.js create mode 100644 wp-admin/js/theme.js diff --git a/wp-admin/css/theme-install.css b/wp-admin/css/theme-install.css index a54afc74a..14d9816f4 100644 --- a/wp-admin/css/theme-install.css +++ b/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;} \ No newline at end of file +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;} \ No newline at end of file diff --git a/wp-admin/css/theme-install.dev.css b/wp-admin/css/theme-install.dev.css index 12f0579ef..31bbe5e23 100644 --- a/wp-admin/css/theme-install.dev.css +++ b/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; +} \ No newline at end of file diff --git a/wp-admin/js/theme.dev.js b/wp-admin/js/theme.dev.js new file mode 100644 index 000000000..80e07e4b4 --- /dev/null +++ b/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(); +}); \ No newline at end of file diff --git a/wp-admin/js/theme.js b/wp-admin/js/theme.js new file mode 100644 index 000000000..42eaf0b6a --- /dev/null +++ b/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()}); \ No newline at end of file diff --git a/wp-admin/themes.php b/wp-admin/themes.php index 818e1928d..031b77c46 100644 --- a/wp-admin/themes.php +++ b/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' ) ) { +

+ +
+ + +
diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index b395c0886..fa6ee4b2a 100644 --- a/wp-includes/script-loader.php +++ b/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 );