Changeset 27499

Timestamp:

03/11/2014 07:46:27 AM (12 years ago)

Author:

nacin

Message:

Bring the theme browsing experience from 3.8 to the theme installer. First pass.

props matveb with assists from me and gcorne.
see #27055.

Location:

trunk/src

Files:

• wp-admin/css/themes.css (modified) (2 diffs)
• wp-admin/includes/theme-install.php (modified) (6 diffs)
• wp-admin/js/theme-install.js (deleted)
• wp-admin/js/theme-preview.js (deleted)
• wp-admin/js/theme.js (modified) (11 diffs)
• wp-admin/theme-install.php (modified) (5 diffs)
• wp-admin/update.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

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

@@ -26 +26 @@
 }
 
-.themes-php .wrap .theme-count {
+.themes-php .wrap .theme-count,
+.theme-navigation .theme-count {
         color: #fff;
         -webkit-border-radius: 30px;
@@ -1065 +1066 @@
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h4 {
-        margin: 2.5em 0 8px;
-}
-
-.theme-install-php .tablenav {
-        height: auto;
-}
-
-.theme-install-php .spinner {
-        margin-top: 9px;
-}
-
-.available-theme {
+.theme-install-php h2 .upload {
+        margin-left: 10px;
+}
+.theme-navigation {
+        background: #fff;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        color: #555;
         display: inline-block;
-        margin-right: 10px;
+        font-size: 13px;
+        margin: 20px 0 30px;
+        padding: 0 20px;
+        position: relative;
+        width: 100%;
+}
+.upload-theme {
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        display: none;
+        margin: 0px 0 0;
+        padding: 0;
+        width: 100%;
         overflow: hidden;
-        padding: 20px 20px 20px 0;
+        position: relative;
+                top: 10px;
+}
+.upload-theme.opened {
+        display: block;
+}
+.upload-theme .wp-upload-form {
+        background: #fafafa;
+        border: 1px solid #e5e5e5;
+        padding: 30px;
+        margin: 30px auto;
+        max-width: 380px;
+}
+.upload-theme .install-help {
+        color: #999;
+        font-size: 18px;
+        font-style: normal;
+        margin: 0;
+        padding: 40px 0 0;
+        text-align: center;
+}
+.upload-theme.opened + .theme-navigation,
+.upload-theme.opened + .theme-navigation + .theme-browser {
+        display: none;
+}
+.theme-navigation .theme-count {
+        top: 3px;
+        margin-left: 0;
+}
+.theme-section,
+.theme-filter {
+        border-bottom: 4px solid #fff;
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 15px 0;
+        -moz-transition: border-color .1s ease-in;
+        -webkit-transition: border-color .1s ease-in;
+}
+.theme-section.current,
+.theme-filter.current {
+        border-bottom: 4px solid #666;
+        color: #222;
+}
+.theme-top-filters {
+        display: inline-block;
+}
+.theme-navigation .more-filters {
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 4px 5px;
+        -moz-transition: color .1s ease-in, background .1s ease-in;
+        -webkit-transition: color .1s ease-in, background .1s ease-in;
+        transition: color .1s ease-in, background .1s ease-in;
+}
+body.more-filters-opened .more-filters,
+.theme-navigation .more-filters.current {
+        background: rgb(46, 162, 204);
+        border-radius: 2px;
+        border: none;
+        color: #fff;
+}
+.theme-install-php .theme-search {
+        position: absolute;
+                right: 10px;
+                top: 9px;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+        width: 280px;
+}
+.more-filters:before {
+        color: #777;
+        text-align: center;
+        margin: 0 5px 0 0;
+        content: "\f111";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        -webkit-font-smoothing: antialiased;
+        font-size: 16px;
+        line-height: 1;
+        font-family: "dashicons";
+        text-decoration: inherit;
+        font-weight: normal;
+        font-style: normal;
         vertical-align: top;
-        width: 300px;
-}
-
-.available-theme .screenshot {
-        width: 300px;
-        height: 225px;
-        display: block;
-        border: 1px solid #ccc;
-        margin-bottom: 10px;
-        overflow: hidden;
-        background-color: #fff;
-}
-
-.available-theme img {
-        width: 300px;
-}
-
-.available-theme h3 {
-        margin: 15px 0 0;
-}
-
-.available-theme .theme-author {
-        line-height: 18px;
-}
-
-.available-theme .action-links {
-        margin-top: 10px;
-        overflow: hidden;
-}
-
-.available-theme a.screenshot:focus {
-        border-color: #777;
-}
-
-.available-theme .action-links li {
-        float: left;
-        padding-right: 10px;
-        margin-right: 10px;
-        border-right: 1px solid #dfdfdf;
-}
-
-.available-theme .action-links li {
-        padding-right: 8px;
-        margin-right: 8px;
-}
-
-.ie8 .available-theme .action-links li {
-        padding-right: 7px;
-        margin-right: 7px;
-}
-
-.available-theme .action-links li:last-child {
-        padding-right: 0;
-        margin-right: 0;
-        border-right: 0;
-}
-
-.available-theme .action-links .delete-theme {
-        float: right;
-        margin-left: 8px;
-        margin-right: 0;
-}
-
-.available-theme .action-links .delete-theme a {
-        color: red;
-        padding: 2px;
-}
-
-.available-theme .action-links .delete-theme a:hover {
-        background: red;
+        -moz-transition: color .1s ease-in 0;
+        -webkit-transition: color .1s ease-in 0;
+        transition: color .1s ease-in 0;
+        text-align: center;
+}
+.more-filters.current:before {
         color: #fff;
-        text-decoration: none;
-}
-
-.available-theme .action-links p {
-        float: left;
-}
-
-/* Allow for three-up in small windows when sidebar is collapsed */
-@media only screen and (max-width: 1200px) {
-        .folded .available-theme,
-        .folded .available-theme .screenshot {
-                width: 300px;
-        }
-
-        .folded .available-theme .screenshot {
-                height: 225px;
-        }
-}
-
-/* Adjust three-up display in smaller windows when sidebar is collapsed */
-@media only screen and (max-width: 1079px) {
-        .folded .available-theme,
-        .folded .available-theme .screenshot {
-                width: 270px;
-        }
-
-        .folded .available-theme .screenshot {
-                height: 203px;
-        }
-}
-
-/* Allow for three-up on 1024px wide screens, e.g. tablets */
-@media only screen and (max-width: 1200px) {
-        .available-theme,
-        .available-theme .screenshot {
-                width: 240px;
-        }
-
-        .available-theme .screenshot {
-                height: 180px;
-        }
-
-        .available-theme img {
-                width: 100%;
-        }
-}
-
-.feature-filter {
-        padding: 8px 12px 0;
-}
-
-.feature-filter .feature-group {
-        float: left;
-        margin: 5px 10px 10px;
-}
-
-.feature-filter .feature-group li {
+}
+.more-filters-container {
+        display: none;
+        padding: 30px;
+        border-top: 1px solid #eee;
+        margin: 0 -20px;
+        background: #fafafa;
+}
+body.more-filters-opened .more-filters-container {
+        display: block;
+}
+.theme-install-php .add-new-theme {
+        display: none !important;
+}
+
+.rating {
+        margin: 30px 0;
+}
+.rating span:before {
+        color: #e6b800;
+        content: "\f154";
         display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 20px/1 'dashicons';
         vertical-align: top;
-        list-style-type: none;
-        padding-right: 25px;
-        width: 150px;
+}
+/* Half stars */
+.rating-10 span.one:before,
+.rating-30 span.two:before,
+.rating-50 span.three:before,
+.rating-70 span.four:before,
+.rating-90 span.five:before {
+        content: "\f459";
+}
+/* Full stars */
+.rating-20 span.one:before {
+        content: "\f155";
+}
+.rating-30 span.one:before,
+.rating-40 span.one:before,
+.rating-40 span.two:before {
+        content: "\f155";
+}
+.rating-50 span.one:before,
+.rating-50 span.two:before,
+.rating-60 span.one:before,
+.rating-60 span.two:before,
+.rating-60 span.three:before {
+        content: "\f155";
+}
+.rating-70 span.one:before,
+.rating-70 span.two:before,
+.rating-70 span.three:before,
+.rating-80 span.one:before,
+.rating-80 span.two:before,
+.rating-80 span.three:before,
+.rating-80 span.four:before {
+        content: "\f155";
+}
+.rating-90 span.one:before,
+.rating-90 span.two:before,
+.rating-90 span.three:before,
+.rating-90 span.four:before,
+.rating-100 span.one:before,
+.rating-100 span.two:before,
+.rating-100 span.three:before,
+.rating-100 span.four:before,
+.rating-100 span.five:before {
+        content: "\f155";
+}
+.rating .votes {
+        display: inline;
+        margin-left: 10px;
+        line-height: 20px;
+}
+.loading-themes .theme-browser,
+.error .theme-browser {
+        display: none;
+}
+.loading-themes .spinner {
+        display: block;
+        margin: 40px auto 0;
+        float: none;
 }
 

trunk/src/wp-admin/includes/theme-install.php

@@ -133 +133 @@
 <?php
 }
-add_action('install_themes_dashboard', 'install_themes_dashboard');
-
-function install_themes_upload($page = 1) {
+// add_action('install_themes_dashboard', 'install_themes_dashboard');
+
+function install_themes_upload() {
 ?>
-<h4><?php _e('Install a theme in .zip format'); ?></h4>
 <p class="install-help"><?php _e('If you have a theme in a .zip format, you may install it by uploading it here.'); ?></p>
 <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-theme'); ?>">
@@ -146 +145 @@
         <?php
 }
-add_action('install_themes_upload', 'install_themes_upload', 10, 1);
+// add_action('install_themes_upload', 'install_themes_upload', 10, 0);
 
 /**
@@ -156 +155 @@
         _deprecated_function( __FUNCTION__, '3.4' );
         global $wp_list_table;
+        if ( ! isset( $wp_list_table ) ) {
+                $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+        }
+        $wp_list_table->prepare_items();
         $wp_list_table->single_row( $theme );
 }
@@ -167 +170 @@
         global $wp_list_table;
 
+        if ( ! isset( $wp_list_table ) ) {
+                $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+        }
+        $wp_list_table->prepare_items();
         $wp_list_table->display();
-}
-add_action('install_themes_search', 'display_themes');
-add_action('install_themes_featured', 'display_themes');
-add_action('install_themes_new', 'display_themes');
-add_action('install_themes_updated', 'display_themes');
+
+}
+// add_action('install_themes_search', 'display_themes');
+// add_action('install_themes_featured', 'display_themes');
+// add_action('install_themes_new', 'display_themes');
+// add_action('install_themes_updated', 'display_themes');
 
 /**
@@ -180 +188 @@
  */
 function install_theme_information() {
-        global $tab, $themes_allowedtags, $wp_list_table;
+        global $wp_list_table;
 
         $theme = themes_api( 'theme_information', array( 'slug' => wp_unslash( $_REQUEST['theme'] ) ) );
@@ -188 +196 @@
 
         iframe_header( __('Theme Install') );
+        if ( ! isset( $wp_list_table ) ) {
+                $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+        }
         $wp_list_table->theme_installer_single( $theme );
         iframe_footer();

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

@@ -13 +13 @@
 l10n = themes.data.l10n;
 
+// Shortcut for isInstall check
+themes.isInstall = !! themes.data.settings.isInstall;
+
 // Setup app structure
 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
 
-themes.model = Backbone.Model.extend({});
+themes.Model = Backbone.Model.extend({
+        // Adds attributes to the default data coming through the .org themes api
+        // Map `id` to `slug` for shared code
+        initialize: function() {
+                var install, preview;
+
+                // Install url for the theme
+                // using the install nonce
+                install = {
+                        action: 'install-theme',
+                        theme: this.get( 'slug' ),
+                        _wpnonce: themes.data.settings._nonceInstall
+                };
+
+                // Build the url query
+                install = themes.data.settings.updateURI + '?' + $.param( install );
+
+                // Preview url for the theme
+                preview = {
+                        tab: 'theme-information',
+                        theme: this.get( 'slug' )
+                };
+
+                preview = themes.data.settings.installURI + '?' + $.param( preview );
+
+                // Set the attributes
+                this.set({
+                        installURI: install,
+                        previewURI: preview,
+                        id: this.get( 'slug' )
+                });
+        }
+});
 
 // Main view controller for themes.php
@@ -29 +64 @@
 
         // Sets up a throttler for binding to 'scroll'
-        initialize: function() {
+        initialize: function( options ) {
                 // Scroller checks how far the scroll position is
                 _.bindAll( this, 'scroller' );
 
+                this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
                 // Bind to the scroll event and throttle
                 // the results from this.scroller
@@ -56 +92 @@
         },
 
+        // Defines search element container
+        searchContainer: $( '#wpbody h2:first' ),
+
         // Search input and view
         // for current theme collection
@@ -67 +106 @@
                 }
 
-                view = new themes.view.Search({ collection: self.collection, parent: this });
+                view = new this.SearchView({
+                        collection: self.collection,
+                        parent: this
+                });
 
                 // Render and append after screen title
                 view.render();
-                $('#wpbody h2:first')
+                this.searchContainer
                         .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
                         .append( view.el );
@@ -96 +138 @@
 themes.Collection = Backbone.Collection.extend({
 
-        model: themes.model,
+        model: themes.Model,
 
         // Search terms
@@ -188 +230 @@
 
         events: {
-                'click': 'expand',
-                'keydown': 'expand',
-                'touchend': 'expand',
+                'click': themes.isInstall ? 'preview': 'expand',
+                'click .preview': 'preview',
+                'keydown': themes.isInstall ? 'preview': 'expand',
+                'touchend': themes.isInstall ? 'preview': 'expand',
                 'touchmove': 'preventExpand'
         },
@@ -251 +294 @@
         preventExpand: function() {
                 this.touchDrag = true;
+        },
+
+        preview: function( event ) {
+                // Bail if the user scrolled on a touch device
+                if ( this.touchDrag === true ) {
+                        return this.touchDrag = false;
+                }
+
+                event.preventDefault();
+
+                event = event || window.event;
+
+                var preview = new themes.view.Preview({
+                        model: this.model
+                });
+
+                preview.render();
+                $( 'div.wrap' ).append( preview.el );
         }
 });
@@ -416 +477 @@
 });
 
+// Theme Preview view
+// Set ups a modal overlay with the expanded theme data
+themes.view.Preview = wp.Backbone.View.extend({
+
+        className: 'wp-full-overlay expanded',
+        el: '#theme-installer',
+
+        events: {
+                'click .close-full-overlay': 'close',
+                'click .collapse-sidebar': 'collapse'
+        },
+
+        // The HTML template for the theme preview
+        html: themes.template( 'theme-preview' ),
+
+        render: function() {
+                var data = this.model.toJSON();
+                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' );
+                });
+        },
+
+        close: function() {
+                this.$el.fadeOut( 200, function() {
+                        $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
+                });
+
+                themes.router.navigate( themes.router.baseUrl( '' ) );
+                return false;
+        },
+
+        collapse: function() {
+                this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+                return false;
+        }
+});
+
 // Controls the rendering of div.themes,
 // a wrapper that will hold all the theme elements
