Ticket #27055: 27055.2.diff

wp-admin/includes/theme.php

@@ -452 +452 @@
          */
         $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
         return array_values( $prepared_themes );
+}
+
+
+/**
+ * Get public themes from the themes directory
+ * and prepare them for JavaScript
+ *
+ * @since 3.8.0
+ *
+ * @uses themes_api themes_directory_sections
+ * @return array with $theme objects
+ */
+function prepare_public_themes_for_js( $themes = array() ) {
+
+        $sections = array(
+                'featured' => __( 'Featured Themes' ),
+                'popular'  => __( 'Popular Themes' ),
+                'new'      => __( 'Newest Themes' ),
+        );
+
+        $sections = array_keys( $sections );
+
+        $args = array(
+                'page' => 1,
+                'per_page' => 12,
+        );
+
+        foreach ( $sections as $section ) {
+                $args['browse'] = $section;
+                $themes[ $section ] = themes_api( 'query_themes', $args );
+        }
+
+        return $themes;
 }
+ No newline at end of file

wp-admin/js/theme.js

@@ -12 +12 @@
 themes.data = _wpThemeSettings;
 l10n = themes.data.l10n;
 
+// Shortcut for (bool) isBrowsing check
+themes.isInstall = themes.data.settings.isBrowsing;
+
 // Setup app structure
-_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
+_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template, orgAPI: {} });
 
 themes.model = Backbone.Model.extend({});
 
@@ -55 +58 @@
                 this.$el.append( '<br class="clear"/>' );
         },
 
+        // Defines search element container
+        searchContainer: $( '#wpbody h2:first' ),
+
         // Search input and view
         // for current theme collection
         search: function() {
@@ -66 +72 @@
                         return;
                 }
 
-                view = new themes.view.Search({ collection: self.collection });
+                view = new themes.view.Search({
+                        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 );
         },
@@ -749 +758 @@
         }
 };
 
