WordPress.org
Get WordPress

Make WordPress Core

Ticket #27055: 27055.23.diff

File 27055.23.diff, 8.3 KB (added by matveb, 12 years ago)

  • wp-admin/css/themes.css

     
    12301230body.more-filters-opened .more-filters-container {
    12311231        display: block;
    12321232}
     1233body.more-filters-opened .theme-section.current {
     1234        border-bottom: none;
     1235}
     1236body.more-filters-opened .theme-browser,
     1237body.more-filters-opened.filters-applied.loading-themes .theme-browser {
     1238        display: none;
     1239}
     1240body.more-filters-opened.filters-applied .theme-browser {
     1241        display: block;
     1242}
    12331243.more-filters-container .filters-group {
    12341244        -webkit-box-sizing: border-box;
    12351245        -moz-box-sizing: border-box;
    12361246        box-sizing: border-box;
    12371247        float: left;
    1238         width: 20%;
     1248        width: 19%;
     1249        background: #fff;
     1250        margin: 0 1% 0 0;
     1251        border: 1px solid #e5e5e5;
     1252        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1253        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1254        padding: 10px;
    12391255}
    12401256.more-filters-container .feature-name {
    1241         margin-top: 0;
     1257        cursor: pointer;
     1258        margin: 0;
     1259        position: relative;
    12421260}
    12431261.more-filters-container ol {
    12441262        list-style-type: none;
     1263        margin: 20px 0 0;
     1264        display: block;
     1265        font-size: 12px;
     1266}
     1267.theme-navigation .more-filters-container .apply-filters {
     1268        margin: 20px 0 0;
     1269}
     1270.theme-navigation .more-filters-container .clear-filters {
     1271        display: none;
     1272        margin: 20px 0 0 10px;
     1273}
     1274.more-filters-container .apply-filters span {
     1275        display: inline-block;
     1276        font-size: 12px;
     1277        text-indent: 10px;
     1278        opacity: 0.8;
     1279}
     1280.more-filters-container .filtering-by {
     1281        display: none;
    12451282        margin: 0;
    12461283}
     1284.more-filters-container .filtering-by > span {
     1285        font-weight: 600;
     1286}
     1287.more-filters-container .filtering-by .tags {
     1288        display: inline;
     1289}
     1290.more-filters-container .filtering-by .tag {
     1291        background: #fff;
     1292        border: 1px solid #e5e5e5;
     1293        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1294        font-size: 11px;
     1295        margin: 0 5px;
     1296        padding: 4px 8px;
     1297}
     1298body.filters-applied .more-filters-container .filters-group,
     1299body.filters-applied .more-filters-container a,
     1300body.filters-applied .more-filters-container br {
     1301        display: none !important;
     1302}
     1303body.filters-applied .more-filters-container .filtering-by {
     1304        display: block;
     1305}
     1306body.filters-applied .more-filters-container {
     1307        padding: 20px;
     1308}
     1309p.no-themes {
     1310        color: #999;
     1311        font-size: 18px;
     1312        font-style: normal;
     1313        margin: 0;
     1314        padding: 0;
     1315        text-align: center;
     1316        display: none;
     1317}
     1318body.no-results p.no-themes {
     1319        display: block;
     1320}
    12471321
     1322
    12481323.theme-install-php .add-new-theme {
    12491324        display: none !important;
    12501325}
    … …  
    12681343                text-align: left;
    12691344        }
    12701345        .more-filters-container .filters-group {
    1271                 width: 50%;
     1346                margin-bottom: 0;
     1347                margin-top: 5px;
     1348                width: 49%;
    12721349        }
    12731350        .more-filters-container .filters-group:nth-child(3n) {
    12741351                clear: left;
    12751352        }
    12761353}
    12771354
     1355@media only screen and (max-width: 782px) {
     1356        .more-filters-container .filters-group {
     1357                width: 100%;
     1358        }
     1359}
     1360
    12781361.rating {
    12791362        margin: 30px 0;
    12801363}

  • wp-admin/js/theme.js

     
    255255                                self.trigger( 'update' );
    256256                                self.trigger( 'query:success', count );
    257257
     258                                if ( data.themes.length === 0 ) {
     259                                        self.trigger( 'query:empty' );
     260                                }
     261
    258262                                // Store the results and the query request
    259263                                queries.push( { themes: data.themes, request: request } );
    260264                        }).fail( function() {
    … …  
    330334                        beforeSend: function() {
    331335                                if ( ! paginated ) {
    332336                                        // Spin it
    333                                         $( 'body' ).addClass( 'loading-themes' );
     337                                        $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
    334338                                }
    335339                        }
    336340                });
    … …  
    704708                        }
    705709                });
    706710
     711                this.listenTo( self.collection, 'query:empty', function() {
     712                        $( 'body' ).addClass( 'no-results' );
     713                });
     714
    707715                this.listenTo( this.parent, 'theme:scroll', function() {
    708716                        self.renderThemes( self.parent.page );
    709717                });
    … …  
    11431151                'click .theme-section': 'onSort',
    11441152                'click .theme-filter': 'onFilter',
    11451153                'click .more-filters': 'moreFilters',
    1146                 'click [type="checkbox"]': 'addFilter'
     1154                'click .apply-filters': 'addFilter',
     1155                'click [type="checkbox"]': 'filtersChecked',
     1156                'click .clear-filters': 'clearFilters',
     1157                'click .feature-name': 'filterSection'
    11471158        },
    11481159
    11491160        // Handles all the rendering of the public theme directory
    … …  
    12171228
    12181229                event.preventDefault();
    12191230
     1231                $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
     1232
    12201233                // Bail if this is already active
    12211234                if ( $el.hasClass( this.activeClass ) ) {
    12221235                        return;
    … …  
    12681281        // Clicking on a checkbox triggers a tag request
    12691282        addFilter: function() {
    12701283                var tags = this.filtersChecked(),
    1271                         request = { tag: tags };
     1284                        request = { tag: tags },
     1285                        filteringBy = $( '.filtering-by .tags' ),
     1286                        name;
    12721287
     1288                $( 'body' ).addClass( 'filters-applied' );
     1289                filteringBy.empty();
     1290
     1291                _.each( tags, function( tag ) {
     1292                        name = $( 'label[for="feature-id-' + tag + '"]' ).text();
     1293                        filteringBy.append( '<span class="tag">' + name + '</span>' );
     1294                });
     1295
    12731296                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    12741297                // or searching the local cache
    12751298                this.collection.query( request );
    12761299        },
    12771300
    1278         // Get the checked filters and return an array
     1301        // Get the checked filters
     1302        // @return {array} of tags or false
    12791303        filtersChecked: function() {
    12801304                var items = $( '.feature-group' ).find( ':checkbox' ),
    12811305                        tags = [];
    … …  
    12841308                        tags.push( $( item ).prop( 'value' ) );
    12851309                });
    12861310
     1311                // When no filters are checked, restore initial state and return
     1312                if ( tags.length === 0 ) {
     1313                        $( '.apply-filters' ).find( 'span' ).text( '' );
     1314                        $( '.clear-filters' ).hide();
     1315                        $( 'body' ).removeClass( 'filters-applied' );
     1316                        return false;
     1317                }
     1318
     1319                $( '.apply-filters' ).find( 'span' ).text( tags.length );
     1320                $( '.clear-filters' ).css( 'display', 'inline-block' );
     1321
    12871322                return tags;
    12881323        },
    12891324
    … …  
    13041339                });
    13051340        },
    13061341
     1342        // Toggle the full filters navigation
    13071343        moreFilters: function() {
     1344                if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
     1345                        return $( 'body' ).removeClass( 'filters-applied' );
     1346                }
     1347
     1348                // If the filters section is opened and filters are checked
     1349                // run the relevant query collapsing to filtered-by state
     1350                if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
     1351                        return this.addFilter();
     1352                }
     1353
    13081354                $( 'body' ).toggleClass( 'more-filters-opened' );
     1355        },
     1356
     1357        // Expand/collapse each individual filter section
     1358        filterSection: function() {
     1359                $( event.target ).parent().toggleClass( 'open' );
     1360        },
     1361
     1362        // Clears all the checked filters
     1363        // @uses filtersChecked()
     1364        clearFilters: function() {
     1365                var items = $( '.feature-group' ).find( ':checkbox' ),
     1366                        self = this;
     1367
     1368                _.each( items.filter( ':checked' ), function( item ) {
     1369                        $( item ).prop( 'checked', false );
     1370                        return self.filtersChecked();
     1371                });
    13091372        }
    13101373});
    13111374

  • wp-admin/theme-install.php

     
    118118                <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
    119119                <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
    120120                <div class="theme-top-filters">
    121                         <!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
    122                         <span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
    123                         <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
     121                        <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
     122                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
     123                        <a class="more-filters" href="#"><?php _e( 'All' ); ?></a>
    124124                </div>
    125125                <div class="more-filters-container">
    126126                <?php
    … …  
    140140                }
    141141                ?>
    142142                        <br class="clear" />
     143                        <a class="apply-filters button button-secondary"><?php _e( 'Apply Filters' ); ?><span></span></a>
     144                        <a class="clear-filters button button-secondary"><?php _e( 'Clear' ); ?></a>
     145                        <div class="filtering-by">
     146                                <span><?php _e( 'Filtering by:' ); ?></span>
     147                                <div class="tags"></div>
     148                        </div>
    143149                </div>
    144150        </div>
    145151        <div class="theme-browser"></div>
    146152        <div class="theme-overlay"></div>
    147153        <div id="theme-installer" class="wp-full-overlay expanded"></div>
    148154
     155        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    149156        <span class="spinner"></span>
    150157
    151158        <br class="clear" />