WordPress.org
Get WordPress

Make WordPress Core

Ticket #27055: 27055.14.diff

File 27055.14.diff, 8.2 KB (added by matveb, 12 years ago)

Fix theme-count changing the left padding of the filters bar

  • wp-admin/includes/theme-install.php

     
    134134}
    135135// add_action('install_themes_dashboard', 'install_themes_dashboard');
    136136
     137/**
     138 * Display all the available tag filters.
     139 *
     140 * @since 3.9.0
     141 */
     142function install_themes_more_filters() {
     143
     144        $feature_list = get_theme_feature_list();
     145
     146        foreach ( (array) $feature_list as $feature_name => $features ) {
     147                echo '<div class="filters-group">';
     148                $feature_name = esc_html( $feature_name );
     149                echo '<h4 class="feature-name">' . $feature_name . '</h4>';
     150
     151                echo '<ol class="feature-group">';
     152                foreach ( $features as $feature => $feature_name ) {
     153                        $feature_name = esc_html( $feature_name );
     154                        $feature = esc_attr($feature);
     155        ?>
     156                <li>
     157                        <input type="checkbox" name="features[]" id="feature-id-<?php echo $feature; ?>" value="<?php echo $feature; ?>" />
     158                        <label for="feature-id-<?php echo $feature; ?>"><?php echo $feature_name; ?></label>
     159                </li>
     160        <?php } ?>
     161        </ol>
     162        </div>
     163        <?php } ?>
     164        <br class="clear" />
     165<?php
     166}
     167
    137168function install_themes_upload() {
    138169?>
    139170<p class="install-help"><?php _e('If you have a theme in a .zip format, you may install it by uploading it here.'); ?></p>

  • wp-admin/js/theme.js

     
    992992        events: {
    993993                'click .theme-section': 'onSort',
    994994                'click .theme-filter': 'onFilter',
    995                 'click .more-filters': 'moreFilters'
     995                'click .more-filters': 'moreFilters',
     996                'click [type="checkbox"]': 'addFilter'
    996997        },
    997998
    998999        // Send Ajax POST request to api.wordpress.org/themes
    … …  
    11261127                // using the default values
    11271128
    11281129                // @todo Cache the collection after fetching based on the filter
     1130                filter = _.union( filter, this.filtersChecked() );
    11291131                request = { tag: [ filter ] };
    11301132
    11311133                // Send Ajax POST request to api.wordpress.org/themes
    … …  
    11461148                return false;
    11471149        },
    11481150
     1151        // Clicking on a checkbox triggers a tag request
     1152        addFilter: function() {
     1153                var self = this,
     1154                        tags = this.filtersChecked(),
     1155                        request = { tag: tags };
     1156
     1157                // Send Ajax POST request to api.wordpress.org/themes
     1158                this.apiCall( request ).done( function( data ) {
     1159                                // Update the collection with the queried data
     1160                                self.collection.reset( data.themes );
     1161                                // Trigger a collection refresh event to render the views
     1162                                self.collection.trigger( 'update' );
     1163
     1164                                // Un-spin it
     1165                                $( 'body' ).removeClass( 'loading-themes' );
     1166                                $( '.theme-browser' ).find( 'div.error' ).remove();
     1167                }).fail( function() {
     1168                                $( '.theme-browser' ).find( 'div.error' ).remove();
     1169                                $( '.theme-browser' ).append( '<div class="error"><p>' + l10n.error + '</p></div>' );
     1170                });
     1171        },
     1172
     1173        // Get the checked filters and return an array
     1174        filtersChecked: function() {
     1175                var items =     $( '.feature-group' ).find( ':checkbox' ),
     1176                        tags = [];
     1177
     1178                _.each( items.filter( ':checked' ), function( item ) {
     1179                        tags.push( $( item ).prop( 'value' ) );
     1180                });
     1181
     1182                return tags;
     1183        },
     1184
    11491185        activeClass: 'current',
    11501186
    11511187        // Overwrite search container class to append search
    … …  
    11531189        searchContainer: $( '.theme-navigation' ),
    11541190
    11551191        uploader: function() {
    1156                 $( 'a.upload.button' ).on( 'click', function() {
    1157                         $( '.upload-theme' )
    1158                                 .toggleClass( 'opened' )
    1159                                 .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
     1192                $( 'a.upload' ).on( 'click', function() {
     1193                        $( 'body' ).addClass( 'show-upload-theme' );
     1194                        themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
    11601195                });
     1196                $( 'a.browse-themes' ).on( 'click', function() {
     1197                        $( 'body' ).removeClass( 'show-upload-theme' );
     1198                        themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
     1199                });
    11611200        },
    11621201
    11631202        moreFilters: function() {
    … …  
    11681207themes.InstallerRouter = Backbone.Router.extend({
    11691208        routes: {
    11701209                'theme-install.php?theme=:slug': 'preview',
    1171                 'theme-install.php(?sort=:sort)': 'sort',
     1210                'theme-install.php?sort=:sort': 'sort',
     1211                'theme-install.php?upload': 'upload',
    11721212                '': 'sort'
    11731213        },
    11741214
    … …  
    12251265                        self.view.trigger( 'theme:close' );
    12261266                });
    12271267
     1268                themes.router.on( 'route:upload', function( slug ) {
     1269                        $( 'a.upload' ).trigger( 'click' );
     1270                });
     1271
    12281272                this.extraRoutes();
    12291273        },
    12301274

  • wp-admin/css/themes.css

     
    10651065  16.2 - Install Themes
    10661066------------------------------------------------------------------------------*/
    10671067
    1068 .theme-install-php h2 .upload {
    1069         margin-left: 10px;
    1070 }
    10711068.theme-navigation {
    10721069        background: #fff;
    10731070        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    … …  
    10811078        position: relative;
    10821079        width: 100%;
    10831080}
     1081.theme-install-php a.upload,
     1082.theme-install-php a.browse-themes {
     1083        cursor: pointer;
     1084}
     1085.theme-install-php a.browse-themes,
     1086.theme-install-php.show-upload-theme a.upload {
     1087        display: none;
     1088}
     1089.theme-install-php.show-upload-theme a.browse-themes {
     1090        display: inline;
     1091}
    10841092.upload-theme {
    10851093        -moz-box-sizing: border-box;
    10861094        box-sizing: border-box;
    … …  
    10921100        position: relative;
    10931101                top: 10px;
    10941102}
    1095 .upload-theme.opened {
     1103body.show-upload-theme .upload-theme {
    10961104        display: block;
    10971105}
    10981106.upload-theme .wp-upload-form {
    … …  
    11101118        padding: 40px 0 0;
    11111119        text-align: center;
    11121120}
    1113 .upload-theme.opened + .theme-navigation,
    1114 .upload-theme.opened + .theme-navigation + .theme-browser {
     1121body.show-upload-theme .upload-theme + .theme-navigation,
     1122body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
    11151123        display: none;
    11161124}
    11171125.theme-navigation .theme-count {
    1118         top: 3px;
    11191126        margin-left: 0;
     1127        position: absolute;
     1128                top: 12px;
    11201129}
     1130.theme-count + .theme-section {
     1131        margin-left: 60px;
     1132}
    11211133.theme-section,
    11221134.theme-filter {
    11231135        border-bottom: 4px solid #fff;
    … …  
    11481160        transition: color .1s ease-in, background .1s ease-in;
    11491161}
    11501162body.more-filters-opened .more-filters,
    1151 .theme-navigation .more-filters.current {
     1163body.more-filters-opened .more-filters:before {
    11521164        background: rgb(46, 162, 204);
    11531165        border-radius: 2px;
    11541166        border: none;
    … …  
    11971209body.more-filters-opened .more-filters-container {
    11981210        display: block;
    11991211}
     1212.more-filters-container .filters-group {
     1213        -moz-box-sizing: border-box;
     1214        box-sizing: border-box;
     1215        float: left;
     1216        width: 20%;
     1217}
     1218.more-filters-container .feature-name {
     1219        margin-top: 0;
     1220}
     1221.more-filters-container ol {
     1222        list-style-type: none;
     1223        margin: 0;
     1224}
     1225
    12001226.theme-install-php .add-new-theme {
    12011227        display: none !important;
    12021228}
    12031229
     1230@media only screen and (max-width: 1120px) {
     1231        .theme-install-php .theme-search {
     1232                margin: 20px 0;
     1233                position: static;
     1234                width: 100%;
     1235        }
     1236        .more-filters-container {
     1237                border-bottom: 1px solid #eee;
     1238        }
     1239        .upload-theme .wp-upload-form {
     1240                margin: 20px 0;
     1241                max-width: 100%;
     1242        }
     1243        .upload-theme .install-help {
     1244                font-size: 15px;
     1245                padding: 20px 0 0;
     1246                text-align: left;
     1247        }
     1248        .more-filters-container .filters-group {
     1249                width: 50%;
     1250        }
     1251        .more-filters-container .filters-group:nth-child(3n) {
     1252                clear: left;
     1253        }
     1254}
     1255
    12041256.rating {
    12051257        margin: 30px 0;
    12061258}

  • wp-admin/theme-install.php

     
    104104<div class="wrap">
    105105        <h2>
    106106                <?php echo esc_html( $title ); ?>
    107                 <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
     107                <a class="upload add-new-h2"><?php esc_html_e( 'Upload Theme' ); ?></a>
     108                <a class="browse-themes add-new-h2"><?php esc_html_e( 'Browse' ); ?></a>
    108109        </h2>
    109110
    110111        <div class="upload-theme">
    … …  
    119120                <div class="theme-top-filters">
    120121                        <span class="theme-filter" data-filter="photoblogging">Photography</span>
    121122                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
    122                         <span class="theme-filter more-filters">More</span>
     123                        <span class="more-filters">More</span>
    123124                </div>
    124125                <div class="more-filters-container">
    125                         Display more filters.
     126                        <?php install_themes_more_filters(); ?>
    126127                </div>
    127128        </div>
    128129        <div class="theme-browser"></div>