sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make filter bar CSS less verbose and redundant. 

Also removes an unused handler in the theme feature filter.

see #28794.


git-svn-id: https://develop.svn.wordpress.org/trunk@29596 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2014-08-25 15:57:34 +00:00
parent e8d8b21cec
commit f187cf1dec
4 changed files with 112 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/wp-admin/css/common.css
View File

@ -934,22 +934,6 @@ th.action-links {
} }
/* Filter bar */ /* 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 { .wp-filter {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -971,13 +955,14 @@ th.action-links {
text-decoration: none; text-decoration: none;
} }
.wp-filter-count { .filter-count {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
min-width: 4em; min-width: 4em;
} }
.wp-filter-count .count { .title-count,
.filter-count .count {
display: inline-block; display: inline-block;
position: relative; position: relative;
top: -1px; top: -1px;
@ -990,17 +975,25 @@ th.action-links {
font-weight: 600; 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; display: inline-block;
margin: 0; margin: 0;
} }
.wp-filter-links li { .filter-links li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
.wp-filter-link { .filter-links li > a {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
padding: 15px 0; padding: 15px 0;
@ -1009,16 +1002,25 @@ th.action-links {
cursor: pointer; cursor: pointer;
} }
.wp-filter-links .current { .filter-links .current {
box-shadow: none;
border-bottom: 4px solid #666; border-bottom: 4px solid #666;
color: #222; color: #222;
} }
.wp-filter-search { .filter-links li > a:hover,
position: absolute; .filter-links li > a:focus,
top: 9px; .show-filters .filter-links a.current:hover,
right: 10px; .show-filters .filter-links a.current:focus {
left: auto; color: #2ea2cc;
}
.wp-filter .search-form {
float: right;
margin-top: 9px;
}
.wp-filter .search-form input[type="search"] {
padding: 3px 5px; padding: 3px 5px;
width: 280px; width: 280px;
font-size: 16px; font-size: 16px;
@ -1026,16 +1028,12 @@ th.action-links {
line-height: 1.5; line-height: 1.5;
} }
.wp-filter-no-results { .wp-filter .search-form select {
color: #999; height: 33px;
font-size: 18px; vertical-align: top;
font-style: normal;
margin: 0;
padding: 100px 0 0;
text-align: center;
} }
.wp-filter-drawer-toggle { .wp-filter .drawer-toggle {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
padding: 4px 6px; padding: 4px 6px;
@ -1043,7 +1041,7 @@ th.action-links {
cursor: pointer; cursor: pointer;
} }
.wp-filter-drawer-toggle:before { .wp-filter .drawer-toggle:before {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
content: "\f111"; content: "\f111";
@ -1063,15 +1061,16 @@ th.action-links {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.wp-filter-drawer-toggle:hover { .wp-filter .drawer-toggle:hover,
color: #777; .wp-filter .drawer-toggle:hover:before {
color: #2ea2cc;
} }
.wp-filter-drawer-toggle.current:before { .wp-filter .drawer-toggle.current:before {
color: #fff; color: #fff;
} }
.wp-filter-drawer { .filter-drawer {
display: none; display: none;
margin: 0 -20px; margin: 0 -20px;
padding: 20px; padding: 20px;
@ -1079,21 +1078,21 @@ th.action-links {
background: #fafafa; background: #fafafa;
} }
body.show-filter-drawer .wp-filter-drawer { .show-filters .filter-drawer {
display: block; display: block;
overflow: hidden; overflow: hidden;
} }
body.show-filter-drawer .wp-filter-drawer-toggle:hover, .show-filters .wp-filter .drawer-toggle:hover,
body.show-filter-drawer .wp-filter-drawer-toggle:focus { .show-filters .wp-filter .drawer-toggle:focus {
background: rgb(46, 162, 204); background: rgb(46, 162, 204);
} }
body.show-filter-drawer .wp-filter-link.current { .show-filters .filter-links a.current {
border-bottom: none; border-bottom: none;
} }
body.show-filter-drawer .wp-filter-drawer-toggle { .show-filters .wp-filter .drawer-toggle {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
border: none; border: none;
@ -1101,11 +1100,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle {
color: #fff; color: #fff;
} }
body.show-filter-drawer .wp-filter-drawer-toggle:before { .show-filters .wp-filter .drawer-toggle:before {
color: #fff; color: #fff;
} }
.wp-filter-group { .filter-group {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
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); box-shadow: 0 1px 1px rgba(0,0,0,0.04);
} }
.wp-filter-group-wide { .filter-group.wide {
width: 38%; width: 38%;
} }
.wp-filter-group-title { .filter-group h4 {
position: relative; position: relative;
margin: 0; margin: 0;
} }
.wp-filter-drawer ol { .filter-drawer ol {
margin: 20px 0 0; margin: 20px 0 0;
list-style-type: none; list-style-type: none;
font-size: 12px; font-size: 12px;
} }
.wp-filter-drawer li { .filter-drawer li {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 5px 0; margin: 5px 0;
@ -1143,11 +1142,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
list-style-type: none; list-style-type: none;
} }
.wp-filter-drawer-buttons { .filter-drawer .buttons {
margin-bottom: 20px; margin-bottom: 20px;
} }
.wp-filter .wp-filter-drawer-buttons .button span { .filter-drawer .buttons .button span {
display: inline-block; display: inline-block;
opacity: 0.8; opacity: 0.8;
font-size: 12px; font-size: 12px;
@ -1159,24 +1158,24 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
margin: 0 0 20px 10px; margin: 0 0 20px 10px;
} }
.wp-filter-by { .filtered-by {
display: none; display: none;
margin: 0; margin: 0;
} }
.wp-filter-by > span { .filtered-by > span {
font-weight: 600; font-weight: 600;
} }
.wp-filter-by a { .filtered-by a {
margin-left: 10px; margin-left: 10px;
} }
.wp-filter-by .tags { .filtered-by .tags {
display: inline; display: inline;
} }
.wp-filter-by .tag { .filtered-by .tag {
margin: 0 5px; margin: 0 5px;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
@ -1186,34 +1185,31 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
font-size: 11px; font-size: 11px;
} }
body.filters-applied .wp-filter-group, .filters-applied .filter-group,
body.filters-applied .wp-filter-drawer a.button, .filters-applied .filter-drawer .buttons,
body.filters-applied .wp-filter-drawer br { .filters-applied .filter-drawer br {
display: none !important; display: none !important;
} }
body.filters-applied .wp-filter-by { .filters-applied .filtered-by {
display: block; display: block;
} }
body.filters-applied .wp-filter-drawer { .filters-applied .filter-drawer {
padding: 20px; padding: 20px;
} }
body.show-filter-drawer .wp-filter-content, .show-filters .content-filterable,
body.show-filter-drawer.filters-applied.loading-content .wp-filter-content { .show-filters.filters-applied.loading-content .content-filterable,
.loading-content .content-filterable,
.error .content-filterable {
display: none; display: none;
} }
body.show-filter-drawer.filters-applied .wp-filter-content { .show-filters.filters-applied .content-filterable {
display: block; display: block;
} }
.loading-content .wp-filter-content,
.error .wp-filter-content {
display: none;
}
.loading-content .spinner { .loading-content .spinner {
display: block; display: block;
margin: 40px auto 0; margin: 40px auto 0;
@ -1221,30 +1217,29 @@ body.show-filter-drawer.filters-applied .wp-filter-content {
} }
@media only screen and (max-width: 1120px) { @media only screen and (max-width: 1120px) {
.wp-filter-search { .wp-filter .search-form {
position: static; float: none;
margin: 20px 0; margin: 20px 0;
width: 100%;
} }
.wp-filter-drawer { .filter-drawer {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.wp-filter-group { .filter-group {
margin-bottom: 0; margin-bottom: 0;
margin-top: 5px; margin-top: 5px;
width: 100%; width: 100%;
} }
.wp-filter-group li { .filter-group li {
margin: 10px 0; margin: 10px 0;
} }
} }
@media only screen and (max-width: 782px) { @media only screen and (max-width: 782px) {
.wp-filter-group, .filter-group,
.wp-filter-group li { .filter-group li {
width: 100%; width: 100%;
} }

50
src/wp-admin/js/theme.js
View File

@ -1288,8 +1288,8 @@ themes.view.InstallerSearch = themes.view.Search.extend({
request.tag = [ value.slice( 4 ) ]; request.tag = [ value.slice( 4 ) ];
} }
$( '.wp-filter-link.current' ).removeClass( 'current' ); $( '.filter-links li > a.current' ).removeClass( 'current' );
$( 'body' ).removeClass( 'show-filter-drawer filters-applied' ); $( 'body' ).removeClass( 'show-filters filters-applied' );
// Get the themes by sending Ajax POST request to api.wordpress.org/themes // Get the themes by sending Ajax POST request to api.wordpress.org/themes
// or searching the local cache // 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 // Register events for sorting and filters in theme-navigation
events: { events: {
'click .wp-filter-link': 'onSort', 'click .filter-links li > a': 'onSort',
'click .theme-filter': 'onFilter', 'click .theme-filter': 'onFilter',
'click .wp-filter-drawer-toggle': 'moreFilters', 'click .drawer-toggle': 'moreFilters',
'click .wp-filter-drawer .apply-filters': 'applyFilters', 'click .filter-drawer .apply-filters': 'applyFilters',
'click .wp-filter-group [type="checkbox"]': 'addFilter', 'click .filter-group [type="checkbox"]': 'addFilter',
'click .wp-filter-drawer .clear-filters': 'clearFilters', 'click .filter-drawer .clear-filters': 'clearFilters',
'click .wp-filter-group-title': 'filterSection', 'click .filtered-by': 'backToFilters'
'click .wp-filter-by a': 'backToFilters'
}, },
// Initial render method // Initial render method
@ -1386,7 +1385,7 @@ themes.view.Installer = themes.view.Appearance.extend({
event.preventDefault(); event.preventDefault();
$( 'body' ).removeClass( 'filters-applied show-filter-drawer' ); $( 'body' ).removeClass( 'filters-applied show-filters' );
// Bail if this is already active // Bail if this is already active
if ( $el.hasClass( this.activeClass ) ) { if ( $el.hasClass( this.activeClass ) ) {
@ -1402,7 +1401,7 @@ themes.view.Installer = themes.view.Appearance.extend({
sort: function( sort ) { sort: function( sort ) {
this.clearSearch(); 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 ); $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
this.browse( sort ); this.browse( sort );
@ -1419,7 +1418,7 @@ themes.view.Installer = themes.view.Appearance.extend({
return; return;
} }
$( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass ); $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
$el.addClass( this.activeClass ); $el.addClass( this.activeClass );
if ( ! filter ) { if ( ! filter ) {
@ -1446,14 +1445,14 @@ themes.view.Installer = themes.view.Appearance.extend({
var name, var name,
tags = this.filtersChecked(), tags = this.filtersChecked(),
request = { tag: tags }, request = { tag: tags },
filteringBy = $( '.wp-filter-by .tags' ); filteringBy = $( '.filtered-by .tags' );
if ( event ) { if ( event ) {
event.preventDefault(); event.preventDefault();
} }
$( 'body' ).addClass( 'filters-applied' ); $( 'body' ).addClass( 'filters-applied' );
$( '.wp-filter-link.current' ).removeClass( 'current' ); $( '.filter-links li > a.current' ).removeClass( 'current' );
filteringBy.empty(); filteringBy.empty();
_.each( tags, function( tag ) { _.each( tags, function( tag ) {
@ -1469,7 +1468,7 @@ themes.view.Installer = themes.view.Appearance.extend({
// Get the checked filters // Get the checked filters
// @return {array} of tags or false // @return {array} of tags or false
filtersChecked: function() { filtersChecked: function() {
var items = $( '.wp-filter-group' ).find( ':checkbox' ), var items = $( '.filter-group' ).find( ':checkbox' ),
tags = []; tags = [];
_.each( items.filter( ':checked' ), function( item ) { _.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 // When no filters are checked, restore initial state and return
if ( tags.length === 0 ) { if ( tags.length === 0 ) {
$( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' ); $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
$( '.wp-filter-drawer .clear-filters' ).hide(); $( '.filter-drawer .clear-filters' ).hide();
$( 'body' ).removeClass( 'filters-applied' ); $( 'body' ).removeClass( 'filters-applied' );
return false; return false;
} }
$( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length ); $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
$( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
return tags; return tags;
}, },
@ -1494,7 +1493,7 @@ themes.view.Installer = themes.view.Appearance.extend({
// Overwrite search container class to append search // Overwrite search container class to append search
// in new location // in new location
searchContainer: $( '.wp-filter' ), searchContainer: $( '.wp-filter .search-form' ),
uploader: function() { uploader: function() {
$( 'a.upload' ).on( 'click', function( event ) { $( '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 // If the filters section is opened and filters are checked
// run the relevant query collapsing to filtered-by state // 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(); return this.addFilter();
} }
this.clearSearch(); this.clearSearch();
themes.router.navigate( themes.router.baseUrl( '' ) ); themes.router.navigate( themes.router.baseUrl( '' ) );
$( 'body' ).toggleClass( 'show-filter-drawer' ); $( 'body' ).toggleClass( 'show-filters' );
},
// Expand/collapse each individual filter section
filterSection: function() {
$( event.target ).parent().toggleClass( 'open' );
}, },
// Clears all the checked filters // Clears all the checked filters
// @uses filtersChecked() // @uses filtersChecked()
clearFilters: function( event ) { clearFilters: function( event ) {
var items = $( '.wp-filter-group' ).find( ':checkbox' ), var items = $( '.filter-group' ).find( ':checkbox' ),
self = this; self = this;
event.preventDefault(); event.preventDefault();

28
src/wp-admin/theme-install.php
View File

@ -135,20 +135,22 @@ include(ABSPATH . 'wp-admin/admin-header.php');
</div> </div>
<div class="wp-filter"> <div class="wp-filter">
<div class="wp-filter-count"> <div class="filter-count">
<span class="count theme-count"></span> <span class="count theme-count"></span>
</div> </div>
<ul class="wp-filter-links"> <ul class="filter-links">
<li><a class="wp-filter-link" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li> <li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
<li><a class="wp-filter-link" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li> <li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
<li><a class="wp-filter-link" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li> <li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
</ul> </ul>
<a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a> <a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
<div class="wp-filter-drawer"> <div class="search-form"></div>
<div class="wp-filter-drawer-buttons">
<div class="filter-drawer">
<div class="buttons">
<a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a> <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
<a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a> <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
</div> </div>
@ -156,12 +158,12 @@ include(ABSPATH . 'wp-admin/admin-header.php');
$feature_list = get_theme_feature_list(); $feature_list = get_theme_feature_list();
foreach ( $feature_list as $feature_name => $features ) { foreach ( $feature_list as $feature_name => $features ) {
if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
echo '<div class="wp-filter-group wp-filter-group-wide">'; echo '<div class="filter-group wide">';
} else { } else {
echo '<div class="wp-filter-group">'; echo '<div class="filter-group">';
} }
$feature_name = esc_html( $feature_name ); $feature_name = esc_html( $feature_name );
echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>'; echo '<h4>' . $feature_name . '</h4>';
echo '<ol class="feature-group">'; echo '<ol class="feature-group">';
foreach ( $features as $feature => $feature_name ) { foreach ( $features as $feature => $feature_name ) {
$feature = esc_attr( $feature ); $feature = esc_attr( $feature );
@ -172,14 +174,14 @@ include(ABSPATH . 'wp-admin/admin-header.php');
echo '</div>'; echo '</div>';
} }
?> ?>
<div class="wp-filter-by"> <div class="filtered-by">
<span><?php _e( 'Filtering by:' ); ?></span> <span><?php _e( 'Filtering by:' ); ?></span>
<div class="tags"></div> <div class="tags"></div>
<a href="#"><?php _e( 'Edit' ); ?></a> <a href="#"><?php _e( 'Edit' ); ?></a>
</div> </div>
</div> </div>
</div> </div>
<div class="theme-browser wp-filter-content"></div> <div class="theme-browser content-filterable"></div>
<div class="theme-install-overlay wp-full-overlay expanded"></div> <div class="theme-install-overlay wp-full-overlay expanded"></div>
<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p> <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>

2
src/wp-admin/themes.php
View File

@ -117,7 +117,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<div class="wrap"> <div class="wrap">
<h2><?php esc_html_e( 'Themes' ); ?> <h2><?php esc_html_e( 'Themes' ); ?>
<span class="wp-title-count theme-count"><?php echo count( $themes ); ?></span> <span class="title-count theme-count"><?php echo count( $themes ); ?></span>
<?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?> <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
<a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a> <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
<?php endif; ?> <?php endif; ?>