Ticket #27055: 27055.32.diff

wp-admin/css/themes.css

@@ -1288 +1288 @@
         margin: 0 5px;
         padding: 4px 8px;
 }
+.more-filters-container .filtering-by a {
+        margin-left: 10px;
+}
 body.filters-applied .more-filters-container .filters-group,
-body.filters-applied .more-filters-container a,
+body.filters-applied .more-filters-container a.button,
 body.filters-applied .more-filters-container br {
         display: none !important;
 }
@@ -1508 +1511 @@
         margin: 0;
         z-index: 10;
         overflow: auto;
-        background: transparent;
+        background: #eee;
         border-right: none;
 }
 
@@ -1671 +1674 @@
         display: none;
 }
 
+.wp-full-overlay .theme-navigation {
+        padding: 10px;
+        position: absolute;
+                bottom: 10px;
+        text-align: center;
+}
+
 /* Animations */
 .wp-full-overlay,
 .wp-full-overlay-sidebar,
@@ -1749 +1759 @@
 
 .install-theme-info {
         display: none;
-        padding: 10px 20px 20px;
+        padding: 10px 20px 60px;
 }
 
 .single-theme .install-theme-info {

wp-admin/js/theme.js

@@ -215 +215 @@
                 return collection;
         },
 
+        count: false,
+
         // Handles requests for more themes
         // and caches results
         //
@@ -229 +231 @@
                         self = this,
                         query, isPaginated, count;
 
+                // Store current query request args
+                // for later use with the event `theme:end`
+                this.currentQuery.request = request;
+
                 // Search the query cache for matches.
                 query = _.find( queries, function( query ) {
                         return _.isEqual( query.request, request );
@@ -244 +250 @@
                 }
 
                 // Otherwise, send a new API call and add it to the cache.
-                if ( ! query ) {
+                if ( ! query && ! isPaginated ) {
                         query = this.apiCall( request ).done( function( data ) {
                                 // Update the collection with the queried data.
                                 self.reset( data.themes );
@@ -260 +266 @@
                                 }
 
                                 // Store the results and the query request
-                                queries.push( { themes: data.themes, request: request } );
+                                queries.push( { themes: data.themes, request: request, total: count } );
                         }).fail( function() {
                                 self.trigger( 'query:fail' );
                         });
@@ -289 +295 @@
 
                         // Only trigger an update event since we already have the themes
                         // on our cached object
+                        if ( _.isNumber( query.total ) ) {
+                                this.count = query.total;
+                        }
+
+                        if ( ! query.total ) {
+                                this.count = this.length;
+                        }
+
                         this.reset( query.themes );
                         this.trigger( 'update' );
                 }
@@ -305 +319 @@
 
         // Send Ajax POST request to api.wordpress.org/themes
         apiCall: function( request, paginated ) {
-                // Store current query request args
-                // for later use with the event `theme:end`
-                this.currentQuery.request = request;
 
                 // Ajax request to .org API
                 return $.ajax({
@@ -441 +452 @@
         },
 
         preview: function( event ) {
+                var self = this,
+                        current;
+
                 // Bail if the user scrolled on a touch device
                 if ( this.touchDrag === true ) {
                         return this.touchDrag = false;
@@ -460 +474 @@
 
                 event = event || window.event;
 
+                // Set focus to current theme.
+                themes.focusedTheme = this.$el;
+
+                // Construct a new Preview view.
                 var preview = new themes.view.Preview({
                         model: this.model
                 });
 
+                // Render the view and append it.
                 preview.render();
                 $( 'div.wrap' ).append( preview.el );
+
+                // Listen to our preview object
+                // for `theme:next` and `theme:previous` events.
+                this.listenTo( preview, 'theme:next', function() {
+
+                        // Keep local track of current theme model.
+                        current = self.model;
+
+                        // If we have ventured away from current model update the current model position.
+                        if ( ! _.isUndefined( self.current ) ) {
+                                current = self.current;
+                        }
+
+                        // Get previous theme model.
+                        self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
+
+                        // If we have no more themes, bail.
+                        if ( _.isUndefined( self.current ) ) {
+                                return;
+                        }
+
+                        // Construct a new Preview view.
+                        preview = new themes.view.Preview({
+                                model: self.current
+                        });
+
+                        // Render and append.
+                        preview.render();
+                        $( 'div.wrap' ).append( preview.el );
+                })
+                .listenTo( preview, 'theme:previous', function() {
+
+                        // Keep track of current theme model.
+                        current = self.model;
+
+                        // If we have ventured away from current model update the current model position.
+                        if ( ! _.isUndefined( self.current ) ) {
+                                current = self.current;
+                        }
+
+                        // Get previous theme model.
+                        self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
+
+                        // If we have no more themes, bail.
+                        if ( _.isUndefined( self.current ) ) {
+                                return;
+                        }
+
+                        // Construct a new Preview view.
+                        preview = new themes.view.Preview({
+                                model: self.current
+                        });
+
+                        // Render and append.
+                        preview.render();
+                        $( 'div.wrap' ).append( preview.el );
+                });
         }
 });
 
@@ -633 +709 @@
 
 // Theme Preview view
 // Set ups a modal overlay with the expanded theme data
-themes.view.Preview = wp.Backbone.View.extend({
+themes.view.Preview = themes.view.Details.extend({
 
         className: 'wp-full-overlay expanded',
         el: '#theme-installer',
 
         events: {
                 'click .close-full-overlay': 'close',
-                'click .collapse-sidebar': 'collapse'
+                'click .collapse-sidebar': 'collapse',
+                'click .previous-theme': 'previousTheme',
+                'click .next-theme': 'nextTheme'
         },
 
         // The HTML template for the theme preview
@@ -654 +732 @@
 
                 this.$el.fadeIn( 200, function() {
                         $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
+                        $( '.close-full-overlay' ).focus();
                 });
         },
 
         close: function() {
                 this.$el.fadeOut( 200, function() {
                         $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
+
+                        // Return focus to the theme div
+                        if ( themes.focusedTheme ) {
+                                themes.focusedTheme.focus();
+                        }
                 });
 
                 themes.router.navigate( themes.router.baseUrl( '' ) );
@@ -782 +866 @@
                 }
 
                 // Display a live theme count for the collection
-                this.count.text( this.collection.length );
+                this.count.text( this.collection.count ? this.collection.count : this.collection.length );
         },
 
         // Iterates through each instance of the collection
@@ -1143 +1227 @@
                         request.tag = [ value.slice( 4 ) ];
                 }
 
+                $( '.theme-section.current' ).removeClass( 'current' );
+                $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
+
                 // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                 // or searching the local cache
                 this.collection.query( request );
@@ -1161 +1248 @@
                 'click .apply-filters': 'addFilter',
                 'click [type="checkbox"]': 'filtersChecked',
                 'click .clear-filters': 'clearFilters',
-                'click .feature-name': 'filterSection'
+                'click .feature-name': 'filterSection',
+                'click .filtering-by a': 'backToFilters'
         },
 
         // Handles all the rendering of the public theme directory
@@ -1297 +1385 @@
                 }
 
                 $( 'body' ).addClass( 'filters-applied' );
+                $( '.theme-section.current' ).removeClass( 'current' );
                 filteringBy.empty();
 
                 _.each( tags, function( tag ) {
@@ -1355 +1444 @@
                 event.preventDefault();
 
                 if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
-                        return $( 'body' ).removeClass( 'filters-applied' );
+                        return this.backToFilters();
                 }
 
                 // If the filters section is opened and filters are checked
@@ -1384 +1473 @@
                         $( item ).prop( 'checked', false );
                         return self.filtersChecked();
                 });
+        },
+
+        backToFilters: function() {
+                $( 'body' ).removeClass( 'filters-applied' );
         }
 });
 

wp-admin/theme-install.php

@@ -145 +145 @@
                         <div class="filtering-by">
                                 <span><?php _e( 'Filtering by:' ); ?></span>
                                 <div class="tags"></div>
+                                <a href="#"><?php _e( 'Edit' ); ?></a>
                         </div>
                 </div>
         </div>
         <div class="theme-browser"></div>
-        <div class="theme-overlay"></div>
         <div id="theme-installer" class="wp-full-overlay expanded"></div>
 
         <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
@@ -224 +224 @@
                                 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
                                 <span class="collapse-sidebar-arrow"></span>
                         </a>
+                        <div class="theme-navigation">
+                                <a class="previous-theme button" href="#"><?php _e( 'Previous' ); ?></a>
+                                <a class="next-theme button" href="#"><?php _e( 'Next' ); ?></a>
+                        </div>
                 </div>
         </div>
         <div class="wp-full-overlay-main">