Theme Installer fixes:
* Better more filters section. props sonjanyc for some mockups. * Better handling of no results. * Use # for hrefs. props matveb. see #27055. Built from https://develop.svn.wordpress.org/trunk@27896 git-svn-id: http://core.svn.wordpress.org/trunk@27727 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin
parent
6ec61c7506
commit
d330c402c8
|
|
@ -1150,8 +1150,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
|
|||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
-webkit-transition: border-color .1s ease-in;
|
||||
transition: border-color .1s ease-in;
|
||||
}
|
||||
.theme-section.current,
|
||||
.theme-filter.current {
|
||||
|
|
@ -1167,8 +1165,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
|
|||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
-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,
|
||||
body.more-filters-opened .more-filters:before {
|
||||
|
|
@ -1177,8 +1173,6 @@ body.more-filters-opened .more-filters:before {
|
|||
border-radius: 2px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
-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:hover,
|
||||
|
|
@ -1230,20 +1224,97 @@ body.more-filters-opened .more-filters:focus:before {
|
|||
body.more-filters-opened .more-filters-container {
|
||||
display: block;
|
||||
}
|
||||
body.more-filters-opened .theme-section.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
body.more-filters-opened .theme-browser,
|
||||
body.more-filters-opened.filters-applied.loading-themes .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
body.more-filters-opened.filters-applied .theme-browser {
|
||||
display: block;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
width: 20%;
|
||||
width: 19%;
|
||||
background: #fff;
|
||||
margin: 0 0 0 1%;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
padding: 10px;
|
||||
}
|
||||
.more-filters-container .feature-name {
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.more-filters-container ol {
|
||||
list-style-type: none;
|
||||
margin: 20px 0 0;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
.theme-navigation .more-filters-container .apply-filters {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.theme-navigation .more-filters-container .clear-filters {
|
||||
display: none;
|
||||
margin: 20px 10px 0 0;
|
||||
}
|
||||
.more-filters-container .apply-filters span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-indent: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.more-filters-container .filtering-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
.more-filters-container .filtering-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.more-filters-container .filtering-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
.more-filters-container .filtering-by .tag {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
font-size: 11px;
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filters-group,
|
||||
body.filters-applied .more-filters-container a,
|
||||
body.filters-applied .more-filters-container br {
|
||||
display: none !important;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filtering-by {
|
||||
display: block;
|
||||
}
|
||||
body.filters-applied .more-filters-container {
|
||||
padding: 20px;
|
||||
}
|
||||
p.no-themes {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
body.no-results p.no-themes {
|
||||
display: block;
|
||||
}
|
||||
body.show-upload-theme p.no-themes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.theme-install-php .add-new-theme {
|
||||
display: none !important;
|
||||
|
|
@ -1268,13 +1339,21 @@ body.more-filters-opened .more-filters-container {
|
|||
text-align: right;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
width: 50%;
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 49%;
|
||||
}
|
||||
.more-filters-container .filters-group:nth-child(3n) {
|
||||
clear: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.more-filters-container .filters-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
|
@ -1717,6 +1796,7 @@ body.full-overlay-active {
|
|||
float: right;
|
||||
color: #777;
|
||||
line-height: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#theme-installer .wp-full-overlay-header {
|
||||
|
|
|
|||
|
|
@ -1150,8 +1150,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
|
|||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
-webkit-transition: border-color .1s ease-in;
|
||||
transition: border-color .1s ease-in;
|
||||
}
|
||||
.theme-section.current,
|
||||
.theme-filter.current {
|
||||
|
|
@ -1167,8 +1165,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
|
|||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
-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,
|
||||
body.more-filters-opened .more-filters:before {
|
||||
|
|
@ -1177,8 +1173,6 @@ body.more-filters-opened .more-filters:before {
|
|||
border-radius: 2px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
-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:hover,
|
||||
|
|
@ -1230,20 +1224,97 @@ body.more-filters-opened .more-filters:focus:before {
|
|||
body.more-filters-opened .more-filters-container {
|
||||
display: block;
|
||||
}
|
||||
body.more-filters-opened .theme-section.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
body.more-filters-opened .theme-browser,
|
||||
body.more-filters-opened.filters-applied.loading-themes .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
body.more-filters-opened.filters-applied .theme-browser {
|
||||
display: block;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 20%;
|
||||
width: 19%;
|
||||
background: #fff;
|
||||
margin: 0 1% 0 0;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
padding: 10px;
|
||||
}
|
||||
.more-filters-container .feature-name {
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.more-filters-container ol {
|
||||
list-style-type: none;
|
||||
margin: 20px 0 0;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
.theme-navigation .more-filters-container .apply-filters {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.theme-navigation .more-filters-container .clear-filters {
|
||||
display: none;
|
||||
margin: 20px 0 0 10px;
|
||||
}
|
||||
.more-filters-container .apply-filters span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-indent: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.more-filters-container .filtering-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
.more-filters-container .filtering-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.more-filters-container .filtering-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
.more-filters-container .filtering-by .tag {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
font-size: 11px;
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filters-group,
|
||||
body.filters-applied .more-filters-container a,
|
||||
body.filters-applied .more-filters-container br {
|
||||
display: none !important;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filtering-by {
|
||||
display: block;
|
||||
}
|
||||
body.filters-applied .more-filters-container {
|
||||
padding: 20px;
|
||||
}
|
||||
p.no-themes {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
body.no-results p.no-themes {
|
||||
display: block;
|
||||
}
|
||||
body.show-upload-theme p.no-themes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.theme-install-php .add-new-theme {
|
||||
display: none !important;
|
||||
|
|
@ -1268,13 +1339,21 @@ body.more-filters-opened .more-filters-container {
|
|||
text-align: left;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
width: 50%;
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 49%;
|
||||
}
|
||||
.more-filters-container .filters-group:nth-child(3n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.more-filters-container .filters-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
|
@ -1717,6 +1796,7 @@ body.full-overlay-active {
|
|||
float: left;
|
||||
color: #777;
|
||||
line-height: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#theme-installer .wp-full-overlay-header {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -255,6 +255,10 @@ themes.Collection = Backbone.Collection.extend({
|
|||
self.trigger( 'update' );
|
||||
self.trigger( 'query:success', count );
|
||||
|
||||
if ( data.themes.length === 0 ) {
|
||||
self.trigger( 'query:empty' );
|
||||
}
|
||||
|
||||
// Store the results and the query request
|
||||
queries.push( { themes: data.themes, request: request } );
|
||||
}).fail( function() {
|
||||
|
|
@ -277,6 +281,12 @@ themes.Collection = Backbone.Collection.extend({
|
|||
});
|
||||
}
|
||||
|
||||
if ( query.themes.length === 0 ) {
|
||||
self.trigger( 'query:empty' );
|
||||
} else {
|
||||
$( 'body' ).removeClass( 'no-results' );
|
||||
}
|
||||
|
||||
// Only trigger an update event since we already have the themes
|
||||
// on our cached object
|
||||
this.reset( query.themes );
|
||||
|
|
@ -330,7 +340,7 @@ themes.Collection = Backbone.Collection.extend({
|
|||
beforeSend: function() {
|
||||
if ( ! paginated ) {
|
||||
// Spin it
|
||||
$( 'body' ).addClass( 'loading-themes' );
|
||||
$( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -657,6 +667,7 @@ themes.view.Preview = wp.Backbone.View.extend({
|
|||
},
|
||||
|
||||
collapse: function() {
|
||||
|
||||
this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
|
||||
return false;
|
||||
}
|
||||
|
|
@ -704,6 +715,10 @@ themes.view.Themes = wp.Backbone.View.extend({
|
|||
}
|
||||
});
|
||||
|
||||
this.listenTo( self.collection, 'query:empty', function() {
|
||||
$( 'body' ).addClass( 'no-results' );
|
||||
});
|
||||
|
||||
this.listenTo( this.parent, 'theme:scroll', function() {
|
||||
self.renderThemes( self.parent.page );
|
||||
});
|
||||
|
|
@ -1143,7 +1158,10 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
'click .theme-section': 'onSort',
|
||||
'click .theme-filter': 'onFilter',
|
||||
'click .more-filters': 'moreFilters',
|
||||
'click [type="checkbox"]': 'addFilter'
|
||||
'click .apply-filters': 'addFilter',
|
||||
'click [type="checkbox"]': 'filtersChecked',
|
||||
'click .clear-filters': 'clearFilters',
|
||||
'click .feature-name': 'filterSection'
|
||||
},
|
||||
|
||||
// Handles all the rendering of the public theme directory
|
||||
|
|
@ -1217,6 +1235,8 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
|
||||
event.preventDefault();
|
||||
|
||||
$( 'body' ).removeClass( 'filters-applied more-filters-opened' );
|
||||
|
||||
// Bail if this is already active
|
||||
if ( $el.hasClass( this.activeClass ) ) {
|
||||
return;
|
||||
|
|
@ -1266,16 +1286,31 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
},
|
||||
|
||||
// Clicking on a checkbox triggers a tag request
|
||||
addFilter: function() {
|
||||
var tags = this.filtersChecked(),
|
||||
request = { tag: tags };
|
||||
addFilter: function( event ) {
|
||||
var name,
|
||||
tags = this.filtersChecked(),
|
||||
request = { tag: tags },
|
||||
filteringBy = $( '.filtering-by .tags' );
|
||||
|
||||
if ( event ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
$( 'body' ).addClass( 'filters-applied' );
|
||||
filteringBy.empty();
|
||||
|
||||
_.each( tags, function( tag ) {
|
||||
name = $( 'label[for="feature-id-' + tag + '"]' ).text();
|
||||
filteringBy.append( '<span class="tag">' + name + '</span>' );
|
||||
});
|
||||
|
||||
// Get the themes by sending Ajax POST request to api.wordpress.org/themes
|
||||
// or searching the local cache
|
||||
this.collection.query( request );
|
||||
},
|
||||
|
||||
// Get the checked filters and return an array
|
||||
// Get the checked filters
|
||||
// @return {array} of tags or false
|
||||
filtersChecked: function() {
|
||||
var items = $( '.feature-group' ).find( ':checkbox' ),
|
||||
tags = [];
|
||||
|
|
@ -1284,6 +1319,17 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
tags.push( $( item ).prop( 'value' ) );
|
||||
});
|
||||
|
||||
// When no filters are checked, restore initial state and return
|
||||
if ( tags.length === 0 ) {
|
||||
$( '.apply-filters' ).find( 'span' ).text( '' );
|
||||
$( '.clear-filters' ).hide();
|
||||
$( 'body' ).removeClass( 'filters-applied' );
|
||||
return false;
|
||||
}
|
||||
|
||||
$( '.apply-filters' ).find( 'span' ).text( tags.length );
|
||||
$( '.clear-filters' ).css( 'display', 'inline-block' );
|
||||
|
||||
return tags;
|
||||
},
|
||||
|
||||
|
|
@ -1304,8 +1350,40 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
});
|
||||
},
|
||||
|
||||
moreFilters: function() {
|
||||
// Toggle the full filters navigation
|
||||
moreFilters: function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
|
||||
return $( 'body' ).removeClass( 'filters-applied' );
|
||||
}
|
||||
|
||||
// If the filters section is opened and filters are checked
|
||||
// run the relevant query collapsing to filtered-by state
|
||||
if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
|
||||
return this.addFilter();
|
||||
}
|
||||
|
||||
$( 'body' ).toggleClass( 'more-filters-opened' );
|
||||
},
|
||||
|
||||
// Expand/collapse each individual filter section
|
||||
filterSection: function() {
|
||||
$( event.target ).parent().toggleClass( 'open' );
|
||||
},
|
||||
|
||||
// Clears all the checked filters
|
||||
// @uses filtersChecked()
|
||||
clearFilters: function( event ) {
|
||||
var items = $( '.feature-group' ).find( ':checkbox' ),
|
||||
self = this;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
_.each( items.filter( ':checked' ), function( item ) {
|
||||
$( item ).prop( 'checked', false );
|
||||
return self.filtersChecked();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -118,8 +118,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
|||
<a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
|
||||
<a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
|
||||
<div class="theme-top-filters">
|
||||
<!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
|
||||
<span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
|
||||
<!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
|
||||
<span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
|
||||
<a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
|
||||
</div>
|
||||
<div class="more-filters-container">
|
||||
|
|
@ -140,12 +140,19 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
|||
}
|
||||
?>
|
||||
<br class="clear" />
|
||||
<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>
|
||||
<div class="filtering-by">
|
||||
<span><?php _e( 'Filtering by:' ); ?></span>
|
||||
<div class="tags"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-browser"></div>
|
||||
<div class="theme-overlay"></div>
|
||||
<div id="theme-installer" class="wp-full-overlay expanded"></div>
|
||||
|
||||
<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
|
||||
<span class="spinner"></span>
|
||||
|
||||
<br class="clear" />
|
||||
|
|
@ -188,7 +195,7 @@ if ( $tab ) {
|
|||
<script id="tmpl-theme-preview" type="text/template">
|
||||
<div class="wp-full-overlay-sidebar">
|
||||
<div class="wp-full-overlay-header">
|
||||
<a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
|
||||
<a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
|
||||
<a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
|
||||
</div>
|
||||
<div class="wp-full-overlay-sidebar-content">
|
||||
|
|
@ -213,7 +220,7 @@ if ( $tab ) {
|
|||
</div>
|
||||
</div>
|
||||
<div class="wp-full-overlay-footer">
|
||||
<a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
|
||||
<a href="#" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
|
||||
<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
|
||||
<span class="collapse-sidebar-arrow"></span>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue