Ticket #27055: 27055.12.diff

wp-admin/includes/theme-install.php

@@ -134 +134 @@
 }
 // add_action('install_themes_dashboard', 'install_themes_dashboard');
 
+/**
+ * Display all the available tag filters.
+ *
+ * @since 3.9.0
+ */
+function install_themes_more_filters() {
+
+        $feature_list = get_theme_feature_list();
+
+        foreach ( (array) $feature_list as $feature_name => $features ) {
+                echo '<div class="filters-group">';
+                $feature_name = esc_html( $feature_name );
+                echo '<h4 class="feature-name">' . $feature_name . '</h4>';
+
+                echo '<ol class="feature-group">';
+                foreach ( $features as $feature => $feature_name ) {
+                        $feature_name = esc_html( $feature_name );
+                        $feature = esc_attr($feature);
+        ?>
+                <li>
+                        <input type="checkbox" name="features[]" id="feature-id-<?php echo $feature; ?>" value="<?php echo $feature; ?>" />
+                        <label for="feature-id-<?php echo $feature; ?>"><?php echo $feature_name; ?></label>
+                </li>
+        <?php } ?>
+        </ol>
+        </div>
+        <?php } ?>
+        <br class="clear" />
+<?php
+}
+
 function install_themes_upload() {
 ?>
 <p class="install-help"><?php _e('If you have a theme in a .zip format, you may install it by uploading it here.'); ?></p>

wp-admin/js/theme.js

@@ -1153 +1153 @@
         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 );
+                $( 'a.upload' ).on( 'click', function() {
+                        $( 'body' ).addClass( 'show-upload-theme' );
+                        themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
                 });
+                $( 'a.browse-themes' ).on( 'click', function() {
+                        $( 'body' ).removeClass( 'show-upload-theme' );
+                        themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+                });
         },
 
         moreFilters: function() {
@@ -1168 +1171 @@
 themes.InstallerRouter = Backbone.Router.extend({
         routes: {
                 'theme-install.php?theme=:slug': 'preview',
-                'theme-install.php(?sort=:sort)': 'sort',
+                'theme-install.php?sort=:sort': 'sort',
+                'theme-install.php?upload': 'upload',
                 '': 'sort'
         },
 
@@ -1225 +1229 @@
                         self.view.trigger( 'theme:close' );
                 });
 
+                themes.router.on( 'route:upload', function( slug ) {
+                        $( 'a.upload' ).trigger( 'click' );
+                });
+
                 this.extraRoutes();
         },
 

wp-admin/css/themes.css

@@ -1065 +1065 @@
   16.2 - Install Themes
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h2 .upload {
-        margin-left: 10px;
-}
 .theme-navigation {
         background: #fff;
         box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@@ -1081 +1078 @@
         position: relative;
         width: 100%;
 }
+.theme-install-php a.upload,
+.theme-install-php a.browse-themes {
+        cursor: pointer;
+}
+.theme-install-php a.browse-themes,
+.theme-install-php.show-upload-theme a.upload {
+        display: none;
+}
+.theme-install-php.show-upload-theme a.browse-themes {
+        display: inline;
+}
 .upload-theme {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
@@ -1092 +1100 @@
         position: relative;
                 top: 10px;
 }
-.upload-theme.opened {
+body.show-upload-theme .upload-theme {
         display: block;
 }
 .upload-theme .wp-upload-form {
@@ -1110 +1118 @@
         padding: 40px 0 0;
         text-align: center;
 }
-.upload-theme.opened + .theme-navigation,
-.upload-theme.opened + .theme-navigation + .theme-browser {
+body.show-upload-theme .upload-theme + .theme-navigation,
+body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
         display: none;
 }
 .theme-navigation .theme-count {
@@ -1148 +1156 @@
         transition: color .1s ease-in, background .1s ease-in;
 }
 body.more-filters-opened .more-filters,
-.theme-navigation .more-filters.current {
+body.more-filters-opened .more-filters:before {
         background: rgb(46, 162, 204);
         border-radius: 2px;
         border: none;
@@ -1197 +1205 @@
 body.more-filters-opened .more-filters-container {
         display: block;
 }
+.more-filters-container .filters-group {
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        float: left;
+        width: 20%;
+}
+.more-filters-container .feature-name {
+        margin-top: 0;
+}
+.more-filters-container ol {
+        list-style-type: none;
+        margin: 0;
+}
+
 .theme-install-php .add-new-theme {
         display: none !important;
 }
 
+@media only screen and (max-width: 1120px) {
+        .theme-install-php .theme-search {
+                margin: 20px 0;
+                position: static;
+                width: 100%;
+        }
+        .more-filters-container {
+                border-bottom: 1px solid #eee;
+        }
+        .upload-theme .wp-upload-form {
+                margin: 20px 0;
+                max-width: 100%;
+        }
+        .upload-theme .install-help {
+                font-size: 15px;
+                padding: 20px 0 0;
+                text-align: left;
+        }
+        .more-filters-container .filters-group {
+                width: 50%;
+        }
+        .more-filters-container .filters-group:nth-child(3n) {
+                clear: left;
+        }
+}
+
 .rating {
         margin: 30px 0;
 }

wp-admin/theme-install.php

@@ -104 +104 @@
 <div class="wrap">
         <h2>
                 <?php echo esc_html( $title ); ?>
-                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+                <a class="upload add-new-h2"><?php esc_html_e( 'Upload Theme' ); ?></a>
+                <a class="browse-themes add-new-h2"><?php esc_html_e( 'Browse' ); ?></a>
         </h2>
 
         <div class="upload-theme">
@@ -119 +120 @@
                 <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>
+                        <span class="more-filters">More</span>
                 </div>
                 <div class="more-filters-container">
-                        Display more filters.
+                        <?php install_themes_more_filters(); ?>
                 </div>
         </div>
         <div class="theme-browser"></div>