From 3217fa545b0cea6c3ce7dfc6e322e2e8323e5cee Mon Sep 17 00:00:00 2001 From: Andrew Nacin Date: Thu, 20 Mar 2014 04:19:55 +0000 Subject: [PATCH] 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 | 82 +++++++++++++++++++++++++++------- src/wp-admin/js/theme.js | 56 ++++++++++++++++++++--- src/wp-admin/theme-install.php | 27 ++++++++--- 3 files changed, 139 insertions(+), 26 deletions(-) diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 54d00a06e6..a1f388877e 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -169,9 +169,9 @@ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; - top: 35%; - right: 25%; - left: 25%; + top: 35%; + right: 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, -.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 { @@ -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; - top: 9px; + right: 10px; + 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; } diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index a2e515471d..4f7eebfccf 100644 --- a/src/wp-admin/js/theme.js +++ b/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( '

' + 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,10 +1189,13 @@ themes.view.Installer = themes.view.Appearance.extend({ 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 } ); }); }, @@ -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(); }, diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 438aa8c2b1..365509b38e 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -104,7 +104,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');

- + +

@@ -117,12 +118,28 @@ include(ABSPATH . 'wp-admin/admin-header.php');
- Photography - Responsive - More + +
- Display more filters. + $features ) { + echo '
'; + $feature_name = esc_html( $feature_name ); + echo '

' . $feature_name . '

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