@@ -733 +835 @@
 // Sets up the routes events for relevant url queries
 // Listens to [theme] and [search] params
-themes.routes = Backbone.Router.extend({
+themes.Router = Backbone.Router.extend({
 
         routes: {
@@ -789 +891 @@
                 // Bind to our global thx object
                 // so that the object is available to sub-views
-                themes.router = new themes.routes();
+                themes.router = new themes.Router();
 
                 // Handles theme details route event
@@ -806 +908 @@
                         self.themes.doSearch( query );
                 });
+
+                this.extraRoutes();
+        },
+
+        extraRoutes: function() {
+                return false;
         }
 };
 
+// Extend the main Search view
+themes.view.InstallerSearch =  themes.view.Search.extend({
+
+        events: {
+                'keyup': 'search'
+        },
+
+        // Handles Ajax request for searching through themes in public repo
+        search: function( event ) {
+                this.collection = this.options.parent.view.collection;
+
+                // Clear on escape.
+                if ( event.type === 'keyup' && event.which === 27 ) {
+                        event.target.value = '';
+                }
+
+                _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
+        },
+
+        doSearch: function( value ) {
+                var request = {},
+                        self = this;
+
+                request.search = value;
+
+                // Intercept an [author] search.
+                //
+                // If input value starts with `author:` send a request
+                // for `author` instead of a regular `search`
+                if ( value.substring( 0, 7 ) === 'author:' ) {
+                        request.search = '';
+                        request.author = value.slice( 7 );
+                }
+
+                // Intercept a [tag] search.
+                //
+                // If input value starts with `tag:` send a request
+                // for `tag` instead of a regular `search`
+                if ( value.substring( 0, 4 ) === 'tag:' ) {
+                        request.search = '';
+                        request.tag = [ value.slice( 4 ) ];
+                }
+
+                // Send Ajax POST request to api.wordpress.org/themes
+                themes.view.Installer.prototype.apiCall( request ).done( function( data ) {
+                                // Update the collection with the queried data
+                                self.collection.reset( data.themes );
+                                // Trigger a collection refresh event to render the views
+                                self.collection.trigger( 'update' );
+
+                                // Un-spin it
+                                $( 'body' ).removeClass( 'loading-themes' );
+                                $( '.theme-browser' ).find( 'div.error' ).remove();
+                }).fail( function() {
+                                $( '.theme-browser' ).find( 'div.error' ).remove();
+                                $( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
+                });
+
+                return false;
+        }
+});
+
+themes.view.Installer = themes.view.Appearance.extend({
+
+        el: '#wpbody-content .wrap',
+
+        // Register events for sorting and filters in theme-navigation
+        events: {
+                'click .theme-section': 'onSort',
+                'click .theme-filter': 'onFilter',
+                'click .more-filters': 'moreFilters'
+        },
+
+        // Send Ajax POST request to api.wordpress.org/themes
+        apiCall: function( request ) {
+                return $.ajax({
+                        url: 'https://api.wordpress.org/themes/info/1.1/?action=query_themes',
+
+                        // We want JSON data
+                        dataType: 'json',
+                        type: 'POST',
+                        crossDomain: true,
+
+                        // Request data
+                        data: {
+                                action: 'query_themes',
+                                request: _.extend({
+                                        per_page: 36,
+                                        fields: {
+                                                description: true,
+                                                tested: true,
+                                                requires: true,
+                                                rating: true,
+                                                downloaded: true,
+                                                downloadLink: true,
+                                                last_updated: true,
+                                                homepage: true,
+                                                num_ratings: true
+                                        }
+                                }, request)
+                        },
+
+                        beforeSend: function() {
+                                // Spin it
+                                $( 'body' ).addClass( 'loading-themes' );
+                        }
+                });
+        },
+
+        // Handles all the rendering of the public theme directory
+        browse: function( section ) {
+                var self = this;
+
+                // @todo Cache the collection after fetching based on the section
+                this.collection = new themes.Collection();
+
+                // Create a new collection with the proper theme data
+                // for each section
+                this.apiCall({ browse: section }).done( function( data ) {
+                        // Update the collection with the queried data
+                        self.collection.reset( data.themes );
+                        // Trigger a collection refresh event to render the views
+                        self.collection.trigger( 'update' );
+
+                        // Un-spin it
+                        $( 'body' ).removeClass( 'loading-themes' );
+                        $( '.theme-browser' ).find( 'div.error' ).remove();
+                });
+
+                if ( this.view ) {
+                        this.view.remove();
+                }
+
+                // Set ups the view and passes the section argument
+                this.view = new themes.view.Themes({
+                        collection: this.collection,
+                        section: section,
+                        parent: this
+                });
+
+                // Reset pagination every time the install view handler is run
+                this.page = 0;
+
+                // Render and append
+                this.$el.find( '.themes' ).remove();
+                this.view.render();
+                this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' );
+        },
+
+        // Initial render method
+        render: function() {
+                this.search();
+                this.uploader();
+                return this.browse( this.options.section );
+        },
+
+        // Sorting navigation
+        onSort: function( event ) {
+                var $el = $( event.target ),
+                        sort = $el.data( 'sort' );
+
+                // Bail if this is already active
+                if ( $el.hasClass( this.activeClass ) ) {
+                        return;
+                }
+
+                this.sort( sort );
+
+                // Trigger a router.naviagte update
+                themes.router.navigate( themes.router.baseUrl( '?sort=' + sort ) );
+        },
+
+        sort: function( sort ) {
+                $( '#theme-search-input' ).val( '' );
+
+                $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
+                $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
+
+                this.browse( sort );
+        },
+
+        // Filters and Tags
+        onFilter: function( event ) {
+                var request,
+                        $el = $( event.target ),
+                        filter = $el.data( 'filter' ),
+                        self = this;
+
+                // Bail if this is already active
+                if ( $el.hasClass( this.activeClass ) ) {
+                        return;
+                }
+
+                $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
+                $el.addClass( this.activeClass );
+
+                if ( ! filter ) {
+                        return;
+                }
+
+                // Construct the filter request
+                // using the default values
+
+                // @todo Cache the collection after fetching based on the filter
+                request = { tag: [ filter ] };
+
+                // Send Ajax POST request to api.wordpress.org/themes
+                this.apiCall( request ).done( function( data ) {
+                                // Update the collection with the queried data
+                                self.collection.reset( data.themes );
+                                // Trigger a collection refresh event to render the views
+                                self.collection.trigger( 'update' );
+
+                                // Un-spin it
+                                $( 'body' ).removeClass( 'loading-themes' );
+                                $( '.theme-browser' ).find( 'div.error' ).remove();
+                }).fail( function() {
+                                $( '.theme-browser' ).find( 'div.error' ).remove();
+                                $( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
+                });
+
+                return false;
+        },
+
+        activeClass: 'current',
+
+        // Overwrite search container class to append search
+        // in new location
+        searchContainer: $( '.theme-navigation' ),
+
+        uploader: function() {
+                $( 'a.upload.button' ).on( 'click', function() {
+                        $( '.upload-theme' )
+                                .toggleClass( 'opened' )
+                                .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
+                });
+        },
+
+        moreFilters: function() {
+                $( 'body' ).toggleClass( 'more-filters-opened' );
+        }
+});
+
+themes.InstallerRouter = Backbone.Router.extend({
+        routes: {
+                'theme-install.php?theme=:slug': 'preview',
+                'theme-install.php(?sort=:sort)': 'sort',
+                '': 'sort'
+        },
+
+        baseUrl: function( url ) {
+                return 'theme-install.php' + url;
+        }
+});
+
+
+themes.RunInstaller = {
+
+        init: function() {
+                // Set up the view
+                // Passes the default 'section' as an option
+                this.view = new themes.view.Installer({
+                        section: 'featured',
+                        SearchView: themes.view.InstallerSearch
+                });
+
+                // Render results
+                this.render();
+
+        },
+
+        render: function() {
+
+                // Render results
+                this.view.render();
+                this.routes();
+
+                Backbone.history.start({
+                        root: themes.data.settings.adminUrl,
+                        pushState: true,
+                        hashChange: false
+                });
+        },
+
+        routes: function() {
+                var self = this;
+                // Bind to our global thx object
+                // so that the object is available to sub-views
+                themes.router = new themes.InstallerRouter();
+
+                // Handles theme details route event
+                themes.router.on( 'route:theme', function( slug ) {
+                        self.view.view.expand( slug );
+                });
+
+                themes.router.on( 'route:sort', function( sort ) {
+                        if ( ! sort ) {
+                                sort = 'featured';
+                        }
+                        self.view.sort( sort );
+                        self.view.trigger( 'theme:close' );
+                });
+
+                this.extraRoutes();
+        },
+
+        extraRoutes: function() {
+                return false;
+        }
+};
+
 // Ready...
-jQuery( document ).ready(
-
-        // Bring on the themes
-        _.bind( themes.Run.init, themes.Run )
-
-);
+$( document ).ready(function() {
+        if ( themes.isInstall ) {
+                themes.RunInstaller.init();
+        } else {
+                themes.Run.init();
+        }
+});
 
 })( jQuery );

trunk/src/wp-admin/theme-install.php

@@ -7 +7 @@
  */
 
-if ( !defined( 'IFRAME_REQUEST' ) && isset( $_GET['tab'] ) && ( 'theme-information' == $_GET['tab'] ) )
-        define( 'IFRAME_REQUEST', true );
-
 /** WordPress Administration Bootstrap */
 require_once( dirname( __FILE__ ) . '/admin.php' );
+require( ABSPATH . 'wp-admin/includes/theme-install.php' );
+
+wp_reset_vars( array( 'tab' ) );
 
 if ( ! current_user_can('install_themes') )
@@ -21 +21 @@
 }
 
