WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Theme Installer: Disable prev/next buttons on first/last themes, add Esc handling, use IDs. 

props adamsilverstein, DH-Shredder.
fixes #27521.

Built from https://develop.svn.wordpress.org/trunk@28033


git-svn-id: http://core.svn.wordpress.org/trunk@27863 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2014-04-08 03:57:15 +00:00
parent 819da2ac6d
commit 658032c9f9
7 changed files with 56 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
wp-admin/css/themes-rtl.css
View File

@ -1770,7 +1770,7 @@ body.full-overlay-active {
} }
#customize-container iframe, #customize-container iframe,
#theme-installer iframe { .theme-install-overlay iframe {
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 20; z-index: 20;
@ -1786,11 +1786,11 @@ body.full-overlay-active {
margin-top: 0; margin-top: 0;
} }
#theme-installer { .theme-install-overlay {
display: none; display: none;
} }
#theme-installer.single-theme { .theme-install-overlay.single-theme {
display: block; display: block;
} }
@ -1803,7 +1803,7 @@ body.full-overlay-active {
padding-top: 15px; padding-top: 15px;
} }
#theme-installer .install-theme-info { .theme-install-overlay .install-theme-info {
display: block; display: block;
} }
@ -1846,22 +1846,22 @@ body.full-overlay-active {
max-width: 100%; max-width: 100%;
} }
#theme-installer .wp-full-overlay-header { .theme-install-overlay .wp-full-overlay-header {
margin-top: 9px; margin-top: 9px;
} }
#theme-installer .wp-full-overlay-header .theme-install { .theme-install-overlay .wp-full-overlay-header .theme-install {
float: left; float: left;
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */ /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
line-height: 26px; line-height: 26px;
} }
#theme-installer .wp-full-overlay-sidebar { .theme-install-overlay .wp-full-overlay-sidebar {
background: #EEE; background: #EEE;
border-left: 1px solid #DDD; border-left: 1px solid #DDD;
} }
#theme-installer .wp-full-overlay-main { .theme-install-overlay .wp-full-overlay-main {
background: #fff url(../images/spinner.gif) no-repeat center center; background: #fff url(../images/spinner.gif) no-repeat center center;
-webkit-background-size: 20px 20px; -webkit-background-size: 20px 20px;
background-size: 20px 20px; background-size: 20px 20px;
@ -1884,7 +1884,7 @@ body.full-overlay-active {
} }
.customize-loading #customize-container, .customize-loading #customize-container,
#theme-installer .wp-full-overlay-main { .theme-install-overlay .wp-full-overlay-main {
background-image: url(../images/spinner-2x.gif); background-image: url(../images/spinner-2x.gif);
} }
} }

18
wp-admin/css/themes.css
View File

@ -1770,7 +1770,7 @@ body.full-overlay-active {
} }
#customize-container iframe, #customize-container iframe,
#theme-installer iframe { .theme-install-overlay iframe {
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 20; z-index: 20;
@ -1786,11 +1786,11 @@ body.full-overlay-active {
margin-top: 0; margin-top: 0;
} }
#theme-installer { .theme-install-overlay {
display: none; display: none;
} }
#theme-installer.single-theme { .theme-install-overlay.single-theme {
display: block; display: block;
} }
@ -1803,7 +1803,7 @@ body.full-overlay-active {
padding-top: 15px; padding-top: 15px;
} }
#theme-installer .install-theme-info { .theme-install-overlay .install-theme-info {
display: block; display: block;
} }
@ -1846,22 +1846,22 @@ body.full-overlay-active {
max-width: 100%; max-width: 100%;
} }
#theme-installer .wp-full-overlay-header { .theme-install-overlay .wp-full-overlay-header {
margin-top: 9px; margin-top: 9px;
} }
#theme-installer .wp-full-overlay-header .theme-install { .theme-install-overlay .wp-full-overlay-header .theme-install {
float: right; float: right;
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */ /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
line-height: 26px; line-height: 26px;
} }
#theme-installer .wp-full-overlay-sidebar { .theme-install-overlay .wp-full-overlay-sidebar {
background: #EEE; background: #EEE;
border-right: 1px solid #DDD; border-right: 1px solid #DDD;
} }
#theme-installer .wp-full-overlay-main { .theme-install-overlay .wp-full-overlay-main {
background: #fff url(../images/spinner.gif) no-repeat center center; background: #fff url(../images/spinner.gif) no-repeat center center;
-webkit-background-size: 20px 20px; -webkit-background-size: 20px 20px;
background-size: 20px 20px; background-size: 20px 20px;
@ -1884,7 +1884,7 @@ body.full-overlay-active {
} }
.customize-loading #customize-container, .customize-loading #customize-container,
#theme-installer .wp-full-overlay-main { .theme-install-overlay .wp-full-overlay-main {
background-image: url(../images/spinner-2x.gif); background-image: url(../images/spinner-2x.gif);
} }
} }

