WordPress.org

Make WordPress Core

Ticket #27055: 27055.32.diff

File 27055.32.diff, 8.6 KB (added by matveb, 5 years ago)
  • wp-admin/css/themes.css

     
    12881288        margin: 0 5px;
    12891289        padding: 4px 8px;
    12901290}
     1291.more-filters-container .filtering-by a {
     1292        margin-left: 10px;
     1293}
    12911294body.filters-applied .more-filters-container .filters-group,
    1292 body.filters-applied .more-filters-container a,
     1295body.filters-applied .more-filters-container a.button,
    12931296body.filters-applied .more-filters-container br {
    12941297        display: none !important;
    12951298}
     
    15081511        margin: 0;
    15091512        z-index: 10;
    15101513        overflow: auto;
    1511         background: transparent;
     1514        background: #eee;
    15121515        border-right: none;
    15131516}
    15141517
     
    16711674        display: none;
    16721675}
    16731676
     1677.wp-full-overlay .theme-navigation {
     1678        padding: 10px;
     1679        position: absolute;
     1680                bottom: 10px;
     1681        text-align: center;
     1682}
     1683
    16741684/* Animations */
    16751685.wp-full-overlay,
    16761686.wp-full-overlay-sidebar,
     
    17491759
    17501760.install-theme-info {
    17511761        display: none;
    1752         padding: 10px 20px 20px;
     1762        padding: 10px 20px 60px;
    17531763}
    17541764
    17551765.single-theme .install-theme-info {
  • wp-admin/js/theme.js

     
    215215                return collection;
    216216        },
    217217
     218        count: false,
     219
    218220        // Handles requests for more themes
    219221        // and caches results
    220222        //
     
    229231                        self = this,
    230232                        query, isPaginated, count;
    231233
     234                // Store current query request args
     235                // for later use with the event `theme:end`
     236                this.currentQuery.request = request;
     237
    232238                // Search the query cache for matches.
    233239                query = _.find( queries, function( query ) {
    234240                        return _.isEqual( query.request, request );
     
    244250                }
    245251
    246252                // Otherwise, send a new API call and add it to the cache.
    247                 if ( ! query ) {
     253                if ( ! query && ! isPaginated ) {
    248254                        query = this.apiCall( request ).done( function( data ) {
    249255                                // Update the collection with the queried data.
    250256                                self.reset( data.themes );
     
    260266                                }
    261267
    262268                                // Store the results and the query request
    263                                 queries.push( { themes: data.themes, request: request } );
     269                                queries.push( { themes: data.themes, request: request, total: count } );
    264270                        }).fail( function() {
    265271                                self.trigger( 'query:fail' );
    266272                        });
     
    289295
    290296                        // Only trigger an update event since we already have the themes
    291297                        // on our cached object
     298                        if ( _.isNumber( query.total ) ) {
     299                                this.count = query.total;
     300                        }
     301
     302                        if ( ! query.total ) {
     303                                this.count = this.length;
     304                        }
     305
    292306                        this.reset( query.themes );
    293307                        this.trigger( 'update' );
    294308                }
     
    305319
    306320        // Send Ajax POST request to api.wordpress.org/themes
    307321        apiCall: function( request, paginated ) {
    308                 // Store current query request args
    309                 // for later use with the event `theme:end`
    310                 this.currentQuery.request = request;
    311322
    312323                // Ajax request to .org API
    313324                return $.ajax({
     
    441452        },
    442453
    443454        preview: function( event ) {
     455                var self = this,
     456                        current;
     457
    444458                // Bail if the user scrolled on a touch device
    445459                if ( this.touchDrag === true ) {
    446460                        return this.touchDrag = false;
     
    460474
    461475                event = event || window.event;
    462476
     477                // Set focus to current theme.
     478                themes.focusedTheme = this.$el;
     479
     480                // Construct a new Preview view.
    463481                var preview = new themes.view.Preview({
    464482                        model: this.model
    465483                });
    466484
     485                // Render the view and append it.
    467486                preview.render();
    468487                $( 'div.wrap' ).append( preview.el );
     488
     489                // Listen to our preview object
     490                // for `theme:next` and `theme:previous` events.
     491                this.listenTo( preview, 'theme:next', function() {
     492
     493                        // Keep local track of current theme model.
     494                        current = self.model;
     495
     496                        // If we have ventured away from current model update the current model position.
     497                        if ( ! _.isUndefined( self.current ) ) {
     498                                current = self.current;
     499                        }
     500
     501                        // Get previous theme model.
     502                        self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
     503
     504                        // If we have no more themes, bail.
     505                        if ( _.isUndefined( self.current ) ) {
     506                                return;
     507                        }
     508
     509                        // Construct a new Preview view.
     510                        preview = new themes.view.Preview({
     511                                model: self.current
     512                        });
     513
     514                        // Render and append.
     515                        preview.render();
     516                        $( 'div.wrap' ).append( preview.el );
     517                })
     518                .listenTo( preview, 'theme:previous', function() {
     519
     520                        // Keep track of current theme model.
     521                        current = self.model;
     522
     523                        // If we have ventured away from current model update the current model position.
     524                        if ( ! _.isUndefined( self.current ) ) {
     525                                current = self.current;
     526                        }
     527
     528                        // Get previous theme model.
     529                        self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
     530
     531                        // If we have no more themes, bail.
     532                        if ( _.isUndefined( self.current ) ) {
     533                                return;
     534                        }
     535
     536                        // Construct a new Preview view.
     537                        preview = new themes.view.Preview({
     538                                model: self.current
     539                        });
     540
     541                        // Render and append.
     542                        preview.render();
     543                        $( 'div.wrap' ).append( preview.el );
     544                });
    469545        }
    470546});
    471547
     
    633709
    634710// Theme Preview view
    635711// Set ups a modal overlay with the expanded theme data
    636 themes.view.Preview = wp.Backbone.View.extend({
     712themes.view.Preview = themes.view.Details.extend({
    637713
    638714        className: 'wp-full-overlay expanded',
    639715        el: '#theme-installer',
    640716
    641717        events: {
    642718                'click .close-full-overlay': 'close',
    643                 'click .collapse-sidebar': 'collapse'
     719                'click .collapse-sidebar': 'collapse',
     720                'click .previous-theme': 'previousTheme',
     721                'click .next-theme': 'nextTheme'
    644722        },
    645723
    646724        // The HTML template for the theme preview
     
    654732
    655733                this.$el.fadeIn( 200, function() {
    656734                        $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
     735                        $( '.close-full-overlay' ).focus();
    657736                });
    658737        },
    659738
    660739        close: function() {
    661740                this.$el.fadeOut( 200, function() {
    662741                        $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
     742
     743                        // Return focus to the theme div
     744                        if ( themes.focusedTheme ) {
     745                                themes.focusedTheme.focus();
     746                        }
    663747                });
    664748
    665749                themes.router.navigate( themes.router.baseUrl( '' ) );
     
    782866                }
    783867
    784868                // Display a live theme count for the collection
    785                 this.count.text( this.collection.length );
     869                this.count.text( this.collection.count ? this.collection.count : this.collection.length );
    786870        },
    787871
    788872        // Iterates through each instance of the collection
     
    11431227                        request.tag = [ value.slice( 4 ) ];
    11441228                }
    11451229
     1230                $( '.theme-section.current' ).removeClass( 'current' );
     1231                $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
     1232
    11461233                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    11471234                // or searching the local cache
    11481235                this.collection.query( request );
     
    11611248                'click .apply-filters': 'addFilter',
    11621249                'click [type="checkbox"]': 'filtersChecked',
    11631250                'click .clear-filters': 'clearFilters',
    1164                 'click .feature-name': 'filterSection'
     1251                'click .feature-name': 'filterSection',
     1252                'click .filtering-by a': 'backToFilters'
    11651253        },
    11661254
    11671255        // Handles all the rendering of the public theme directory
     
    12971385                }
    12981386
    12991387                $( 'body' ).addClass( 'filters-applied' );
     1388                $( '.theme-section.current' ).removeClass( 'current' );
    13001389                filteringBy.empty();
    13011390
    13021391                _.each( tags, function( tag ) {
     
    13551444                event.preventDefault();
    13561445
    13571446                if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
    1358                         return $( 'body' ).removeClass( 'filters-applied' );
     1447                        return this.backToFilters();
    13591448                }
    13601449
    13611450                // If the filters section is opened and filters are checked
     
    13841473                        $( item ).prop( 'checked', false );
    13851474                        return self.filtersChecked();
    13861475                });
     1476        },
     1477
     1478        backToFilters: function() {
     1479                $( 'body' ).removeClass( 'filters-applied' );
    13871480        }
    13881481});
    13891482
  • wp-admin/theme-install.php

     
    145145                        <div class="filtering-by">
    146146                                <span><?php _e( 'Filtering by:' ); ?></span>
    147147                                <div class="tags"></div>
     148                                <a href="#"><?php _e( 'Edit' ); ?></a>
    148149                        </div>
    149150                </div>
    150151        </div>
    151152        <div class="theme-browser"></div>
    152         <div class="theme-overlay"></div>
    153153        <div id="theme-installer" class="wp-full-overlay expanded"></div>
    154154
    155155        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     
    224224                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
    225225                                <span class="collapse-sidebar-arrow"></span>
    226226                        </a>
     227                        <div class="theme-navigation">
     228                                <a class="previous-theme button" href="#"><?php _e( 'Previous' ); ?></a>
     229                                <a class="next-theme button" href="#"><?php _e( 'Next' ); ?></a>
     230                        </div>
    227231                </div>
    228232        </div>
    229233        <div class="wp-full-overlay-main">