-$wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
-$pagenum = $wp_list_table->get_pagenum();
-$wp_list_table->prepare_items();
-
-$title = __('Install Themes');
+$title = __( 'Add Themes' );
 $parent_file = 'themes.php';
-if ( !is_network_admin() )
+
+if ( ! is_network_admin() ) {
         $submenu_file = 'themes.php';
-
-wp_enqueue_script( 'theme-install' );
-wp_enqueue_script( 'theme-preview' );
-
-$body_id = $tab;
+}
+
+$sections = array(
+        'featured' => __( 'Featured Themes' ),
+        'popular'  => __( 'Popular Themes' ),
+        'new'      => __( 'Newest Themes' ),
+);
+
+wp_localize_script( 'theme', '_wpThemeSettings', array(
+        'themes'   => false,
+        'settings' => array(
+                'isInstall'     => true,
+                'canInstall'    => current_user_can( 'install_themes' ),
+                'installURI'    => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
+                'adminUrl'      => parse_url( self_admin_url(), PHP_URL_PATH ),
+                'updateURI'     => self_admin_url( 'update.php' ),
+                '_nonceInstall' => wp_create_nonce( 'install-theme' )
+        ),
+        'l10n' => array(
+                'addNew' => __( 'Add New Theme' ),
+                'search'  => __( 'Search Themes' ),
+                'searchPlaceholder' => __( 'Search themes...' ),
+                'upload' => __( 'Upload Theme' ),
+                'back'   => __( 'Back' ),
+                'error'  => __( 'There was a problem trying to load the themes. Please, try again.' ),
+        ),
+        'browse' => array(
+                'sections' => $sections,
+        ),
+) );
+
+wp_enqueue_script( 'theme' );
 
 /**
@@ -44 +68 @@
  * @since 2.8.0
  */
