diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index a6ae29dc82..b78d727a3d 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -1770,7 +1770,7 @@ body.full-overlay-active { } #customize-container iframe, -#theme-installer iframe { +.theme-install-overlay iframe { height: 100%; width: 100%; z-index: 20; @@ -1786,11 +1786,11 @@ body.full-overlay-active { margin-top: 0; } -#theme-installer { +.theme-install-overlay { display: none; } -#theme-installer.single-theme { +.theme-install-overlay.single-theme { display: block; } @@ -1803,7 +1803,7 @@ body.full-overlay-active { padding-top: 15px; } -#theme-installer .install-theme-info { +.theme-install-overlay .install-theme-info { display: block; } @@ -1846,22 +1846,22 @@ body.full-overlay-active { max-width: 100%; } -#theme-installer .wp-full-overlay-header { +.theme-install-overlay .wp-full-overlay-header { margin-top: 9px; } -#theme-installer .wp-full-overlay-header .theme-install { +.theme-install-overlay .wp-full-overlay-header .theme-install { float: right; /* For when .theme-install is a span rather than a.button-primary (already installed theme) */ line-height: 26px; } -#theme-installer .wp-full-overlay-sidebar { +.theme-install-overlay .wp-full-overlay-sidebar { background: #EEE; 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; -webkit-background-size: 20px 20px; background-size: 20px 20px; @@ -1884,7 +1884,7 @@ body.full-overlay-active { } .customize-loading #customize-container, - #theme-installer .wp-full-overlay-main { + .theme-install-overlay .wp-full-overlay-main { background-image: url(../images/spinner-2x.gif); } } diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index edb9bb61e6..794f97c8d4 100644 --- a/src/wp-admin/js/theme.js +++ b/src/wp-admin/js/theme.js @@ -443,6 +443,22 @@ themes.view.Theme = wp.Backbone.View.extend({ 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 ) { var self = this, current, preview; @@ -511,6 +527,7 @@ themes.view.Theme = wp.Backbone.View.extend({ // Render and append. preview.render(); + this.setNavButtonsState(); $( 'div.wrap' ).append( preview.el ); $( '.next-theme' ).focus(); }) @@ -539,9 +556,11 @@ themes.view.Theme = wp.Backbone.View.extend({ // Render and append. preview.render(); + this.setNavButtonsState(); $( 'div.wrap' ).append( preview.el ); $( '.previous-theme' ).focus(); }); + self.setNavButtonsState(); } }); @@ -676,7 +695,7 @@ themes.view.Details = wp.Backbone.View.extend({ this.trigger( 'theme:collapse' ); }, - // Confirmation dialoge for deleting a theme + // Confirmation dialog for deleting a theme deleteTheme: function() { return confirm( themes.data.settings.confirmDelete ); }, @@ -684,11 +703,13 @@ themes.view.Details = wp.Backbone.View.extend({ nextTheme: function() { var self = this; self.trigger( 'theme:next', self.model.cid ); + return false; }, previousTheme: function() { var self = this; self.trigger( 'theme:previous', self.model.cid ); + return false; }, // 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({ className: 'wp-full-overlay expanded', - el: '#theme-installer', + el: '.theme-install-overlay', events: { 'click .close-full-overlay': 'close', @@ -725,20 +746,28 @@ themes.view.Preview = themes.view.Details.extend({ html: themes.template( 'theme-preview' ), render: function() { - var data = this.model.toJSON(); + var data = this.model.toJSON(), + self = this; this.$el.html( this.html( data ) ); themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } ); 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: 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 if ( themes.focusedTheme ) { diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index da8c208fdd..18d6ff4c09 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -158,7 +158,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
- +