2
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
wp-admin/js/theme.js
View File

@ -443,6 +443,22 @@ themes.view.Theme = wp.Backbone.View.extend({
this.touchDrag = true; this.touchDrag = true;
}, },
// Handles .disabled classes for previous/next buttons in theme installer preview
setNavButtonsState: function() {
var $themeInstaller = $( '.theme-install-overlay' ),
current = _.isUndefined( this.current ) ? this.model : this.current;
// Disable previous at the zero position
if ( 0 === this.model.collection.indexOf( current ) ) {
$themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
}
// Disable next if the next model is undefined
if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
$themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
}
},
preview: function( event ) { preview: function( event ) {
var self = this, var self = this,
current, preview; current, preview;
@ -511,6 +527,7 @@ themes.view.Theme = wp.Backbone.View.extend({
// Render and append. // Render and append.
preview.render(); preview.render();
this.setNavButtonsState();
$( 'div.wrap' ).append( preview.el ); $( 'div.wrap' ).append( preview.el );
$( '.next-theme' ).focus(); $( '.next-theme' ).focus();
}) })
@ -539,9 +556,11 @@ themes.view.Theme = wp.Backbone.View.extend({
// Render and append. // Render and append.
preview.render(); preview.render();
this.setNavButtonsState();
$( 'div.wrap' ).append( preview.el ); $( 'div.wrap' ).append( preview.el );
$( '.previous-theme' ).focus(); $( '.previous-theme' ).focus();
}); });
self.setNavButtonsState();
} }
}); });
@ -676,7 +695,7 @@ themes.view.Details = wp.Backbone.View.extend({
this.trigger( 'theme:collapse' ); this.trigger( 'theme:collapse' );
}, },
// Confirmation dialoge for deleting a theme // Confirmation dialog for deleting a theme
deleteTheme: function() { deleteTheme: function() {
return confirm( themes.data.settings.confirmDelete ); return confirm( themes.data.settings.confirmDelete );
}, },
@ -684,11 +703,13 @@ themes.view.Details = wp.Backbone.View.extend({
nextTheme: function() { nextTheme: function() {
var self = this; var self = this;
self.trigger( 'theme:next', self.model.cid ); self.trigger( 'theme:next', self.model.cid );
return false;
}, },
previousTheme: function() { previousTheme: function() {
var self = this; var self = this;
self.trigger( 'theme:previous', self.model.cid ); self.trigger( 'theme:previous', self.model.cid );
return false;
}, },
// Checks if the theme screenshot is the old 300px width version // Checks if the theme screenshot is the old 300px width version
@ -712,7 +733,7 @@ themes.view.Details = wp.Backbone.View.extend({
themes.view.Preview = themes.view.Details.extend({ themes.view.Preview = themes.view.Details.extend({
className: 'wp-full-overlay expanded', className: 'wp-full-overlay expanded',
el: '#theme-installer', el: '.theme-install-overlay',
events: { events: {
'click .close-full-overlay': 'close', 'click .close-full-overlay': 'close',
@ -725,20 +746,28 @@ themes.view.Preview = themes.view.Details.extend({
html: themes.template( 'theme-preview' ), html: themes.template( 'theme-preview' ),
render: function() { render: function() {
var data = this.model.toJSON(); var data = this.model.toJSON(),
self = this;
this.$el.html( this.html( data ) ); this.$el.html( this.html( data ) );
themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } ); themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } );
this.$el.fadeIn( 200, function() { this.$el.fadeIn( 200, function() {
$( 'body' ).addClass( 'theme-installer-active full-overlay-active' ); $( 'body' )
.addClass( 'theme-installer-active full-overlay-active' )
.on( 'keyup.overlay', function( event ) {
// Pressing the escape key closes the preview
if ( event.keyCode === 27 ) {
self.close();
}
});
$( '.close-full-overlay' ).focus(); $( '.close-full-overlay' ).focus();
}); });
}, },
close: function() { close: function() {
this.$el.fadeOut( 200, function() { this.$el.fadeOut( 200, function() {
$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ); $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ).off( 'keyup.overlay' );
// Return focus to the theme div // Return focus to the theme div
if ( themes.focusedTheme ) { if ( themes.focusedTheme ) {

2
wp-admin/js/theme.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/theme-install.php
View File

@ -158,7 +158,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
</div> </div>
</div> </div>
<div class="theme-browser"></div> <div class="theme-browser"></div>
<div id="theme-installer" class="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>
<span class="spinner"></span> <span class="spinner"></span>