WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/18/2014 03:39:04 AM (12 years ago)
Author:
helen
Message:

Use more generic, reusable CSS for the filter bar on Add Themes. This will allow us to reuse the UI in other places, such as the Media Library. props paulwilde. fixes #28794.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/theme-install.php

    r29031 r29217  
    135135        </div>
    136136
    137         <div class="theme-navigation">
    138                 <span class="theme-count"></span>
    139                 <a class="theme-section" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
    140                 <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
    141                 <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
    142                 <div class="theme-top-filters">
    143                         <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
    144                         <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
    145                         <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
    146                 </div>
    147                 <div class="more-filters-container">
    148                         <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
    149                         <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
    150                         <br class="clear" />
     137        <div class="wp-filter">
     138                <div class="wp-filter-count">
     139                        <span class="count theme-count"></span>
     140                </div>
     141
     142                <ul class="wp-filter-links">
     143                        <li><a class="wp-filter-link" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
     144                        <li><a class="wp-filter-link" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
     145                        <li><a class="wp-filter-link" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
     146                </ul>
     147
     148                <a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
     149
     150                <div class="wp-filter-drawer">
     151                        <div class="wp-filter-drawer-buttons">
     152                                <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
     153                                <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
     154                        </div>
    151155                <?php
    152156                $feature_list = get_theme_feature_list();
    153157                foreach ( $feature_list as $feature_name => $features ) {
    154158                        if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
    155                                 echo '<div class="filters-group wide-filters-group">';
     159                                echo '<div class="wp-filter-group wp-filter-group-wide">';
    156160                        } else {
    157                                 echo '<div class="filters-group">';
     161                                echo '<div class="wp-filter-group">';
    158162                        }
    159163                        $feature_name = esc_html( $feature_name );
    160                         echo '<h4 class="feature-name">' . $feature_name . '</h4>';
     164                        echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';
    161165                        echo '<ol class="feature-group">';
    162166                        foreach ( $features as $feature => $feature_name ) {
    163167                                $feature = esc_attr( $feature );
    164                                 echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
    165                                 echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
     168                                echo '<li><input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
     169                                echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label></li>';
    166170                        }
    167171                        echo '</ol>';
    … …  
    169173                }
    170174                ?>
    171                         <div class="filtering-by">
     175                        <div class="wp-filter-by">
    172176                                <span><?php _e( 'Filtering by:' ); ?></span>
    173177                                <div class="tags"></div>
    … …  
    176180                </div>
    177181        </div>
    178         <div class="theme-browser"></div>
     182        <div class="theme-browser wp-filter-content"></div>
    179183        <div class="theme-install-overlay wp-full-overlay expanded"></div>
    180184
Note: See TracChangeset for help on using the changeset viewer.