WordPress.org

Make WordPress Core

Ticket #27055: 27055.13.diff

File 27055.13.diff, 8.0 KB (added by matveb, 5 years ago)
  • 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 {
     
    11481156        transition: color .1s ease-in, background .1s ease-in;
    11491157}
    11501158body.more-filters-opened .more-filters,
    1151 .theme-navigation .more-filters.current {
     1159body.more-filters-opened .more-filters:before {
    11521160        background: rgb(46, 162, 204);
    11531161        border-radius: 2px;
    11541162        border: none;
     
    11971205body.more-filters-opened .more-filters-container {
    11981206        display: block;
    11991207}
     1208.more-filters-container .filters-group {
     1209        -moz-box-sizing: border-box;
     1210        box-sizing: border-box;
     1211        float: left;
     1212        width: 20%;
     1213}
     1214.more-filters-container .feature-name {
     1215        margin-top: 0;
     1216}
     1217.more-filters-container ol {
     1218        list-style-type: none;
     1219        margin: 0;
     1220}
     1221
    12001222.theme-install-php .add-new-theme {
    12011223        display: none !important;
    12021224}
    12031225
     1226@media only screen and (max-width: 1120px) {
     1227        .theme-install-php .theme-search {
     1228                margin: 20px 0;
     1229                position: static;
     1230                width: 100%;
     1231        }
     1232        .more-filters-container {
     1233                border-bottom: 1px solid #eee;
     1234        }
     1235        .upload-theme .wp-upload-form {
     1236                margin: 20px 0;
     1237                max-width: 100%;
     1238        }
     1239        .upload-theme .install-help {
     1240                font-size: 15px;
     1241                padding: 20px 0 0;
     1242                text-align: left;
     1243        }
     1244        .more-filters-container .filters-group {
     1245                width: 50%;
     1246        }
     1247        .more-filters-container .filters-group:nth-child(3n) {
     1248                clear: left;
     1249        }
     1250}
     1251
    12041252.rating {
    12051253        margin: 30px 0;
    12061254}
  • 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>