-do_action( "install_themes_pre_{$tab}" );
+if ( $tab ) {
+        do_action( "install_themes_pre_{$tab}" );
+}
 
 $help_overview =
@@ -74 +100 @@
 
 include(ABSPATH . 'wp-admin/admin-header.php');
+
 ?>
 <div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
-<?php
-
-$wp_list_table->views(); ?>
-
-<br class="clear" />
+        <h2>
+                <?php echo esc_html( $title ); ?>
+                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+        </h2>
+
+        <div class="upload-theme">
+        <?php install_themes_upload(); ?>
+        </div>
+
+        <div class="theme-navigation">
+                <span class="theme-count"></span>
+                <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
+                <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
+                <span class="theme-section" data-sort="new"><?php esc_html_e( 'Latest' ); ?></span>
+                <div class="theme-top-filters">
+                        <span class="theme-filter" data-filter="photoblogging">Photography</span>
+                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
+                        <span class="theme-filter more-filters">More</span>
+                </div>
+                <div class="more-filters-container">
+                        Display more filters.
+                </div>
+        </div>
+        <div class="theme-browser"></div>
+        <div class="theme-overlay"></div>
+        <div id="theme-installer" class="wp-full-overlay expanded"></div>
+
+        <span class="spinner"></span>
+
+        <br class="clear" />
 <?php
 /**
@@ -94 +145 @@
  * @param int $paged Number of the current page of results being viewed.
  */
