WordPress.org

Make WordPress Core

Ticket #27055: 27055.25.diff

File 27055.25.diff, 9.4 KB (added by matveb, 5 years ago)
  • wp-admin/css/themes.css

     
    11501150        display: inline-block;
    11511151        margin: 0 10px;
    11521152        padding: 15px 0;
    1153         -webkit-transition: border-color .1s ease-in;
    1154         transition: border-color .1s ease-in;
    11551153}
    11561154.theme-section.current,
    11571155.theme-filter.current {
     
    11671165        display: inline-block;
    11681166        margin: 0 10px;
    11691167        padding: 4px 6px;
    1170         -webkit-transition: color .1s ease-in, background .1s ease-in;
    1171         transition: color .1s ease-in, background .1s ease-in;
    11721168}
    11731169body.more-filters-opened .more-filters,
    11741170body.more-filters-opened .more-filters:before {
     
    11771173        border-radius: 2px;
    11781174        border: none;
    11791175        color: #fff;
    1180         -webkit-transition: color .1s ease-in, background .1s ease-in;
    1181         transition: color .1s ease-in, background .1s ease-in;
    11821176}
    11831177
    11841178body.more-filters-opened .more-filters:hover,
     
    12301224body.more-filters-opened .more-filters-container {
    12311225        display: block;
    12321226}
     1227body.more-filters-opened .theme-section.current {
     1228        border-bottom: none;
     1229}
     1230body.more-filters-opened .theme-browser,
     1231body.more-filters-opened.filters-applied.loading-themes .theme-browser {
     1232        display: none;
     1233}
     1234body.more-filters-opened.filters-applied .theme-browser {
     1235        display: block;
     1236}
    12331237.more-filters-container .filters-group {
    12341238        -webkit-box-sizing: border-box;
    12351239        -moz-box-sizing: border-box;
    12361240        box-sizing: border-box;
    12371241        float: left;
    1238         width: 20%;
     1242        width: 19%;
     1243        background: #fff;
     1244        margin: 0 1% 0 0;
     1245        border: 1px solid #e5e5e5;
     1246        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1247        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1248        padding: 10px;
    12391249}
    12401250.more-filters-container .feature-name {
    1241         margin-top: 0;
     1251        cursor: pointer;
     1252        margin: 0;
     1253        position: relative;
    12421254}
    12431255.more-filters-container ol {
    12441256        list-style-type: none;
     1257        margin: 20px 0 0;
     1258        display: block;
     1259        font-size: 12px;
     1260}
     1261.theme-navigation .more-filters-container .apply-filters {
     1262        margin: 20px 0 0;
     1263}
     1264.theme-navigation .more-filters-container .clear-filters {
     1265        display: none;
     1266        margin: 20px 0 0 10px;
     1267}
     1268.more-filters-container .apply-filters span {
     1269        display: inline-block;
     1270        font-size: 12px;
     1271        text-indent: 10px;
     1272        opacity: 0.8;
     1273}
     1274.more-filters-container .filtering-by {
     1275        display: none;
    12451276        margin: 0;
    12461277}
     1278.more-filters-container .filtering-by > span {
     1279        font-weight: 600;
     1280}
     1281.more-filters-container .filtering-by .tags {
     1282        display: inline;
     1283}
     1284.more-filters-container .filtering-by .tag {
     1285        background: #fff;
     1286        border: 1px solid #e5e5e5;
     1287        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1288        font-size: 11px;
     1289        margin: 0 5px;
     1290        padding: 4px 8px;
     1291}
     1292body.filters-applied .more-filters-container .filters-group,
     1293body.filters-applied .more-filters-container a,
     1294body.filters-applied .more-filters-container br {
     1295        display: none !important;
     1296}
     1297body.filters-applied .more-filters-container .filtering-by {
     1298        display: block;
     1299}
     1300body.filters-applied .more-filters-container {
     1301        padding: 20px;
     1302}
     1303p.no-themes {
     1304        color: #999;
     1305        font-size: 18px;
     1306        font-style: normal;
     1307        margin: 0;
     1308        padding: 0;
     1309        text-align: center;
     1310        display: none;
     1311}
     1312body.no-results p.no-themes {
     1313        display: block;
     1314}
     1315body.show-upload-theme p.no-themes {
     1316        display: none !important;
     1317}
    12471318
     1319
    12481320.theme-install-php .add-new-theme {
    12491321        display: none !important;
    12501322}
     
    12681340                text-align: left;
    12691341        }
    12701342        .more-filters-container .filters-group {
    1271                 width: 50%;
     1343                margin-bottom: 0;
     1344                margin-top: 5px;
     1345                width: 49%;
    12721346        }
    12731347        .more-filters-container .filters-group:nth-child(3n) {
    12741348                clear: left;
    12751349        }
    12761350}
    12771351
     1352@media only screen and (max-width: 782px) {
     1353        .more-filters-container .filters-group {
     1354                width: 100%;
     1355        }
     1356}
     1357
    12781358.rating {
    12791359        margin: 30px 0;
    12801360}
  • 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" />