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
This commit is contained in:
Andrew Nacin
parent
0963ea19a0
commit
3217fa545b
@ -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;
|
||||
}
|
||||
|
||||
@ -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( '<div class="error"><p>' + l10n.error + '</p></div>' );
|
||||
});
|
||||
},
|
||||
|
||||
// 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();
|
||||
},
|
||||
|
||||
|
||||
@ -104,7 +104,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
||||
<div class="wrap">
|
||||
<h2>
|
||||
<?php echo esc_html( $title ); ?>
|
||||
<a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
|
||||
<a class="upload add-new-h2"><?php esc_html_e( 'Upload Theme' ); ?></a>
|
||||
<a class="browse-themes add-new-h2"><?php esc_html_e( 'Browse' ); ?></a>
|
||||
</h2>
|
||||
|
||||
<div class="upload-theme">
|
||||
@ -117,12 +118,28 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
||||
<span class="theme-section" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></span>
|
||||
<span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
|
||||
<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 more-filters">More</span>
|
||||
<!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
|
||||
<span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
|
||||
<span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
|
||||
</div>
|
||||
<div class="more-filters-container">
|
||||
Display more filters.
|
||||
<?php
|
||||
$feature_list = get_theme_feature_list();
|
||||
foreach ( $feature_list as $feature_name => $features ) {
|
||||
echo '<div class="filters-group">';
|
||||
$feature_name = esc_html( $feature_name );
|
||||
echo '<h4 class="feature-name">' . $feature_name . '</h4>';
|
||||
echo '<ol class="feature-group">';
|
||||
foreach ( $features as $feature => $feature_name ) {
|
||||
$feature = esc_attr( $feature );
|
||||
echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
|
||||
echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
|
||||
}
|
||||
echo '</ol>';
|
||||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
<br class="clear" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-browser"></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user