WordPress.org

Make WordPress Core

Changeset 27636


Ignore:
Timestamp:
03/20/2014 04:19:55 AM (5 years ago)
Author:
nacin
Message:

Theme installer:

  • Restore the feature filter.
  • Improve responsiveness.
  • Router updates, fixes.
  • Make "Upload Theme" button more consistent with the admin.
  • Avoid theme-count causing filters to jump.

props matveb.
see #27055.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/themes.css

    r27499 r27636  
    170170    opacity: 0;
    171171    position: absolute;
    172         top: 35%;
    173         right: 25%;
    174         left: 25%;
     172    top: 35%;
     173    right: 25%;
     174    left: 25%;
    175175    background: #222;
    176176    background: rgba(0,0,0,0.7);
     
    10661066------------------------------------------------------------------------------*/
    10671067
    1068 .theme-install-php h2 .upload {
    1069     margin-left: 10px;
    1070 }
    10711068.theme-navigation {
    10721069    background: #fff;
     
    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;
     
    10911099    overflow: hidden;
    10921100    position: relative;
    1093         top: 10px;
    1094 }
    1095 .upload-theme.opened {
     1101    top: 10px;
     1102}
     1103body.show-upload-theme .upload-theme {
    10961104    display: block;
    10971105}
     
    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;
     1129}
     1130.theme-count + .theme-section {
     1131    margin-left: 60px;
    11201132}
    11211133.theme-section,
     
    11431155    display: inline-block;
    11441156    margin: 0 10px;
    1145     padding: 4px 5px;
     1157    padding: 4px 6px;
    11461158    -moz-transition: color .1s ease-in, background .1s ease-in;
    11471159    -webkit-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;
     
    11571169.theme-install-php .theme-search {
    11581170    position: absolute;
    1159         right: 10px;
    1160         top: 9px;
     1171    right: 10px;
     1172    top: 9px;
    11611173    font-size: 16px;
    11621174    font-weight: 300;
     
    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;
     1228}
     1229
     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    }
    12021254}
    12031255
  • trunk/src/wp-admin/js/theme.js

    r27555 r27636  
    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
     
    11271128
    11281129        // @todo Cache the collection after fetching based on the filter
     1130        filter = _.union( filter, this.filtersChecked() );
    11291131        request = { tag: [ filter ] };
    11301132
     
    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
     
    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 } );
     1195        });
     1196        $( 'a.browse-themes' ).on( 'click', function() {
     1197            $( 'body' ).removeClass( 'show-upload-theme' );
     1198            themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
    11601199        });
    11611200    },
     
    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    },
     
    12241264            self.view.sort( sort );
    12251265            self.view.trigger( 'theme:close' );
     1266        });
     1267
     1268        themes.router.on( 'route:upload', function( slug ) {
     1269            $( 'a.upload' ).trigger( 'click' );
    12261270        });
    12271271
  • trunk/src/wp-admin/theme-install.php

    r27620 r27636  
    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
     
    118119        <span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
    119120        <div class="theme-top-filters">
    120             <span class="theme-filter" data-filter="photoblogging">Photography</span>
    121             <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
    122             <span class="theme-filter more-filters">More</span>
     121            <!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
     122            <span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
     123            <span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
    123124        </div>
    124125        <div class="more-filters-container">
    125             Display more filters.
     126        <?php
     127        $feature_list = get_theme_feature_list();
     128        foreach ( $feature_list as $feature_name => $features ) {
     129            echo '<div class="filters-group">';
     130            $feature_name = esc_html( $feature_name );
     131            echo '<h4 class="feature-name">' . $feature_name . '</h4>';
     132            echo '<ol class="feature-group">';
     133            foreach ( $features as $feature => $feature_name ) {
     134                $feature = esc_attr( $feature );
     135                echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
     136                echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
     137            }
     138            echo '</ol>';
     139            echo '</div>';
     140        }
     141        ?>
     142            <br class="clear" />
    126143        </div>
    127144    </div>
Note: See TracChangeset for help on using the changeset viewer.