WordPress.org

Make WordPress Core

Ticket #27055: 27055.24.diff

File 27055.24.diff, 8.7 KB (added by matveb, 5 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}
     1321body.show-upload-theme p.no-themes {
     1322        display: none !important;
     1323}
    12471324
     1325
    12481326.theme-install-php .add-new-theme {
    12491327        display: none !important;
    12501328}
     
    12681346                text-align: left;
    12691347        }
    12701348        .more-filters-container .filters-group {
    1271                 width: 50%;
     1349                margin-bottom: 0;
     1350                margin-top: 5px;
     1351                width: 49%;
    12721352        }
    12731353        .more-filters-container .filters-group:nth-child(3n) {
    12741354                clear: left;
    12751355        }
    12761356}
    12771357
     1358@media only screen and (max-width: 782px) {
     1359        .more-filters-container .filters-group {
     1360                width: 100%;
     1361        }
     1362}
     1363
    12781364.rating {
    12791365        margin: 30px 0;
    12801366}
  • 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() {
     
    277281                                });
    278282                        }
    279283
     284                        if ( query.themes.length === 0 ) {
     285                                self.trigger( 'query:empty' );
     286                        } else {
     287                                $( 'body' ).removeClass( 'no-results' );
     288                        }
     289
    280290                        // Only trigger an update event since we already have the themes
    281291                        // on our cached object
    282292                        this.reset( query.themes );
     
    330340                        beforeSend: function() {
    331341                                if ( ! paginated ) {
    332342                                        // Spin it
    333                                         $( 'body' ).addClass( 'loading-themes' );
     343                                        $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
    334344                                }
    335345                        }
    336346                });
     
    704714                        }
    705715                });
    706716
     717                this.listenTo( self.collection, 'query:empty', function() {
     718                        $( 'body' ).addClass( 'no-results' );
     719                });
     720
    707721                this.listenTo( this.parent, 'theme:scroll', function() {
    708722                        self.renderThemes( self.parent.page );
    709723                });
     
    11431157                'click .theme-section': 'onSort',
    11441158                'click .theme-filter': 'onFilter',
    11451159                'click .more-filters': 'moreFilters',
    1146                 'click [type="checkbox"]': 'addFilter'
     1160                'click .apply-filters': 'addFilter',
     1161                'click [type="checkbox"]': 'filtersChecked',
     1162                'click .clear-filters': 'clearFilters',
     1163                'click .feature-name': 'filterSection'
    11471164        },
    11481165
    11491166        // Handles all the rendering of the public theme directory
     
    12171234
    12181235                event.preventDefault();
    12191236
     1237                $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
     1238
    12201239                // Bail if this is already active
    12211240                if ( $el.hasClass( this.activeClass ) ) {
    12221241                        return;
     
    12681287        // Clicking on a checkbox triggers a tag request
    12691288        addFilter: function() {
    12701289                var tags = this.filtersChecked(),
    1271                         request = { tag: tags };
     1290                        request = { tag: tags },
     1291                        filteringBy = $( '.filtering-by .tags' ),
     1292                        name;
    12721293
     1294                $( 'body' ).addClass( 'filters-applied' );
     1295                filteringBy.empty();
     1296
     1297                _.each( tags, function( tag ) {
     1298                        name = $( 'label[for="feature-id-' + tag + '"]' ).text();
     1299                        filteringBy.append( '<span class="tag">' + name + '</span>' );
     1300                });
     1301
    12731302                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    12741303                // or searching the local cache
    12751304                this.collection.query( request );
    12761305        },
    12771306
    1278         // Get the checked filters and return an array
     1307        // Get the checked filters
     1308        // @return {array} of tags or false
    12791309        filtersChecked: function() {
    12801310                var items = $( '.feature-group' ).find( ':checkbox' ),
    12811311                        tags = [];
     
    12841314                        tags.push( $( item ).prop( 'value' ) );
    12851315                });
    12861316
     1317                // When no filters are checked, restore initial state and return
     1318                if ( tags.length === 0 ) {
     1319                        $( '.apply-filters' ).find( 'span' ).text( '' );
     1320                        $( '.clear-filters' ).hide();
     1321                        $( 'body' ).removeClass( 'filters-applied' );
     1322                        return false;
     1323                }
     1324
     1325                $( '.apply-filters' ).find( 'span' ).text( tags.length );
     1326                $( '.clear-filters' ).css( 'display', 'inline-block' );
     1327
    12871328                return tags;
    12881329        },
    12891330
     
    13041345                });
    13051346        },
    13061347
     1348        // Toggle the full filters navigation
    13071349        moreFilters: function() {
     1350                if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
     1351                        return $( 'body' ).removeClass( 'filters-applied' );
     1352                }
     1353
     1354                // If the filters section is opened and filters are checked
     1355                // run the relevant query collapsing to filtered-by state
     1356                if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
     1357                        return this.addFilter();
     1358                }
     1359
    13081360                $( 'body' ).toggleClass( 'more-filters-opened' );
     1361        },
     1362
     1363        // Expand/collapse each individual filter section
     1364        filterSection: function() {
     1365                $( event.target ).parent().toggleClass( 'open' );
     1366        },
     1367
     1368        // Clears all the checked filters
     1369        // @uses filtersChecked()
     1370        clearFilters: function() {
     1371                var items = $( '.feature-group' ).find( ':checkbox' ),
     1372                        self = this;
     1373
     1374                _.each( items.filter( ':checked' ), function( item ) {
     1375                        $( item ).prop( 'checked', false );
     1376                        return self.filtersChecked();
     1377                });
    13091378        }
    13101379});
    13111380
  • 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" />