Changeset 27636

Timestamp:

03/20/2014 04:19:55 AM (12 years ago)

Author:

nacin

Message:

Theme installer:

• Restore the feature filter.
• Improve responsiveness.
• Router updates, fixes.
• Make "Upload Theme" button more consistent with the admin.
• Avoid theme-count causing filters to jump.

props matveb.
see #27055.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (9 diffs)
• js/theme.js (modified) (6 diffs)
• theme-install.php (modified) (2 diffs)

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

@@ -170 +170 @@
         opacity: 0;
         position: absolute;
-                top: 35%;
-                right: 25%;
-                left: 25%;
+        top: 35%;
+        right: 25%;
+        left: 25%;
         background: #222;
         background: rgba(0,0,0,0.7);
@@ -1066 +1066 @@
 ------------------------------------------------------------------------------*/
 
-.theme-install-php h2 .upload {
-        margin-left: 10px;
-}
 .theme-navigation {
         background: #fff;
@@ -1082 +1079 @@
         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;
@@ -1091 +1099 @@
         overflow: hidden;
         position: relative;
-                top: 10px;
-}
-.upload-theme.opened {
+        top: 10px;
+}
+body.show-upload-theme .upload-theme {
         display: block;
 }
@@ -1111 +1119 @@
         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 {
-        top: 3px;
         margin-left: 0;
+        position: absolute;
+        top: 12px;
+}
+.theme-count + .theme-section {
+        margin-left: 60px;
 }
 .theme-section,
@@ -1143 +1155 @@
         display: inline-block;
         margin: 0 10px;
-        padding: 4px 5px;
+        padding: 4px 6px;
         -moz-transition: color .1s ease-in, background .1s ease-in;
         -webkit-transition: color .1s ease-in, background .1s ease-in;
@@ -1149 +1161 @@
 }
 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;
@@ -1157 +1169 @@
 .theme-install-php .theme-search {
         position: absolute;
-                right: 10px;
-                top: 9px;
+        right: 10px;
+        top: 9px;
         font-size: 16px;
         font-weight: 300;
@@ -1198 +1210 @@
         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;
+        }
 }
 

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

@@ -993 +993 @@
                 'click .theme-section': 'onSort',
                 'click .theme-filter': 'onFilter',
-                'click .more-filters': 'moreFilters'
+                'click .more-filters': 'moreFilters',
+                'click [type="checkbox"]': 'addFilter'
         },
 
@@ -1127 +1128 @@
 
                 // @todo Cache the collection after fetching based on the filter
+                filter = _.union( filter, this.filtersChecked() );
                 request = { tag: [ filter ] };
 
@@ -1147 +1149 @@
         },
 
+        // Clicking on a checkbox triggers a tag request
+        addFilter: function() {
+                var self = this,
+                        tags = this.filtersChecked(),
+                        request = { tag: tags };
+
+                // 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>' );
+                });
+        },
+
+        // Get the checked filters and return an array
+        filtersChecked: function() {
+                var items = $( '.feature-group' ).find( ':checkbox' ),
+                        tags = [];
+
+                _.each( items.filter( ':checked' ), function( item ) {
+                        tags.push( $( item ).prop( 'value' ) );
+                });
+
+                return tags;
+        },
+
         activeClass: 'current',
 
@@ -1154 +1190 @@
 
         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 } );
                 });
         },
@@ -1169 +1208 @@
         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'
         },
@@ -1224 +1264 @@
                         self.view.sort( sort );
                         self.view.trigger( 'theme:close' );
+                });
+
+                themes.router.on( 'route:upload', function( slug ) {
+                        $( 'a.upload' ).trigger( 'click' );
                 });
 

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

@@ -105 +105 @@
         <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>
 
@@ -118 +119 @@
                 <span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></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>
+                        <!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
+                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
+                        <span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
                 </div>
                 <div class="more-filters-container">
-                        Display more filters.
+                <?php
+                $feature_list = get_theme_feature_list();
+                foreach ( $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 = esc_attr( $feature );
+                                echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
+                                echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
+                        }
+                        echo '</ol>';
+                        echo '</div>';
+                }
+                ?>
+                        <br class="clear" />
                 </div>
         </div>