Skip to content

Commit 9fab416

Browse files
nacinnacin
committed
Theme installer keyboard fixes. Updates [28033] and [28036].
props matveb. see #27521. git-svn-id: https://develop.svn.wordpress.org/trunk@28049 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 468c9d2 commit 9fab416

2 files changed

Lines changed: 49 additions & 45 deletions

File tree

‎src/wp-admin/css/themes.css‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1077,23 +1077,15 @@ body.folded .theme-overlay .theme-wrap {
10771077
------------------------------------------------------------------------------*/
10781078

10791079
/* Already installed theme */
1080-
.theme-browser .theme.is-installed {
1081-
cursor: default;
1082-
}
10831080
.theme-browser .theme .theme-installed {
10841081
background: #0074a2;
10851082
}
10861083
.theme-browser .theme .theme-installed:before {
10871084
content: '\f147';
10881085
}
1089-
.theme-browser .theme.is-installed .theme-actions .button-primary,
1090-
.theme-browser.rendered .theme.is-installed .more-details {
1086+
.theme-browser .theme.is-installed .theme-actions .button-primary {
10911087
display: none !important;
10921088
}
1093-
.theme-browser.rendered .theme.is-installed:hover .theme-screenshot img,
1094-
.theme-browser.rendered .theme.is-installed:focus .theme-screenshot img {
1095-
opacity: 1 !important;
1096-
}
10971089

10981090
.theme-navigation {
10991091
background: #fff;

‎src/wp-admin/js/theme.js‎

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -442,22 +442,6 @@ themes.view.Theme = wp.Backbone.View.extend({
442442
this.touchDrag = true;
443443
},
444444

445-
// Handles .disabled classes for previous/next buttons in theme installer preview
446-
setNavButtonsState: function() {
447-
var $themeInstaller = $( '.theme-install-overlay' ),
448-
current = _.isUndefined( this.current ) ? this.model : this.current;
449-
450-
// Disable previous at the zero position
451-
if ( 0 === this.model.collection.indexOf( current ) ) {
452-
$themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
453-
}
454-
455-
// Disable next if the next model is undefined
456-
if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
457-
$themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
458-
}
459-
},
460-
461445
preview: function( event ) {
462446
var self = this,
463447
current, preview;
@@ -496,6 +480,7 @@ themes.view.Theme = wp.Backbone.View.extend({
496480

497481
// Render the view and append it.
498482
preview.render();
483+
this.setNavButtonsState();
499484
$( 'div.wrap' ).append( preview.el );
500485

501486
// Listen to our preview object
@@ -535,6 +520,11 @@ themes.view.Theme = wp.Backbone.View.extend({
535520
// Keep track of current theme model.
536521
current = self.model;
537522

523+
// Bail early if we are at the beginning of the collection
524+
if ( self.model.collection.indexOf( self.current ) === 0 ) {
525+
return;
526+
}
527+
538528
// If we have ventured away from current model update the current model position.
539529
if ( ! _.isUndefined( self.current ) ) {
540530
current = self.current;
@@ -559,7 +549,26 @@ themes.view.Theme = wp.Backbone.View.extend({
559549
$( 'div.wrap' ).append( preview.el );
560550
$( '.previous-theme' ).focus();
561551
});
562-
self.setNavButtonsState();
552+
553+
this.listenTo( preview, 'preview:close', function() {
554+
self.current = self.model
555+
});
556+
},
557+
558+
// Handles .disabled classes for previous/next buttons in theme installer preview
559+
setNavButtonsState: function() {
560+
var $themeInstaller = $( '.theme-install-overlay' ),
561+
current = _.isUndefined( this.current ) ? this.model : this.current;
562+
563+
// Disable previous at the zero position
564+
if ( 0 === this.model.collection.indexOf( current ) ) {
565+
$themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
566+
}
567+
568+
// Disable next if the next model is undefined
569+
if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
570+
$themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
571+
}
563572
}
564573
});
565574

@@ -738,7 +747,8 @@ themes.view.Preview = themes.view.Details.extend({
738747
'click .close-full-overlay': 'close',
739748
'click .collapse-sidebar': 'collapse',
740749
'click .previous-theme': 'previousTheme',
741-
'click .next-theme': 'nextTheme'
750+
'click .next-theme': 'nextTheme',
751+
'keyup': 'keyEvent'
742752
},
743753

744754
// The HTML template for the theme preview
@@ -752,30 +762,14 @@ themes.view.Preview = themes.view.Details.extend({
752762
themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } );
753763

754764
this.$el.fadeIn( 200, function() {
755-
$( 'body' )
756-
.addClass( 'theme-installer-active full-overlay-active' )
757-
.on( 'keyup.overlay', function( event ) {
758-
// The escape key closes the preview
759-
if ( event.keyCode === 27 ) {
760-
self.close();
761-
}
762-
// The right arrow key, next theme
763-
if ( event.keyCode === 39 ) {
764-
self.nextTheme();
765-
}
766-
767-
// The left arrow key, previous theme
768-
if ( event.keyCode === 37 ) {
769-
self.previousTheme();
770-
}
771-
});
765+
$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
772766
$( '.close-full-overlay' ).focus();
773767
});
774768
},
775769

776770
close: function() {
777771
this.$el.fadeOut( 200, function() {
778-
$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' ).off( 'keyup.overlay' );
772+
$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
779773

780774
// Return focus to the theme div
781775
if ( themes.focusedTheme ) {
@@ -784,13 +778,31 @@ themes.view.Preview = themes.view.Details.extend({
784778
});
785779

786780
themes.router.navigate( themes.router.baseUrl( '' ) );
781+
this.trigger( 'preview:close' );
787782
return false;
788783
},
789784

790785
collapse: function() {
791786

792787
this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
793788
return false;
789+
},
790+
791+
keyEvent: function( event ) {
792+
// The escape key closes the preview
793+
if ( event.keyCode === 27 ) {
794+
this.undelegateEvents();
795+
this.close();
796+
}
797+
// The right arrow key, next theme
798+
if ( event.keyCode === 39 ) {
799+
_.once( this.nextTheme() );
800+
}
801+
802+
// The left arrow key, previous theme
803+
if ( event.keyCode === 37 ) {
804+
this.previousTheme();
805+
}
794806
}
795807
});
796808

0 commit comments

Comments
 (0)