WordPress.org

Make WordPress Core

Ticket #27521: 27521.18.diff

File 27521.18.diff, 5.6 KB (added by matveb, 7 years ago)
  • wp-admin/css/themes.css

     
    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;
  • wp-admin/js/theme.js

     
    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;
     
    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
    502487                // for `theme:next` and `theme:previous` events.
    503                 this.listenTo( preview, 'theme:next', function() {
     488                this.listenTo( preview, 'theme:next', function( modell) {
    504489
    505490                        // Keep local track of current theme model.
    506491                        current = self.model;
     
    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;
     
    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
     
    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
     
    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 ) {
     
    784778                });
    785779
    786780                themes.router.navigate( themes.router.baseUrl( '' ) );
     781                this.trigger( 'preview:close' );
    787782                return false;
    788783        },
    789784
     
    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