WordPress.org

Make WordPress Core

Ticket #27055: 27055.22.diff

File 27055.22.diff, 6.6 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}
    12331236.more-filters-container .filters-group {
    12341237        -webkit-box-sizing: border-box;
    12351238        -moz-box-sizing: border-box;
    12361239        box-sizing: border-box;
    12371240        float: left;
    1238         width: 20%;
     1241        width: 19%;
     1242        background: #fff;
     1243        margin: 0 1% 0 0;
     1244        border: 1px solid #e5e5e5;
     1245        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1246        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1247        padding: 10px;
    12391248}
    12401249.more-filters-container .feature-name {
    1241         margin-top: 0;
     1250        cursor: pointer;
     1251        margin: 0;
     1252        position: relative;
    12421253}
    12431254.more-filters-container ol {
    12441255        list-style-type: none;
     1256        margin: 20px 0 0;
     1257        display: block;
     1258        font-size: 12px;
     1259}
     1260.theme-navigation .more-filters-container .apply-filters {
     1261        margin: 20px 0 0;
     1262}
     1263.theme-navigation .more-filters-container .clear-filters {
     1264        display: none;
     1265        margin: 20px 0 0 10px;
     1266}
     1267.more-filters-container .apply-filters span {
     1268        display: inline-block;
     1269        font-size: 12px;
     1270        text-indent: 10px;
     1271        opacity: 0.8;
     1272}
     1273.more-filters-container .filtering-by {
     1274        display: none;
    12451275        margin: 0;
    12461276}
     1277.more-filters-container .filtering-by > span {
     1278        font-weight: 600;
     1279}
     1280.more-filters-container .filtering-by .tags {
     1281        display: inline;
     1282}
     1283.more-filters-container .filtering-by .tag {
     1284        background: #fff;
     1285        border: 1px solid #e5e5e5;
     1286        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1287        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1288        margin: 0 5px;
     1289        padding: 4px 8px;
     1290}
     1291body.filters-applied .more-filters-container .filters-group,
     1292body.filters-applied .more-filters-container a,
     1293body.filters-applied .more-filters-container br {
     1294        display: none !important;
     1295}
     1296body.filters-applied .more-filters-container .filtering-by {
     1297        display: block;
     1298}
     1299body.filters-applied .more-filters-container {
     1300        padding: 20px;
     1301}
    12471302
     1303
    12481304.theme-install-php .add-new-theme {
    12491305        display: none !important;
    12501306}
     
    12681324                text-align: left;
    12691325        }
    12701326        .more-filters-container .filters-group {
    1271                 width: 50%;
     1327                margin-bottom: 0;
     1328                margin-top: 5px;
     1329                width: 49%;
    12721330        }
    12731331        .more-filters-container .filters-group:nth-child(3n) {
    12741332                clear: left;
    12751333        }
    12761334}
    12771335
     1336@media only screen and (max-width: 782px) {
     1337        .more-filters-container .filters-group {
     1338                width: 100%;
     1339        }
     1340}
     1341
    12781342.rating {
    12791343        margin: 30px 0;
    12801344}
  • wp-admin/js/theme.js

     
    11431143                'click .theme-section': 'onSort',
    11441144                'click .theme-filter': 'onFilter',
    11451145                'click .more-filters': 'moreFilters',
    1146                 'click [type="checkbox"]': 'addFilter'
     1146                'click .apply-filters': 'addFilter',
     1147                'click [type="checkbox"]': 'filtersChecked',
     1148                'click .clear-filters': 'clearFilters',
     1149                'click .feature-name': 'filterSection'
    11471150        },
    11481151
    11491152        // Handles all the rendering of the public theme directory
     
    12171220
    12181221                event.preventDefault();
    12191222
     1223                $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
     1224
    12201225                // Bail if this is already active
    12211226                if ( $el.hasClass( this.activeClass ) ) {
    12221227                        return;
     
    12681273        // Clicking on a checkbox triggers a tag request
    12691274        addFilter: function() {
    12701275                var tags = this.filtersChecked(),
    1271                         request = { tag: tags };
     1276                        request = { tag: tags },
     1277                        filteringBy = $( '.filtering-by .tags' );
    12721278
     1279                $( 'body' ).addClass( 'filters-applied' );
     1280                filteringBy.empty();
     1281
     1282                _.each( tags, function( tag ) {
     1283                        filteringBy.append( '<span class="tag">' + tag + '</span>' );
     1284                });
     1285
    12731286                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    12741287                // or searching the local cache
    12751288                this.collection.query( request );
    12761289        },
    12771290
    1278         // Get the checked filters and return an array
     1291        // Get the checked filters
     1292        // @return {array} of tags or false
    12791293        filtersChecked: function() {
    12801294                var items = $( '.feature-group' ).find( ':checkbox' ),
    12811295                        tags = [];
     
    12841298                        tags.push( $( item ).prop( 'value' ) );
    12851299                });
    12861300
     1301                // When no filters are checked, restore initial state and return
     1302                if ( tags.length === 0 ) {
     1303                        $( '.apply-filters' ).find( 'span' ).text( '' );
     1304                        $( '.clear-filters' ).hide();
     1305                        $( 'body' ).removeClass( 'filters-applied' );
     1306                        return false;
     1307                }
     1308
     1309                $( '.apply-filters' ).find( 'span' ).text( tags.length );
     1310                $( '.clear-filters' ).css( 'display', 'inline-block' );
     1311
    12871312                return tags;
    12881313        },
    12891314
     
    13041329                });
    13051330        },
    13061331
     1332        // Toggle the full filters navigation
    13071333        moreFilters: function() {
     1334                if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
     1335                        return $( 'body' ).removeClass( 'filters-applied' );
     1336                }
     1337
    13081338                $( 'body' ).toggleClass( 'more-filters-opened' );
     1339        },
     1340
     1341        // Expand/collapse each individual filter section
     1342        filterSection: function() {
     1343                $( event.target ).parent().toggleClass( 'open' );
     1344        },
     1345
     1346        // Clears all the checked filters
     1347        // @uses filtersChecked()
     1348        clearFilters: function() {
     1349                var items = $( '.feature-group' ).find( ':checkbox' ),
     1350                        self = this;
     1351
     1352                _.each( items.filter( ':checked' ), function( item ) {
     1353                        $( item ).prop( 'checked', false );
     1354                        return self.filtersChecked();
     1355                });
    13091356        }
    13101357});
    13111358
  • 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>