diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 5e60d480a1..8772e6b0f7 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -934,22 +934,6 @@ th.action-links { } /* Filter bar */ - -.wp-title-count { - display: inline; - position: relative; - top: -3px; - margin-left: 5px; - margin-right: 20px; - padding: 4px 10px; - -webkit-border-radius: 30px; - border-radius: 30px; - background: #777; - color: #fff; - font-size: 14px; - font-weight: 600; -} - .wp-filter { display: inline-block; position: relative; @@ -971,13 +955,14 @@ th.action-links { text-decoration: none; } -.wp-filter-count { +.filter-count { display: inline-block; vertical-align: middle; min-width: 4em; } -.wp-filter-count .count { +.title-count, +.filter-count .count { display: inline-block; position: relative; top: -1px; @@ -990,17 +975,25 @@ th.action-links { font-weight: 600; } -.wp-filter-links { +/* not a part of filter bar, but derived from it, so here for now */ +.title-count { + display: inline; + top: -3px; + margin-left: 5px; + margin-right: 20px; +} + +.filter-links { display: inline-block; margin: 0; } -.wp-filter-links li { +.filter-links li { display: inline-block; margin: 0; } -.wp-filter-link { +.filter-links li > a { display: inline-block; margin: 0 10px; padding: 15px 0; @@ -1009,16 +1002,25 @@ th.action-links { cursor: pointer; } -.wp-filter-links .current { +.filter-links .current { + box-shadow: none; border-bottom: 4px solid #666; color: #222; } -.wp-filter-search { - position: absolute; - top: 9px; - right: 10px; - left: auto; +.filter-links li > a:hover, +.filter-links li > a:focus, +.show-filters .filter-links a.current:hover, +.show-filters .filter-links a.current:focus { + color: #2ea2cc; +} + +.wp-filter .search-form { + float: right; + margin-top: 9px; +} + +.wp-filter .search-form input[type="search"] { padding: 3px 5px; width: 280px; font-size: 16px; @@ -1026,16 +1028,12 @@ th.action-links { line-height: 1.5; } -.wp-filter-no-results { - color: #999; - font-size: 18px; - font-style: normal; - margin: 0; - padding: 100px 0 0; - text-align: center; +.wp-filter .search-form select { + height: 33px; + vertical-align: top; } -.wp-filter-drawer-toggle { +.wp-filter .drawer-toggle { display: inline-block; margin: 0 10px; padding: 4px 6px; @@ -1043,7 +1041,7 @@ th.action-links { cursor: pointer; } -.wp-filter-drawer-toggle:before { +.wp-filter .drawer-toggle:before { display: inline-block; vertical-align: top; content: "\f111"; @@ -1063,15 +1061,16 @@ th.action-links { -webkit-font-smoothing: antialiased; } -.wp-filter-drawer-toggle:hover { - color: #777; +.wp-filter .drawer-toggle:hover, +.wp-filter .drawer-toggle:hover:before { + color: #2ea2cc; } -.wp-filter-drawer-toggle.current:before { +.wp-filter .drawer-toggle.current:before { color: #fff; } -.wp-filter-drawer { +.filter-drawer { display: none; margin: 0 -20px; padding: 20px; @@ -1079,21 +1078,21 @@ th.action-links { background: #fafafa; } -body.show-filter-drawer .wp-filter-drawer { +.show-filters .filter-drawer { display: block; overflow: hidden; } -body.show-filter-drawer .wp-filter-drawer-toggle:hover, -body.show-filter-drawer .wp-filter-drawer-toggle:focus { +.show-filters .wp-filter .drawer-toggle:hover, +.show-filters .wp-filter .drawer-toggle:focus { background: rgb(46, 162, 204); } -body.show-filter-drawer .wp-filter-link.current { +.show-filters .filter-links a.current { border-bottom: none; } -body.show-filter-drawer .wp-filter-drawer-toggle { +.show-filters .wp-filter .drawer-toggle { -webkit-border-radius: 2px; border-radius: 2px; border: none; @@ -1101,11 +1100,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle { color: #fff; } -body.show-filter-drawer .wp-filter-drawer-toggle:before { +.show-filters .wp-filter .drawer-toggle:before { color: #fff; } -.wp-filter-group { +.filter-group { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1119,22 +1118,22 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before { box-shadow: 0 1px 1px rgba(0,0,0,0.04); } -.wp-filter-group-wide { +.filter-group.wide { width: 38%; } -.wp-filter-group-title { +.filter-group h4 { position: relative; margin: 0; } -.wp-filter-drawer ol { +.filter-drawer ol { margin: 20px 0 0; list-style-type: none; font-size: 12px; } -.wp-filter-drawer li { +.filter-drawer li { display: inline-block; vertical-align: top; margin: 5px 0; @@ -1143,11 +1142,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before { list-style-type: none; } -.wp-filter-drawer-buttons { +.filter-drawer .buttons { margin-bottom: 20px; } -.wp-filter .wp-filter-drawer-buttons .button span { +.filter-drawer .buttons .button span { display: inline-block; opacity: 0.8; font-size: 12px; @@ -1159,24 +1158,24 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before { margin: 0 0 20px 10px; } -.wp-filter-by { +.filtered-by { display: none; margin: 0; } -.wp-filter-by > span { +.filtered-by > span { font-weight: 600; } -.wp-filter-by a { +.filtered-by a { margin-left: 10px; } -.wp-filter-by .tags { +.filtered-by .tags { display: inline; } -.wp-filter-by .tag { +.filtered-by .tag { margin: 0 5px; padding: 4px 8px; border: 1px solid #e5e5e5; @@ -1186,34 +1185,31 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before { font-size: 11px; } -body.filters-applied .wp-filter-group, -body.filters-applied .wp-filter-drawer a.button, -body.filters-applied .wp-filter-drawer br { +.filters-applied .filter-group, +.filters-applied .filter-drawer .buttons, +.filters-applied .filter-drawer br { display: none !important; } -body.filters-applied .wp-filter-by { +.filters-applied .filtered-by { display: block; } -body.filters-applied .wp-filter-drawer { +.filters-applied .filter-drawer { padding: 20px; } -body.show-filter-drawer .wp-filter-content, -body.show-filter-drawer.filters-applied.loading-content .wp-filter-content { +.show-filters .content-filterable, +.show-filters.filters-applied.loading-content .content-filterable, +.loading-content .content-filterable, +.error .content-filterable { display: none; } -body.show-filter-drawer.filters-applied .wp-filter-content { +.show-filters.filters-applied .content-filterable { display: block; } -.loading-content .wp-filter-content, -.error .wp-filter-content { - display: none; -} - .loading-content .spinner { display: block; margin: 40px auto 0; @@ -1221,30 +1217,29 @@ body.show-filter-drawer.filters-applied .wp-filter-content { } @media only screen and (max-width: 1120px) { - .wp-filter-search { - position: static; + .wp-filter .search-form { + float: none; margin: 20px 0; - width: 100%; } - .wp-filter-drawer { + .filter-drawer { border-bottom: 1px solid #eee; } - .wp-filter-group { + .filter-group { margin-bottom: 0; margin-top: 5px; width: 100%; } - .wp-filter-group li { + .filter-group li { margin: 10px 0; } } @media only screen and (max-width: 782px) { - .wp-filter-group, - .wp-filter-group li { + .filter-group, + .filter-group li { width: 100%; } diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index 67e125a9be..57e33127ac 100644 --- a/src/wp-admin/js/theme.js +++ b/src/wp-admin/js/theme.js @@ -1288,8 +1288,8 @@ themes.view.InstallerSearch = themes.view.Search.extend({ request.tag = [ value.slice( 4 ) ]; } - $( '.wp-filter-link.current' ).removeClass( 'current' ); - $( 'body' ).removeClass( 'show-filter-drawer filters-applied' ); + $( '.filter-links li > a.current' ).removeClass( 'current' ); + $( 'body' ).removeClass( 'show-filters filters-applied' ); // Get the themes by sending Ajax POST request to api.wordpress.org/themes // or searching the local cache @@ -1306,14 +1306,13 @@ themes.view.Installer = themes.view.Appearance.extend({ // Register events for sorting and filters in theme-navigation events: { - 'click .wp-filter-link': 'onSort', + 'click .filter-links li > a': 'onSort', 'click .theme-filter': 'onFilter', - 'click .wp-filter-drawer-toggle': 'moreFilters', - 'click .wp-filter-drawer .apply-filters': 'applyFilters', - 'click .wp-filter-group [type="checkbox"]': 'addFilter', - 'click .wp-filter-drawer .clear-filters': 'clearFilters', - 'click .wp-filter-group-title': 'filterSection', - 'click .wp-filter-by a': 'backToFilters' + 'click .drawer-toggle': 'moreFilters', + 'click .filter-drawer .apply-filters': 'applyFilters', + 'click .filter-group [type="checkbox"]': 'addFilter', + 'click .filter-drawer .clear-filters': 'clearFilters', + 'click .filtered-by': 'backToFilters' }, // Initial render method @@ -1386,7 +1385,7 @@ themes.view.Installer = themes.view.Appearance.extend({ event.preventDefault(); - $( 'body' ).removeClass( 'filters-applied show-filter-drawer' ); + $( 'body' ).removeClass( 'filters-applied show-filters' ); // Bail if this is already active if ( $el.hasClass( this.activeClass ) ) { @@ -1402,7 +1401,7 @@ themes.view.Installer = themes.view.Appearance.extend({ sort: function( sort ) { this.clearSearch(); - $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass ); + $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass ); $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass ); this.browse( sort ); @@ -1419,7 +1418,7 @@ themes.view.Installer = themes.view.Appearance.extend({ return; } - $( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass ); + $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass ); $el.addClass( this.activeClass ); if ( ! filter ) { @@ -1446,14 +1445,14 @@ themes.view.Installer = themes.view.Appearance.extend({ var name, tags = this.filtersChecked(), request = { tag: tags }, - filteringBy = $( '.wp-filter-by .tags' ); + filteringBy = $( '.filtered-by .tags' ); if ( event ) { event.preventDefault(); } $( 'body' ).addClass( 'filters-applied' ); - $( '.wp-filter-link.current' ).removeClass( 'current' ); + $( '.filter-links li > a.current' ).removeClass( 'current' ); filteringBy.empty(); _.each( tags, function( tag ) { @@ -1469,7 +1468,7 @@ themes.view.Installer = themes.view.Appearance.extend({ // Get the checked filters // @return {array} of tags or false filtersChecked: function() { - var items = $( '.wp-filter-group' ).find( ':checkbox' ), + var items = $( '.filter-group' ).find( ':checkbox' ), tags = []; _.each( items.filter( ':checked' ), function( item ) { @@ -1478,14 +1477,14 @@ themes.view.Installer = themes.view.Appearance.extend({ // When no filters are checked, restore initial state and return if ( tags.length === 0 ) { - $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' ); - $( '.wp-filter-drawer .clear-filters' ).hide(); + $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' ); + $( '.filter-drawer .clear-filters' ).hide(); $( 'body' ).removeClass( 'filters-applied' ); return false; } - $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length ); - $( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); + $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length ); + $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); return tags; }, @@ -1494,7 +1493,7 @@ themes.view.Installer = themes.view.Appearance.extend({ // Overwrite search container class to append search // in new location - searchContainer: $( '.wp-filter' ), + searchContainer: $( '.wp-filter .search-form' ), uploader: function() { $( 'a.upload' ).on( 'click', function( event ) { @@ -1519,25 +1518,20 @@ themes.view.Installer = themes.view.Appearance.extend({ // If the filters section is opened and filters are checked // run the relevant query collapsing to filtered-by state - if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) { + if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) { return this.addFilter(); } this.clearSearch(); themes.router.navigate( themes.router.baseUrl( '' ) ); - $( 'body' ).toggleClass( 'show-filter-drawer' ); - }, - - // Expand/collapse each individual filter section - filterSection: function() { - $( event.target ).parent().toggleClass( 'open' ); + $( 'body' ).toggleClass( 'show-filters' ); }, // Clears all the checked filters // @uses filtersChecked() clearFilters: function( event ) { - var items = $( '.wp-filter-group' ).find( ':checkbox' ), + var items = $( '.filter-group' ).find( ':checkbox' ), self = this; event.preventDefault(); diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 1aa1725a98..2ca1c2870b 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -135,20 +135,22 @@ include(ABSPATH . 'wp-admin/admin-header.php');
-
+
-