WordPress.org
Get WordPress

Make WordPress Core

Changeset 29217


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.

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

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r29125 r29217  
    922922th.action-links {
    923923    text-align: right;
     924}
     925
     926/* Filter bar */
     927
     928.wp-title-count {
     929    display: inline;
     930    position: relative;
     931    top: -3px;
     932    margin-left: 5px;
     933    margin-right: 20px;
     934    padding: 4px 10px;
     935    -webkit-border-radius: 30px;
     936    border-radius: 30px;
     937    background: #777;
     938    color: #fff;
     939    font-size: 14px;
     940    font-weight: 600;
     941}
     942
     943.wp-filter {
     944    display: inline-block;
     945    position: relative;
     946    -webkit-box-sizing: border-box;
     947    -moz-box-sizing: border-box;
     948    box-sizing: border-box;
     949    margin: 12px 0 25px;
     950    padding: 0 20px;
     951    width: 100%;
     952    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     953    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     954    border: 1px solid #e5e5e5;
     955    background: #fff;
     956    color: #555;
     957    font-size: 13px;
     958}
     959
     960.wp-filter a {
     961    text-decoration: none;
     962}
     963
     964.wp-filter-count {
     965    display: inline-block;
     966    vertical-align: middle;
     967    min-width: 4em;
     968}
     969
     970.wp-filter-count .count {
     971    display: inline-block;
     972    position: relative;
     973    top: -1px;
     974    padding: 4px 10px;
     975    -webkit-border-radius: 30px;
     976    border-radius: 30px;
     977    background: #777;
     978    color: #fff;
     979    font-size: 14px;
     980    font-weight: 600;
     981}
     982
     983.wp-filter-links {
     984    display: inline-block;
     985    margin: 0;
     986}
     987
     988.wp-filter-links li {
     989    display: inline-block;
     990    margin: 0;
     991}
     992
     993.wp-filter-link {
     994    display: inline-block;
     995    margin: 0 10px;
     996    padding: 15px 0;
     997    border-bottom: 4px solid #fff;
     998    color: #666;
     999    cursor: pointer;
     1000}
     1001
     1002.wp-filter-links .current {
     1003    border-bottom: 4px solid #666;
     1004    color: #222;
     1005}
     1006
     1007.wp-filter-search {
     1008    position: absolute;
     1009    top: 9px;
     1010    right: 10px;
     1011    left: auto;
     1012    padding: 3px 5px;
     1013    width: 280px;
     1014    font-size: 16px;
     1015    font-weight: 300;
     1016    line-height: 1.5;
     1017}
     1018
     1019.wp-filter-drawer-toggle {
     1020    display: inline-block;
     1021    margin: 0 10px;
     1022    padding: 4px 6px;
     1023    color: #666;
     1024    cursor: pointer;
     1025}
     1026
     1027.wp-filter-drawer-toggle:before {
     1028    display: inline-block;
     1029    vertical-align: top;
     1030    content: "\f111";
     1031    margin: 0 5px 0 0;
     1032    width: 16px;
     1033    height: 16px;
     1034    color: #777;
     1035    -webkit-transition: color .1s ease-in 0;
     1036    transition: color .1s ease-in 0;
     1037    font-family: "dashicons";
     1038    font-size: 16px;
     1039    line-height: 1;
     1040    text-align: center;
     1041    text-decoration: inherit;
     1042    font-weight: normal;
     1043    font-style: normal;
     1044    -webkit-font-smoothing: antialiased;
     1045}
     1046
     1047.wp-filter-drawer-toggle:hover {
     1048    color: #777;
     1049}
     1050
     1051.wp-filter-drawer-toggle.current:before {
     1052    color: #fff;
     1053}
     1054
     1055.wp-filter-drawer {
     1056    display: none;
     1057    margin: 0 -20px;
     1058    padding: 20px;
     1059    border-top: 1px solid #eee;
     1060    background: #fafafa;
     1061}
     1062
     1063body.show-filter-drawer .wp-filter-drawer {
     1064    display: block;
     1065    overflow: hidden;
     1066}
     1067
     1068body.show-filter-drawer .wp-filter-drawer-toggle:hover,
     1069body.show-filter-drawer .wp-filter-drawer-toggle:focus {
     1070    background: rgb(46, 162, 204);
     1071}
     1072
     1073body.show-filter-drawer .wp-filter-link.current {
     1074    border-bottom: none;
     1075}
     1076
     1077body.show-filter-drawer .wp-filter-drawer-toggle {
     1078    -webkit-border-radius: 2px;
     1079    border-radius: 2px;
     1080    border: none;
     1081    background: #777;
     1082    color: #fff;
     1083}
     1084
     1085body.show-filter-drawer .wp-filter-drawer-toggle:before {
     1086    color: #fff;
     1087}
     1088
     1089.wp-filter-group {
     1090    -webkit-box-sizing: border-box;
     1091    -moz-box-sizing: border-box;
     1092    box-sizing: border-box;
     1093    float: left;
     1094    margin: 0 1% 0 0;
     1095    padding: 10px;
     1096    width: 19%;
     1097    background: #fff;
     1098    border: 1px solid #e5e5e5;
     1099    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1100    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1101}
     1102
     1103.wp-filter-group-wide {
     1104    width: 38%;
     1105}
     1106
     1107.wp-filter-group-title {
     1108    position: relative;
     1109    margin: 0;
     1110}
     1111
     1112.wp-filter-drawer ol {
     1113    margin: 20px 0 0;
     1114    list-style-type: none;
     1115    font-size: 12px;
     1116}
     1117
     1118.wp-filter-drawer li {
     1119    display: inline-block;
     1120    vertical-align: top;
     1121    margin: 5px 0;
     1122    padding-right: 25px;
     1123    width: 160px;
     1124    list-style-type: none;
     1125}
     1126
     1127.wp-filter-drawer-buttons {
     1128    margin-bottom: 20px;
     1129}
     1130
     1131.wp-filter .wp-filter-drawer-buttons .button span {
     1132    display: inline-block;
     1133    opacity: 0.8;
     1134    font-size: 12px;
     1135    text-indent: 10px;
     1136}
     1137
     1138.wp-filter .button.clear-filters {
     1139    display: none;
     1140    margin: 0 0 20px 10px;
     1141}
     1142
     1143.wp-filter-by {
     1144    display: none;
     1145    margin: 0;
     1146}
     1147
     1148.wp-filter-by > span {
     1149    font-weight: 600;
     1150}
     1151
     1152.wp-filter-by a {
     1153    margin-left: 10px;
     1154}
     1155
     1156.wp-filter-by .tags {
     1157    display: inline;
     1158}
     1159
     1160.wp-filter-by .tag {
     1161    margin: 0 5px;
     1162    padding: 4px 8px;
     1163    border: 1px solid #e5e5e5;
     1164    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1165    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     1166    background: #fff;
     1167    font-size: 11px;
     1168}
     1169
     1170body.filters-applied .wp-filter-group,
     1171body.filters-applied .wp-filter-drawer a.button,
     1172body.filters-applied .wp-filter-drawer br {
     1173    display: none !important;
     1174}
     1175
     1176body.filters-applied .wp-filter-by {
     1177    display: block;
     1178}
     1179
     1180body.filters-applied .wp-filter-drawer {
     1181    padding: 20px;
     1182}
     1183
     1184body.show-filter-drawer .wp-filter-content,
     1185body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
     1186    display: none;
     1187}
     1188
     1189body.show-filter-drawer.filters-applied .wp-filter-content {
     1190    display: block;
     1191}
     1192
     1193.loading-content .wp-filter-content,
     1194.error .wp-filter-content {
     1195    display: none;
     1196}
     1197
     1198.loading-content .spinner {
     1199    display: block;
     1200    margin: 40px auto 0;
     1201    float: none;
     1202}
     1203
     1204@media only screen and (max-width: 1120px) {
     1205    .wp-filter-search {
     1206        position: static;
     1207        margin: 20px 0;
     1208        width: 100%;
     1209    }
     1210
     1211    .wp-filter-drawer {
     1212        border-bottom: 1px solid #eee;
     1213    }
     1214
     1215    .wp-filter-group {
     1216        margin-bottom: 0;
     1217        margin-top: 5px;
     1218        width: 100%;
     1219    }
     1220
     1221    .wp-filter-group li {
     1222        margin: 10px 0;
     1223    }
     1224}
     1225
     1226@media only screen and (max-width: 782px) {
     1227    .wp-filter-group,
     1228    .wp-filter-group li {
     1229        width: 100%;
     1230    }
     1231
    9241232}
    9251233

  • trunk/src/wp-admin/css/themes.css

    r29124 r29217  
    2626}
    2727
    28 .themes-php .wrap .theme-count,
    29 .theme-navigation .theme-count {
    30     color: #fff;
    31     -webkit-border-radius: 30px;
    32     border-radius: 30px;
    33     background: #777;
    34     font-size: 14px;
    35     padding: 4px 10px;
    36     font-weight: 600;
    37     margin-left: 5px;
    38     margin-right: 20px;
     28/* Search form */
     29.themes-php .wp-filter-search {
    3930    position: relative;
    40     top: -3px;
    41 }
    42 
    43 .theme-navigation a {
    44     text-decoration:none;
     31    top: -2px;
     32    left: 20px;
     33    margin: 0;
     34    width: 280px;
     35    font-size: 16px;
     36    font-weight: 300;
     37    line-height: 1.5;
    4538}
    4639
    … …  
    402395}
    403396
    404 /*
    405  * The search form
    406  */
    407 .themes-php .theme-search {
    408     position: relative;
    409     top: -2px;
    410     left: 20px;
    411     font-size: 16px;
    412     font-weight: 300;
    413     line-height: 1.5;
    414     width: 280px;
    415 }
    416 
    417397/**
    418398 * Theme Overlay
    … …  
    10261006    }
    10271007
    1028     .themes-php .theme-search {
     1008    .themes-php .wp-filter-search {
    10291009        float: none;
    10301010        clear: both;
    … …  
    10891069}
    10901070
    1091 .theme-navigation {
    1092     background: #fff;
    1093     -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    1094     box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    1095     -webkit-box-sizing: border-box;
    1096     -moz-box-sizing: border-box;
    1097     box-sizing: border-box;
    1098     color: #555;
    1099     display: inline-block;
    1100     font-size: 13px;
    1101     margin: 20px 0 30px;
    1102     padding: 0 20px;
    1103     position: relative;
    1104     width: 100%;
    1105 }
    11061071.theme-install-php a.upload,
    11071072.theme-install-php a.browse-themes {
    … …  
    11201085    box-sizing: border-box;
    11211086    display: none;
    1122     margin: 0px 0 0;
     1087    margin: 0;
    11231088    padding: 0;
    11241089    width: 100%;
    … …  
    11451110    text-align: center;
    11461111}
    1147 body.show-upload-theme .upload-theme + .theme-navigation,
    1148 body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
     1112body.show-upload-theme .upload-theme + .wp-filter,
     1113body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
    11491114    display: none;
    11501115}
    1151 .theme-navigation .theme-count {
    1152     margin-left: 0;
    1153     position: absolute;
    1154     top: 12px;
    1155 }
    1156 .theme-count + .theme-section {
    1157     margin-left: 60px;
    1158 }
    1159 .theme-section,
    1160 .theme-filter {
    1161     border-bottom: 4px solid #fff;
    1162     color: #666;
    1163     cursor: pointer;
    1164     display: inline-block;
    1165     margin: 0 10px;
    1166     padding: 15px 0;
    1167 }
    1168 .theme-section.current,
    1169 .theme-filter.current {
    1170     border-bottom: 4px solid #666;
    1171     color: #222;
    1172 }
    1173 .theme-top-filters {
    1174     display: inline-block;
    1175 }
    1176 .theme-navigation .more-filters {
    1177     color: #666;
    1178     cursor: pointer;
    1179     display: inline-block;
    1180     margin: 0 10px;
    1181     padding: 4px 6px;
    1182 }
    1183 body.more-filters-opened .more-filters {
    1184     background: #777;
    1185     -webkit-border-radius: 2px;
    1186     border-radius: 2px;
    1187     border: none;
    1188     color: #fff;
    1189 }
    1190 
    1191 body.more-filters-opened .more-filters:before {
    1192     color: #fff;
    1193 }
    1194 
    1195 body.more-filters-opened .more-filters:hover,
    1196 body.more-filters-opened .more-filters:focus {
    1197     background: rgb(46, 162, 204);
    1198 }
    1199 
    1200 .theme-install-php .theme-search {
    1201     position: absolute;
    1202     right: 10px;
    1203     top: 9px;
    1204     font-size: 16px;
    1205     font-weight: 300;
    1206     line-height: 1.5;
    1207     width: 280px;
    1208 }
    1209 .more-filters:before {
    1210     color: #777;
    1211     text-align: center;
    1212     margin: 0 5px 0 0;
    1213     content: "\f111";
    1214     display: inline-block;
    1215     width: 16px;
    1216     height: 16px;
    1217     -webkit-font-smoothing: antialiased;
    1218     font-size: 16px;
    1219     line-height: 1;
    1220     font-family: "dashicons";
    1221     text-decoration: inherit;
    1222     font-weight: normal;
    1223     font-style: normal;
    1224     vertical-align: top;
    1225     -webkit-transition: color .1s ease-in 0;
    1226     transition: color .1s ease-in 0;
    1227     text-align: center;
    1228 }
    1229 .more-filters.current:before {
    1230     color: #fff;
    1231 }
    1232 .more-filters-container {
    1233     display: none;
    1234     padding: 20px;
    1235     border-top: 1px solid #eee;
    1236     margin: 0 -20px;
    1237     background: #fafafa;
    1238 }
    1239 body.more-filters-opened .more-filters-container {
    1240     display: block;
    1241     overflow: hidden;
    1242 }
    1243 body.more-filters-opened .theme-section.current {
    1244     border-bottom: none;
    1245 }
    1246 body.more-filters-opened .theme-browser,
    1247 body.more-filters-opened.filters-applied.loading-themes .theme-browser {
    1248     display: none;
    1249 }
    1250 body.more-filters-opened.filters-applied .theme-browser {
    1251     display: block;
    1252 }
    1253 .more-filters-container .filters-group {
    1254     -webkit-box-sizing: border-box;
    1255     -moz-box-sizing: border-box;
    1256     box-sizing: border-box;
    1257     float: left;
    1258     width: 19%;
    1259     background: #fff;
    1260     margin: 0 1% 0 0;
    1261     border: 1px solid #e5e5e5;
    1262     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1263     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1264     padding: 10px;
    1265 }
    1266 .more-filters-container .wide-filters-group {
    1267     width: 38%;
    1268 }
    1269 .more-filters-container .feature-name {
    1270     margin: 0;
    1271     position: relative;
    1272 }
    1273 .more-filters-container ol {
    1274     list-style-type: none;
    1275     margin: 20px 0 0;
    1276     font-size: 12px;
    1277 }
    1278 .more-filters-container li {
    1279     display: inline-block;
    1280     vertical-align: top;
    1281     list-style-type: none;
    1282     margin: 5px 0;
    1283     padding-right: 25px;
    1284     width: 160px;
    1285 }
    1286 .theme-navigation .more-filters-container .apply-filters {
    1287     margin: 0 0 20px;
    1288 }
    1289 .theme-navigation .more-filters-container .clear-filters {
    1290     display: none;
    1291     margin: 0 0 20px 10px;
    1292 }
    1293 .more-filters-container .apply-filters span {
    1294     display: inline-block;
    1295     font-size: 12px;
    1296     text-indent: 10px;
    1297     opacity: 0.8;
    1298 }
    1299 .more-filters-container .filtering-by {
    1300     display: none;
    1301     margin: 0;
    1302 }
    1303 .more-filters-container .filtering-by > span {
    1304     font-weight: 600;
    1305 }
    1306 .more-filters-container .filtering-by .tags {
    1307     display: inline;
    1308 }
    1309 .more-filters-container .filtering-by .tag {
    1310     background: #fff;
    1311     border: 1px solid #e5e5e5;
    1312     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1313     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1314     font-size: 11px;
    1315     margin: 0 5px;
    1316     padding: 4px 8px;
    1317 }
    1318 .more-filters-container .filtering-by a {
    1319     margin-left: 10px;
    1320 }
    1321 body.filters-applied .more-filters-container .filters-group,
    1322 body.filters-applied .more-filters-container a.button,
    1323 body.filters-applied .more-filters-container br {
    1324     display: none !important;
    1325 }
    1326 body.filters-applied .more-filters-container .filtering-by {
    1327     display: block;
    1328 }
    1329 body.filters-applied .more-filters-container {
    1330     padding: 20px;
    1331 }
     1116
    13321117p.no-themes {
    13331118    color: #999;
    … …  
    13461131}
    13471132
    1348 
    13491133.theme-install-php .add-new-theme {
    13501134    display: none !important;
    … …  
    13521136
    13531137@media only screen and (max-width: 1120px) {
    1354     .theme-install-php .theme-search {
    1355         margin: 20px 0;
    1356         position: static;
    1357         width: 100%;
    1358     }
    1359     .more-filters-container {
    1360         border-bottom: 1px solid #eee;
    1361     }
    13621138    .upload-theme .wp-upload-form {
    13631139        margin: 20px 0;
    … …  
    13681144        padding: 20px 0 0;
    13691145        text-align: left;
    1370     }
    1371     .more-filters-container .filters-group {
    1372         margin-bottom: 0;
    1373         margin-top: 5px;
    1374         width: 100%;
    1375     }
    1376     .more-filters-container .filters-group li {
    1377         margin: 10px 0;
    1378     }
    1379 }
    1380 
    1381 @media only screen and (max-width: 782px) {
    1382     .more-filters-container .filters-group {
    1383         width: 100%;
    1384     }
    1385     .more-filters-container .filters-group li {
    1386         width: 100%;
    13871146    }
    13881147}
    … …  
    14481207    line-height: 20px;
    14491208    color: #999;
    1450 }
    1451 .loading-themes .theme-browser,
    1452 .error .theme-browser {
    1453     display: none;
    1454 }
    1455 .loading-themes .spinner {
    1456     display: block;
    1457     margin: 40px auto 0;
    1458     float: none;
    14591209}
    14601210

  • trunk/src/wp-admin/js/theme.js

    r28890 r29217  
    106106        view.render();
    107107        this.searchContainer
    108             .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
     108            .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
    109109            .append( view.el );
    110110    },
    … …  
    343343                if ( ! paginated ) {
    344344                    // Spin it
    345                     $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
     345                    $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
    346346                }
    347347            }
    … …  
    10811081
    10821082    tagName: 'input',
    1083     className: 'theme-search',
    1084     id: 'theme-search-input',
     1083    className: 'wp-filter-search',
     1084    id: 'wp-filter-search-input',
    10851085    searching: false,
    10861086
    … …  
    11691169
    11701170    search: function( query ) {
    1171         $( '.theme-search' ).val( query );
     1171        $( '.wp-filter-search' ).val( query );
    11721172    },
    11731173
    11741174    themes: function() {
    1175         $( '.theme-search' ).val( '' );
     1175        $( '.wp-filter-search' ).val( '' );
    11761176    },
    11771177
    … …  
    12301230        // Handles search route event
    12311231        themes.router.on( 'route:search', function() {
    1232             $( '.theme-search' ).trigger( 'keyup' );
     1232            $( '.wp-filter-search' ).trigger( 'keyup' );
    12331233        });
    12341234
    … …  
    12891289        }
    12901290
    1291         $( '.theme-section.current' ).removeClass( 'current' );
    1292         $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
     1291        $( '.wp-filter-link.current' ).removeClass( 'current' );
     1292        $( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
    12931293
    12941294        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    … …  
    13071307    // Register events for sorting and filters in theme-navigation
    13081308    events: {
    1309         'click .theme-section': 'onSort',
     1309        'click .wp-filter-link': 'onSort',
    13101310        'click .theme-filter': 'onFilter',
    1311         'click .more-filters': 'moreFilters',
    1312         'click .apply-filters': 'applyFilters',
    1313         'click [type="checkbox"]': 'addFilter',
    1314         'click .clear-filters': 'clearFilters',
    1315         'click .feature-name': 'filterSection',
    1316         'click .filtering-by a': 'backToFilters'
     1311        'click .wp-filter-drawer-toggle': 'moreFilters',
     1312        'click .wp-filter-drawer .apply-filters': 'applyFilters',
     1313        'click .wp-filter-group [type="checkbox"]': 'addFilter',
     1314        'click .wp-filter-drawer .clear-filters': 'clearFilters',
     1315        'click .wp-filter-group-title': 'filterSection',
     1316        'click .wp-filter-by a': 'backToFilters'
    13171317    },
    13181318
    … …  
    13441344
    13451345        this.listenTo( this.collection, 'query:success', function() {
    1346             $( 'body' ).removeClass( 'loading-themes' );
     1346            $( 'body' ).removeClass( 'loading-content' );
    13471347            $( '.theme-browser' ).find( 'div.error' ).remove();
    13481348        });
    13491349
    13501350        this.listenTo( this.collection, 'query:fail', function() {
    1351             $( 'body' ).removeClass( 'loading-themes' );
     1351            $( 'body' ).removeClass( 'loading-content' );
    13521352            $( '.theme-browser' ).find( 'div.error' ).remove();
    13531353            $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
    … …  
    13871387        event.preventDefault();
    13881388
    1389         $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
     1389        $( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
    13901390
    13911391        // Bail if this is already active
    … …  
    14031403        this.clearSearch();
    14041404
    1405         $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
     1405        $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
    14061406        $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
    14071407
    … …  
    14201420        }
    14211421
    1422         $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
     1422        $( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass );
    14231423        $el.addClass( this.activeClass );
    14241424
    … …  
    14471447            tags = this.filtersChecked(),
    14481448            request = { tag: tags },
    1449             filteringBy = $( '.filtering-by .tags' );
     1449            filteringBy = $( '.wp-filter-by .tags' );
    14501450
    14511451        if ( event ) {
    … …  
    14541454
    14551455        $( 'body' ).addClass( 'filters-applied' );
    1456         $( '.theme-section.current' ).removeClass( 'current' );
     1456        $( '.wp-filter-link.current' ).removeClass( 'current' );
    14571457        filteringBy.empty();
    14581458
    14591459        _.each( tags, function( tag ) {
    1460             name = $( 'label[for="feature-id-' + tag + '"]' ).text();
     1460            name = $( 'label[for="filter-id-' + tag + '"]' ).text();
    14611461            filteringBy.append( '<span class="tag">' + name + '</span>' );
    14621462        });
    … …  
    14701470    // @return {array} of tags or false
    14711471    filtersChecked: function() {
    1472         var items = $( '.feature-group' ).find( ':checkbox' ),
     1472        var items = $( '.wp-filter-group' ).find( ':checkbox' ),
    14731473            tags = [];
    14741474
    … …  
    14791479        // When no filters are checked, restore initial state and return
    14801480        if ( tags.length === 0 ) {
    1481             $( '.apply-filters' ).find( 'span' ).text( '' );
    1482             $( '.clear-filters' ).hide();
     1481            $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' );
     1482            $( '.wp-filter-drawer .clear-filters' ).hide();
    14831483            $( 'body' ).removeClass( 'filters-applied' );
    14841484            return false;
    14851485        }
    14861486
    1487         $( '.apply-filters' ).find( 'span' ).text( tags.length );
    1488         $( '.clear-filters' ).css( 'display', 'inline-block' );
     1487        $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
     1488        $( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
    14891489
    14901490        return tags;
    … …  
    14951495    // Overwrite search container class to append search
    14961496    // in new location
    1497     searchContainer: $( '.theme-navigation' ),
     1497    searchContainer: $( '.wp-filter' ),
    14981498
    14991499    uploader: function() {
    … …  
    15201520        // If the filters section is opened and filters are checked
    15211521        // run the relevant query collapsing to filtered-by state
    1522         if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
     1522        if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) {
    15231523            return this.addFilter();
    15241524        }
    … …  
    15271527
    15281528        themes.router.navigate( themes.router.baseUrl( '' ) );
    1529         $( 'body' ).toggleClass( 'more-filters-opened' );
     1529        $( 'body' ).toggleClass( 'show-filter-drawer' );
    15301530    },
    15311531
    … …  
    15381538    // @uses filtersChecked()
    15391539    clearFilters: function( event ) {
    1540         var items = $( '.feature-group' ).find( ':checkbox' ),
     1540        var items = $( '.wp-filter-group' ).find( ':checkbox' ),
    15411541            self = this;
    15421542
    … …  
    15581558
    15591559    clearSearch: function() {
    1560         $( '#theme-search-input').val( '' );
     1560        $( '#wp-filter-search-input').val( '' );
    15611561    }
    15621562});
    … …  
    15761576
    15771577    search: function( query ) {
    1578         $( '.theme-search' ).val( query );
     1578        $( '.wp-filter-search' ).val( query );
    15791579    },
    15801580
    … …  
    16481648        // The `search` route event. The router populates the input field.
    16491649        themes.router.on( 'route:search', function() {
    1650             $( '.theme-search' ).focus().trigger( 'keyup' );
     1650            $( '.wp-filter-search' ).focus().trigger( 'keyup' );
    16511651        });
    16521652

  • 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

  • trunk/src/wp-admin/themes.php

    r29170 r29217  
    118118<div class="wrap">
    119119    <h2><?php esc_html_e( 'Themes' ); ?>
    120         <span class="theme-count"><?php echo count( $themes ); ?></span>
     120        <span class="wp-title-count theme-count"><?php echo count( $themes ); ?></span>
    121121    <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    122122        <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
Note: See TracChangeset for help on using the changeset viewer.