WordPress.org

Make WordPress Core

Ticket #27055: 27055.21.diff

File 27055.21.diff, 5.1 KB (added by matveb, 5 years ago)
  • 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'
    11471149        },
    11481150
    11491151        // Handles all the rendering of the public theme directory
     
    12751277                this.collection.query( request );
    12761278        },
    12771279
    1278         // Get the checked filters and return an array
     1280        // Get the checked filters
     1281        // @return {array} of tags or false
    12791282        filtersChecked: function() {
    12801283                var items = $( '.feature-group' ).find( ':checkbox' ),
    12811284                        tags = [];
     
    12841287                        tags.push( $( item ).prop( 'value' ) );
    12851288                });
    12861289
     1290                // When no filters are checked, restore initial state and return
     1291                if ( tags.length === 0 ) {
     1292                        $( '.apply-filters' ).find( 'span' ).text( '' );
     1293                        $( '.clear-filters' ).hide();
     1294                        return false;
     1295                }
     1296
     1297                $( '.apply-filters' ).find( 'span' ).text( tags.length );
     1298                $( '.clear-filters' ).css( 'display', 'inline-block' );
     1299
    12871300                return tags;
    12881301        },
    12891302
     
    13041317                });
    13051318        },
    13061319
     1320        // Toggle the full filters navigation and
     1321        // sets the handler for collapsing each individual section
    13071322        moreFilters: function() {
    13081323                $( 'body' ).toggleClass( 'more-filters-opened' );
     1324
     1325                $( '.feature-name' ).on( 'click', function() {
     1326                        $( this ).parent().toggleClass( 'open' );
     1327                });
     1328        },
     1329
     1330        // Clears all the checked filters
     1331        // @uses filtersChecked()
     1332        clearFilters: function() {
     1333                var items = $( '.feature-group' ).find( ':checkbox' ),
     1334                        self = this;
     1335
     1336                _.each( items.filter( ':checked' ), function( item ) {
     1337                        $( item ).prop( 'checked', false );
     1338                        return self.filtersChecked();
     1339                });
    13091340        }
    13101341});
    13111342
  • wp-admin/css/themes.css

     
    12351235        -moz-box-sizing: border-box;
    12361236        box-sizing: border-box;
    12371237        float: left;
    1238         width: 20%;
     1238        width: 19%;
     1239        background: #fff;
     1240        margin: 0 1% 0 0;
     1241        border: 1px solid #e5e5e5;
     1242        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1243        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1244        padding: 10px;
    12391245}
    12401246.more-filters-container .feature-name {
    1241         margin-top: 0;
     1247        cursor: pointer;
     1248        margin: 0;
     1249        position: relative;
    12421250}
     1251.filters-group .feature-name:after {
     1252        color: #aaa;
     1253        content: '\f140';
     1254        font: normal 20px/1 'dashicons';
     1255        speak: none;
     1256        display: inline-block;
     1257        position: absolute;
     1258                right: 0;
     1259                top: -2px;
     1260        -webkit-font-smoothing: antialiased;
     1261        -moz-osx-font-smoothing: grayscale;
     1262        text-decoration: none !important;
     1263}
     1264.filters-group:hover .feature-name:after {
     1265        color: #666;
     1266}
     1267.filters-group.open .feature-name:after {
     1268        content: '\f142';
     1269}
    12431270.more-filters-container ol {
    12441271        list-style-type: none;
    1245         margin: 0;
     1272        margin: 20px 0 0;
     1273        display: none;
     1274        font-size: 12px;
    12461275}
     1276.filters-group.open ol {
     1277        display: block;
     1278}
     1279.theme-navigation .more-filters-container .apply-filters {
     1280        margin: 20px 0 0;
     1281}
     1282.theme-navigation .more-filters-container .clear-filters {
     1283        display: none;
     1284        margin: 20px 0 0 10px;
     1285}
     1286.more-filters-container .apply-filters span {
     1287        display: inline-block;
     1288        font-size: 12px;
     1289        text-indent: 10px;
     1290        opacity: 0.8;
     1291}
    12471292
    12481293.theme-install-php .add-new-theme {
    12491294        display: none !important;
     
    12681313                text-align: left;
    12691314        }
    12701315        .more-filters-container .filters-group {
    1271                 width: 50%;
     1316                margin-bottom: 0;
     1317                margin-top: 5px;
     1318                width: 49%;
    12721319        }
    12731320        .more-filters-container .filters-group:nth-child(3n) {
    12741321                clear: left;
    12751322        }
    12761323}
    12771324
     1325@media only screen and (max-width: 782px) {
     1326        .more-filters-container .filters-group {
     1327                width: 100%;
     1328        }
     1329}
     1330
    12781331.rating {
    12791332        margin: 30px 0;
    12801333}
  • 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>
    143145                </div>
    144146        </div>
    145147        <div class="theme-browser"></div>