WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/18/2014 03:39:04 AM (10 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.