WordPress.org
Get WordPress

Make WordPress Core

Ticket #27055: 27055.26.diff

File 27055.26.diff, 9.8 KB (added by matveb, 12 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}
    … …  
    17171797        float: left;
    17181798        color: #777;
    17191799        line-height: 20px;
     1800        max-width: 100%;
    17201801}
    17211802
    17221803#theme-installer .wp-full-overlay-header {

  • wp-admin/js/theme.js

     
    229229                        self = this,
    230230                        query, isPaginated, count;
    231231
     232                console.log(this.currentQuery);
     233
    232234                // Search the query cache for matches.
    233235                query = _.find( queries, function( query ) {
    234236                        return _.isEqual( query.request, request );
    … …  
    255257                                self.trigger( 'update' );
    256258                                self.trigger( 'query:success', count );
    257259
     260                                if ( data.themes.length === 0 ) {
     261                                        self.trigger( 'query:empty' );
     262                                }
     263
    258264                                // Store the results and the query request
    259265                                queries.push( { themes: data.themes, request: request } );
    260266                        }).fail( function() {
    … …  
    277283                                });
    278284                        }
    279285
     286                        if ( query.themes.length === 0 ) {
     287                                self.trigger( 'query:empty' );
     288                        } else {
     289                                $( 'body' ).removeClass( 'no-results' );
     290                        }
     291
    280292                        // Only trigger an update event since we already have the themes
    281293                        // on our cached object
    282294                        this.reset( query.themes );
    … …  
    330342                        beforeSend: function() {
    331343                                if ( ! paginated ) {
    332344                                        // Spin it
    333                                         $( 'body' ).addClass( 'loading-themes' );
     345                                        $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
    334346                                }
    335347                        }
    336348                });
    … …  
    704716                        }
    705717                });
    706718
     719                this.listenTo( self.collection, 'query:empty', function() {
     720                        $( 'body' ).addClass( 'no-results' );
     721                });
     722
    707723                this.listenTo( this.parent, 'theme:scroll', function() {
    708724                        self.renderThemes( self.parent.page );
    709725                });
    … …  
    11431159                'click .theme-section': 'onSort',
    11441160                'click .theme-filter': 'onFilter',
    11451161                'click .more-filters': 'moreFilters',
    1146                 'click [type="checkbox"]': 'addFilter'
     1162                'click .apply-filters': 'addFilter',
     1163                'click [type="checkbox"]': 'filtersChecked',
     1164                'click .clear-filters': 'clearFilters',
     1165                'click .feature-name': 'filterSection'
    11471166        },
    11481167
    11491168        // Handles all the rendering of the public theme directory
    … …  
    12171236
    12181237                event.preventDefault();
    12191238
     1239                $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
     1240
    12201241                // Bail if this is already active
    12211242                if ( $el.hasClass( this.activeClass ) ) {
    12221243                        return;
    … …  
    12681289        // Clicking on a checkbox triggers a tag request
    12691290        addFilter: function() {
    12701291                var tags = this.filtersChecked(),
    1271                         request = { tag: tags };
     1292                        request = { tag: tags },
     1293                        filteringBy = $( '.filtering-by .tags' ),
     1294                        name;
    12721295
     1296                $( 'body' ).addClass( 'filters-applied' );
     1297                filteringBy.empty();
     1298
     1299                _.each( tags, function( tag ) {
     1300                        name = $( 'label[for="feature-id-' + tag + '"]' ).text();
     1301                        filteringBy.append( '<span class="tag">' + name + '</span>' );
     1302                });
     1303
    12731304                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    12741305                // or searching the local cache
    12751306                this.collection.query( request );
    12761307        },
    12771308
    1278         // Get the checked filters and return an array
     1309        // Get the checked filters
     1310        // @return {array} of tags or false
    12791311        filtersChecked: function() {
    12801312                var items = $( '.feature-group' ).find( ':checkbox' ),
    12811313                        tags = [];
    … …  
    12841316                        tags.push( $( item ).prop( 'value' ) );
    12851317                });
    12861318
     1319                // When no filters are checked, restore initial state and return
     1320                if ( tags.length === 0 ) {
     1321                        $( '.apply-filters' ).find( 'span' ).text( '' );
     1322                        $( '.clear-filters' ).hide();
     1323                        $( 'body' ).removeClass( 'filters-applied' );
     1324                        return false;
     1325                }
     1326
     1327                $( '.apply-filters' ).find( 'span' ).text( tags.length );
     1328                $( '.clear-filters' ).css( 'display', 'inline-block' );
     1329
    12871330                return tags;
    12881331        },
    12891332
    … …  
    13041347                });
    13051348        },
    13061349
     1350        // Toggle the full filters navigation
    13071351        moreFilters: function() {
     1352                if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
     1353                        return $( 'body' ).removeClass( 'filters-applied' );
     1354                }
     1355
     1356                // If the filters section is opened and filters are checked
     1357                // run the relevant query collapsing to filtered-by state
     1358                if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
     1359                        return this.addFilter();
     1360                }
     1361
    13081362                $( 'body' ).toggleClass( 'more-filters-opened' );
     1363        },
     1364
     1365        // Expand/collapse each individual filter section
     1366        filterSection: function() {
     1367                $( event.target ).parent().toggleClass( 'open' );
     1368        },
     1369
     1370        // Clears all the checked filters
     1371        // @uses filtersChecked()
     1372        clearFilters: function() {
     1373                var items = $( '.feature-group' ).find( ':checkbox' ),
     1374                        self = this;
     1375
     1376                _.each( items.filter( ':checked' ), function( item ) {
     1377                        $( item ).prop( 'checked', false );
     1378                        return self.filtersChecked();
     1379                });
    13091380        }
    13101381});
    13111382

  • 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" />