-do_action( "install_themes_{$tab}", $paged );
+if ( $tab ) {
+        do_action( "install_themes_{$tab}", $paged );
+}
 ?>
 </div>
+
+<script id="tmpl-theme" type="text/template">
+        <# if ( data.screenshot_url ) { #>
+                <div class="theme-screenshot">
+                        <img src="{{ data.screenshot_url }}" alt="" />
+                </div>
+        <# } else { #>
+                <div class="theme-screenshot blank"></div>
+        <# } #>
+        <span class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></span>
+        <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></div>
+        <h3 class="theme-name">{{ data.name }}</h3>
+
+        <div class="theme-actions">
+                <a class="button button-primary" href="{{ data.installURI }}"><?php esc_html_e( 'Install' ); ?></a>
+                <a class="button button-secondary preview install-theme-preview" href="#"><?php esc_html_e( 'Preview' ); ?></a>
+        </div>
+</script>
+
+<script id="tmpl-theme-preview" type="text/template">
+        <div class="wp-full-overlay-sidebar">
+                <div class="wp-full-overlay-header">
+                        <a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+                        <a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
+                </div>
+                <div class="wp-full-overlay-sidebar-content">
+                        <div class="install-theme-info">
+                                <h3 class="theme-name">{{ data.name }}</h3>
+                                <span class="theme-by"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></span>
+
+                                <img class="theme-screenshot" src="{{ data.screenshot_url }}" alt="" />
+
+                                <div class="theme-details">
+                                        <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
+                                                <span class="one"></span>
+                                                <span class="two"></span>
+                                                <span class="three"></span>
+                                                <span class="four"></span>
+                                                <span class="five"></span>
+                                                <p class="votes"><?php printf( __( 'Based on %s ratings.' ), '{{ data.num_ratings }}' ); ?></p>
+                                        </div>
+                                        <div class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></div>
+                                        <div class="theme-description">{{ data.description }}</div>
+                                </div>
+                        </div>
+                </div>
+                <div class="wp-full-overlay-footer">
+                        <a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+                                <span class="collapse-sidebar-arrow"></span>
+                        </a>
+                </div>
+        </div>
+        <div class="wp-full-overlay-main">
+                <iframe src="{{ data.preview_url }}" />
+        </div>
+</script>
+
 <?php
 include(ABSPATH . 'wp-admin/admin-footer.php');

trunk/src/wp-admin/update.php

@@ -203 +203 @@
                 include_once ABSPATH . 'wp-admin/includes/theme-install.php'; //for themes_api..
 
-                check_admin_referer('install-theme_' . $theme);
+                check_admin_referer( 'install-theme' );
                 $api = themes_api('theme_information', array('slug' => $theme, 'fields' => array('sections' => false, 'tags' => false) ) ); //Save on a bit of bandwidth.
 

trunk/src/wp-includes/script-loader.php

@@ -455 +455 @@
 
                 $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
-                $scripts->add( 'theme-install', "/wp-admin/js/theme-install$suffix.js", array( 'jquery' ), false, 1 );
-
-                // @todo: Core no longer uses theme-preview.js. Remove?
-                $scripts->add( 'theme-preview', "/wp-admin/js/theme-preview$suffix.js", array( 'thickbox', 'jquery' ), false, 1 );
 
                 $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'heartbeat' ), false, 1 );