WordPress.org

Make WordPress Core

Changeset 27896


Ignore:
Timestamp:
04/01/2014 10:19:51 PM (4 years ago)
Author:
nacin
Message:

Theme Installer fixes:

  • Better more filters section. props sonjanyc for some mockups.
  • Better handling of no results.
  • Use # for hrefs.

props matveb.
see #27055.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/themes.css

    r27804 r27896  
    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,
     
    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,
     
    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
     
    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;
     
    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    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    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1287    font-size: 11px;
     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}
     1302p.no-themes {
     1303    color: #999;
     1304    font-size: 18px;
     1305    font-style: normal;
     1306    margin: 0;
     1307    padding: 0;
     1308    text-align: center;
     1309    display: none;
     1310}
     1311body.no-results p.no-themes {
     1312    display: block;
     1313}
     1314body.show-upload-theme p.no-themes {
     1315    display: none !important;
     1316}
     1317
    12471318
    12481319.theme-install-php .add-new-theme {
     
    12691340    }
    12701341    .more-filters-container .filters-group {
    1271         width: 50%;
     1342        margin-bottom: 0;
     1343        margin-top: 5px;
     1344        width: 49%;
    12721345    }
    12731346    .more-filters-container .filters-group:nth-child(3n) {
    12741347        clear: left;
     1348    }
     1349}
     1350
     1351@media only screen and (max-width: 782px) {
     1352    .more-filters-container .filters-group {
     1353        width: 100%;
    12751354    }
    12761355}
     
    17181797    color: #777;
    17191798    line-height: 20px;
     1799    max-width: 100%;
    17201800}
    17211801
  • trunk/src/wp-admin/js/theme.js

    r27845 r27896  
    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 } );
     
    276280                    self.trigger( 'query:fail' );
    277281                });
     282            }
     283
     284            if ( query.themes.length === 0 ) {
     285                self.trigger( 'query:empty' );
     286            } else {
     287                $( 'body' ).removeClass( 'no-results' );
    278288            }
    279289
     
    331341                if ( ! paginated ) {
    332342                    // Spin it
    333                     $( 'body' ).addClass( 'loading-themes' );
     343                    $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
    334344                }
    335345            }
     
    658668
    659669    collapse: function() {
     670
    660671        this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
    661672        return false;
     
    703714                self.count.text( self.collection.length );
    704715            }
     716        });
     717
     718        this.listenTo( self.collection, 'query:empty', function() {
     719            $( 'body' ).addClass( 'no-results' );
    705720        });
    706721
     
    11441159        'click .theme-filter': 'onFilter',
    11451160        'click .more-filters': 'moreFilters',
    1146         'click [type="checkbox"]': 'addFilter'
     1161        'click .apply-filters': 'addFilter',
     1162        'click [type="checkbox"]': 'filtersChecked',
     1163        'click .clear-filters': 'clearFilters',
     1164        'click .feature-name': 'filterSection'
    11471165    },
    11481166
     
    12181236        event.preventDefault();
    12191237
     1238        $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
     1239
    12201240        // Bail if this is already active
    12211241        if ( $el.hasClass( this.activeClass ) ) {
     
    12671287
    12681288    // Clicking on a checkbox triggers a tag request
    1269     addFilter: function() {
    1270         var tags = this.filtersChecked(),
    1271             request = { tag: tags };
     1289    addFilter: function( event ) {
     1290        var name,
     1291            tags = this.filtersChecked(),
     1292            request = { tag: tags },
     1293            filteringBy = $( '.filtering-by .tags' );
     1294
     1295        if ( event ) {
     1296            event.preventDefault();
     1297        }
     1298
     1299        $( 'body' ).addClass( 'filters-applied' );
     1300        filteringBy.empty();
     1301
     1302        _.each( tags, function( tag ) {
     1303            name = $( 'label[for="feature-id-' + tag + '"]' ).text();
     1304            filteringBy.append( '<span class="tag">' + name + '</span>' );
     1305        });
    12721306
    12731307        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
     
    12761310    },
    12771311
    1278     // Get the checked filters and return an array
     1312    // Get the checked filters
     1313    // @return {array} of tags or false
    12791314    filtersChecked: function() {
    12801315        var items = $( '.feature-group' ).find( ':checkbox' ),
     
    12841319            tags.push( $( item ).prop( 'value' ) );
    12851320        });
     1321
     1322        // When no filters are checked, restore initial state and return
     1323        if ( tags.length === 0 ) {
     1324            $( '.apply-filters' ).find( 'span' ).text( '' );
     1325            $( '.clear-filters' ).hide();
     1326            $( 'body' ).removeClass( 'filters-applied' );
     1327            return false;
     1328        }
     1329
     1330        $( '.apply-filters' ).find( 'span' ).text( tags.length );
     1331        $( '.clear-filters' ).css( 'display', 'inline-block' );
    12861332
    12871333        return tags;
     
    13051351    },
    13061352
    1307     moreFilters: function() {
     1353    // Toggle the full filters navigation
     1354    moreFilters: function( event ) {
     1355        event.preventDefault();
     1356
     1357        if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
     1358            return $( 'body' ).removeClass( 'filters-applied' );
     1359        }
     1360
     1361        // If the filters section is opened and filters are checked
     1362        // run the relevant query collapsing to filtered-by state
     1363        if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
     1364            return this.addFilter();
     1365        }
     1366
    13081367        $( 'body' ).toggleClass( 'more-filters-opened' );
     1368    },
     1369
     1370    // Expand/collapse each individual filter section
     1371    filterSection: function() {
     1372        $( event.target ).parent().toggleClass( 'open' );
     1373    },
     1374
     1375    // Clears all the checked filters
     1376    // @uses filtersChecked()
     1377    clearFilters: function( event ) {
     1378        var items = $( '.feature-group' ).find( ':checkbox' ),
     1379            self = this;
     1380
     1381        event.preventDefault();
     1382
     1383        _.each( items.filter( ':checked' ), function( item ) {
     1384            $( item ).prop( 'checked', false );
     1385            return self.filtersChecked();
     1386        });
    13091387    }
    13101388});
  • trunk/src/wp-admin/theme-install.php

    r27804 r27896  
    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>-->
     121            <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
     122            <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
    123123            <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
    124124        </div>
     
    141141        ?>
    142142            <br class="clear" />
     143            <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
     144            <a class="clear-filters button button-secondary" href="#"><?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>
     
    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
     
    189196    <div class="wp-full-overlay-sidebar">
    190197        <div class="wp-full-overlay-header">
    191             <a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
     198            <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
    192199            <a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
    193200        </div>
     
    214221        </div>
    215222        <div class="wp-full-overlay-footer">
    216             <a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
     223            <a href="#" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    217224                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
    218225                <span class="collapse-sidebar-arrow"></span>
Note: See TracChangeset for help on using the changeset viewer.