+// --------------------
+// PUBLIC THEME BROWSER
+// --------------------
+//
+// The public theme browser relies on the basic structure of the script
+// but overwrites some aspects of the main views
+//
+// The theme collection is the same but models have different attributes
+// as determined by the public themes_api
+//
+// @ bool check if it's the 'browsing themes' screen
+if ( themes.isInstall ) {
+
+        // Extend the main view controller
+        // @see themes.view.Appearance {}
+        //
+        // Overwrites properties and functions as needed
+        _.extend( themes.view.Appearance.prototype, {
+
+                el: '#wpbody-content .wrap',
+
+                // Register events for sorting and filters in theme-navigation
+                events: {
+                        'click .theme-section': 'setSort',
+                        'click .theme-filter': 'setFilter'
+                },
+
+                // Handles all the rendering of the public theme directory
+                install: function( section ) {
+                        // Create a new collection with the proper theme data
+                        // for each section
+                        this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
+
+                        // 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 );
+
+                        this.uploader();
+                },
+
+                // Initial render method
+                render: function() {
+                        this.search();
+                        return this.install( this.options.section );
+                },
+
+                // Sorting navigation
+                setSort: function( event ) {
+                        var $el = $( event.target ),
+                                sort = $el.data( 'sort' );
+
+                        // Bail if this is already active
+                        if ( $el.hasClass( this.activeClass ) ) {
+                                return;
+                        }
+
+                        $( '#theme-search-input' ).val( '' );
+
+                        $( '.theme-section' ).removeClass( this.activeClass );
+                        $el.addClass( this.activeClass );
+
+                        this.install( sort );
+                },
+
+                // Top filters
+                setFilter: function( event ) {
+                        var $el = $( event.target ),
+                                filter = $el.data( 'filter' );
+
+                        // Bail if this is already active
+                        if ( $el.hasClass( this.activeClass ) ) {
+                                return;
+                        }
+
+                        $( '.theme-filter' ).removeClass( this.activeClass );
+                        $el.addClass( this.activeClass );
+
+                        //
+                },
+
+                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 );
+                        });
+                }
+        });
+
+        _.extend( themes.view.Search.prototype, {
+
+                events: {
+                        'keyup': 'search'
+                },
+
+                // Handles Ajax request for searching through themes in public repo
+                search: function() {
+                        var request,
+                                self = this;
+
+                        this.collection = this.options.parent.view.collection;
+
+                        // Clear on escape.
+                        if ( event.type === 'keyup' && event.which === 27 ) {
+                                event.target.value = '';
+                        }
+
+                        // Construct the main `search` request
+                        // using all the defaul values
+                        _.extend( themes.orgAPI.data.request, {
+                                search: event.target.value
+                        });
+
+                        // Intercept an [author] search.
+                        //
+                        // If input value starts with `author:` send a request
+                        // for `author` instead of a regular `search`
+                        if ( event.target.value.substring( 0, 7 ) === 'author:' ) {
+                                _.extend( themes.orgAPI.data.request, {
+                                        search: '',
+                                        author: event.target.value.slice( 7 )
+                                });
+                        }
+
+                        // Send Ajax POST request to api.wordpress.org/themes
+                        $.ajax({
+                                url: themes.orgAPI.url,
+
+                                // We want JSON data
+                                dataType: 'json',
+                                type: 'POST',
+
+                                // Request data
+                                data: themes.orgAPI.data,
+
+                                beforeSend: function() {
+                                        // Spin it
+                                        $( 'body' ).addClass( 'loading-themes' );
+                                }
+                        })
+                                .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' );
+                        })
+                                .fail( function() {
+                                        // Fail
+                        });
+                }
+        });
+
+        // Store api.wordpress.org/themes values and structure
+        // for internal access
+        themes.orgAPI = {
+
+                data: {
+                        action: 'query_themes',
+                        request: {
+                                fields: {
+                                        tags: true,
+                                }
+                        }
+                },
+
+                url: 'http://api.wordpress.org/themes/info/1.1/?action=query_themes'
+        };
+
+        // Overwrite main application initializer
+        themes.Run.init = function() {
+                // Initializes the main view
+                // and bootstraps the default sorting section
+
+                // Set up the view
+                // Passes the default 'section' as an option
+                this.view = new themes.view.Appearance({
+                        el: $( '#appearance' ),
+                        section: 'featured'
+                });
+
+                // Render results
+                this.render();
+        }
+
+}
+
 // Ready...
 jQuery( document ).ready(
 

wp-admin/css/themes.css

@@ -1064 +1064 @@
   16.2 - Install Themes
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h4 {
-        margin: 2.5em 0 8px;
+.theme-install-php h2 .upload {
+        margin-left: 10px;
 }
-
-.theme-install-php .tablenav {
-        height: auto;
+.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;
+        font-size: 13px;
+        margin: 20px 0 30px;
+        padding: 0 20px;
+        position: relative;
+        width: 100%;
 }
-
-.theme-install-php .spinner {
-        margin-top: 9px;
-}
-
-.available-theme {
-        display: inline-block;
-        margin-right: 10px;
+.upload-theme {
+        /*background: #fff;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);*/
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0px 0 0;
+        padding: 0;
+        width: 100%;
+        height: 0;
+        -webkit-transition: height 200ms;
+        transition: height 200ms;
         overflow: hidden;
-        padding: 20px 20px 20px 0;
-        vertical-align: top;
-        width: 300px;
+        position: relative;
+                top: 10px;
 }
-
-.available-theme .screenshot {
-        width: 300px;
-        height: 225px;
+.upload-theme.opened {
         display: block;
-        border: 1px solid #ccc;
-        margin-bottom: 10px;
-        overflow: hidden;
-        background-color: #fff;
+        height: auto;
 }
-
-.available-theme img {
-        width: 300px;
+.upload-theme .wp-upload-form {
+        background: #fafafa;
+        border: 1px solid #e5e5e5;
+        padding: 30px;
+        margin: 30px auto;
+        max-width: 380px;
 }
-
-.available-theme h3 {
-        margin: 15px 0 0;
+.upload-theme .install-help {
+        color: #999;
+        font-size: 18px;
+        font-style: normal;
+        margin: 0;
+        padding: 40px 0 0;
+        text-align: center;
 }
-
-.available-theme .theme-author {
-        line-height: 18px;
+.upload-theme.opened + .theme-navigation,
+.upload-theme.opened + .theme-navigation + .theme-browser {
+        display: none;
 }
-
-.available-theme .action-links {
-        margin-top: 10px;
-        overflow: hidden;
+.theme-section {
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 15px 0;
 }
-
-.available-theme a.screenshot:focus {
-        border-color: #777;
+.theme-section.current {
+        border-bottom: 4px solid #666;
+        color: #222;
 }
-
-.available-theme .action-links li {
-        float: left;
-        padding-right: 10px;
-        margin-right: 10px;
-        border-right: 1px solid #dfdfdf;
+.theme-top-filters {
+        display: inline-block;
+        border-left: 1px solid #ddd;
+        padding-bottom: 4px;
+        padding-left: 20px;
+        margin-left: 20px;
 }
-
-.available-theme .action-links li {
-        padding-right: 8px;
-        margin-right: 8px;
+.theme-navigation .theme-filter {
+        color: #666;
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 10px;
+        padding: 4px 5px;
 }
-
-.ie8 .available-theme .action-links li {
-        padding-right: 7px;
-        margin-right: 7px;
+.theme-navigation .theme-filter.current {
+        background: rgb(46, 162, 204);
+        border-radius: 3px;
+        color: #fff;
 }
-
-.available-theme .action-links li:last-child {
-        padding-right: 0;
-        margin-right: 0;
-        border-right: 0;
+.theme-install-php .theme-search {
+        position: absolute;
+                right: 10px;
+                top: 9px;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+        width: 280px;
 }
-
-.available-theme .action-links .delete-theme {
-        float: right;
-        margin-left: 8px;
-        margin-right: 0;
+.add-new-theme {
+        display: none !important;
 }
 
-.available-theme .action-links .delete-theme a {
-        color: red;
-        padding: 2px;
+.rating {
+        margin: 30px 0;
 }
-
-.available-theme .action-links .delete-theme a:hover {
-        background: red;
-        color: #fff;
-        text-decoration: none;
+.rating span:before {
+        color: #E6B800;
+        content: "\f154";
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 20px/1 'dashicons';
+        vertical-align: top;
 }
-
-.available-theme .action-links p {
-        float: left;
+/* 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";
 }
-
-/* 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;
-        }
+/* Full stars */
+.rating-20 span.one:before {
+        content: "\f155";
 }
-
-/* 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;
-        }
+.rating-30 span.one:before,
+.rating-40 span.one:before,
+.rating-40 span.two:before {
+        content: "\f155";
 }
-
-/* 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%;
-        }
+.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";
 }
-
-.feature-filter {
-        padding: 8px 12px 0;
+.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";
 }
 
-.feature-filter .feature-group {
-        float: left;
-        margin: 5px 10px 10px;
+.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";
 }
 
-.feature-filter .feature-group li {
-        display: inline-block;
-        vertical-align: top;
-        list-style-type: none;
-        padding-right: 25px;
-        width: 150px;
+.loading-themes .theme-browser {
+        display: none;
 }
+.loading-themes .spinner {
+        display: block;
+        margin: 40px auto 0;
+        float: none;
+}
 
 /*------------------------------------------------------------------------------
   16.3 - Custom Header Screen

wp-admin/theme-install.php

@@ -20 +20 @@
         exit();
 }
 
-$wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
-$pagenum = $wp_list_table->get_pagenum();
-$wp_list_table->prepare_items();
+// $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-install' );
 wp_enqueue_script( 'theme-preview' );
 
-$body_id = $tab;
+wp_localize_script( 'theme', '_wpThemeSettings', array(
+        'themes'   => false,
+        'settings' => array(
+                'isBrowsing'    => (bool) ( get_current_screen()->id == 'theme-install' ),
+                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
+                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
+                'root'          => parse_url( admin_url( 'theme-install.php' ), PHP_URL_PATH ),
+                '_ajax_fetch_list_nonce' => wp_nonce_field( 'fetch-list-WP_Theme_Install_List_Table', '_ajax_fetch_list_nonce' ),
+        ),
+        'l10n' => array(
+                'addNew' => __( 'Add New Theme' ),
+                'search'  => __( 'Search Themes' ),
+                'searchPlaceholder' => __( 'Search themes...' ),
+                'upload' => __( 'Upload Theme' ),
+                'back'   => __( 'Back' ),
+        ),
+        'browse' => array(
+                'sections' => apply_filters( 'install_theme_sections', array(
+                        'featured' => __( 'Featured Themes' ),
+                        'popular'  => __( 'Popular Themes' ),
+                        'new'      => __( 'Newest Themes' ),
+                ) ),
+                'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
+        ),
+) );
 
+wp_enqueue_script( 'theme' );
+
+// $body_id = $tab;
+
 /**
  * Fires before each of the tabs are rendered on the Install Themes page.
  *
@@ -43 +73 @@
  *
  * @since 2.8.0
  */
-do_action( "install_themes_pre_{$tab}" );
+// do_action( "install_themes_pre_{$tab}" );
 
 $help_overview =
         '<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'http://wordpress.org/themes/') . '</p>' .
@@ -73 +103 @@
 );
 
 include(ABSPATH . 'wp-admin/admin-header.php');
+
+/**
+ * Uploader
+ */
+function install_themes_upload() {
+        ?>
+        <div class="upload-theme">
+                <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'); ?>">
+                        <?php wp_nonce_field( 'theme-upload'); ?>
+                        <input type="file" name="themezip" />
+                        <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
+                </form>
+        </div>
+        <?php
+}
+add_action( 'install_themes_upload', 'install_themes_upload', 10, 1 );
+
 ?>
-<div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
-<?php
+<div id="appearance" class="wrap">
+        <h2>
+                <?php echo esc_html( $title ); ?>
+                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+        </h2>
 
-$wp_list_table->views(); ?>
+        <?php install_themes_upload(); ?>
 
-<br class="clear" />
+        <div class="theme-navigation">
+                <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( 'New' ); ?></span>
+                <div class="theme-top-filters">
+                        <span class="theme-filter current" data-sort="all">All</span>
+                        <span class="theme-filter" data-sort="photography">Photography</span>
+                        <span class="theme-filter" data-sort="magazine">Magazine</span>
+                        <span class="theme-filter" data-sort="blogging">Blogging</span>
+                        <span class="theme-filter" data-sort="responsive">Responsive</span>
+                </div>
+                <?php wp_nonce_field( 'fetch-list-WP_Theme_Install_List_Table', '_ajax_fetch_list_nonce' ); ?>
+        </div>
+        <div class="theme-browser"></div>
+        <div class="theme-overlay"></div>
+        <img class="spinner" src="<?php echo admin_url( 'images/spinner-2x.gif' ); ?>" />
+
+        <br class="clear" />
 <?php
 /**
  * Fires at the top of each of the tabs on the Install Themes page.
@@ -93 +160 @@
  *
  * @param int $paged Number of the current page of results being viewed.
  */
-do_action( "install_themes_{$tab}", $paged );
+// 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 _e( 'Theme Details' ); ?></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"><?php esc_html_e( 'Install' ); ?></a>
+                <a class="button button-secondary preview"><?php esc_html_e( 'Preview' ); ?></a>
+        </div>
+</script>
+
+<script id="tmpl-theme-single" type="text/template">
+        <div class="theme-backdrop"></div>
+        <div class="theme-wrap">
+                <div class="theme-header">
+                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
+                </div>
+                <div class="theme-about">
+                        <div class="theme-screenshots">
+                        <# if ( data.screenshot_url ) { #>
+                                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
+                        <# } else { #>
+                                <div class="screenshot blank"></div>
+                        <# } #>
+                        </div>
+
+                        <div class="theme-info">
+                                <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
+                                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
+                                <p class="theme-description">{{{ data.description }}}</p>
+
+                                <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>
+                                </div>
+                        </div>
+                </div>
+
+                <div class="theme-actions">
+                        <a href="" class="button button-primary"><?php _e( 'Install' ); ?></a>
+                        <a href="" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
+                        <a href="" class="button button-secondary"><?php _e( 'Download' ); ?></a>
+                </div>
+        </div>
+</script>
+
 <?php
 include(ABSPATH . 'wp-admin/admin-footer.php');