WordPress.org

Make WordPress Core

Changeset 27896


Ignore:
Timestamp:
04/01/14 22:19:51 (12 months 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.