WordPress.org
Get WordPress

Make WordPress Core

Ticket #28794: 28794.diff

File 28794.diff, 28.5 KB (added by paulwilde, 10 years ago)

  • trunk/src/wp-admin/css/colors/_admin.scss

     
    434434        background: $highlight-color;
    435435}
    436436
    437 .theme-section.current,
    438 .theme-filter.current {
     437/* Filter */
     438
     439.wp-filter-link.current {
    439440        border-bottom-color: $menu-background;
    440441}
    441442
    442 body.more-filters-opened .more-filters,
    443 body.more-filters-opened .more-filters:before {
     443body.show-filter-drawer .wp-filter-drawer-toggle {
    444444        color: $menu-text;
    445445        background-color: $menu-background;
    446446}
    447447
    448 body.more-filters-opened .more-filters:hover,
    449 body.more-filters-opened .more-filters:focus,
    450 body.more-filters-opened .more-filters:hover:before,
    451 body.more-filters-opened .more-filters:focus:before {
     448body.show-filter-drawer .wp-filter-drawer-toggle:before  {
     449        color: $menu-text;
     450}
     451
     452body.show-filter-drawer .wp-filter-drawer-toggle:hover,
     453body.show-filter-drawer .wp-filter-drawer-toggle:focus {
    452454        background-color: $menu-highlight-background;
    453455        color: $menu-highlight-text;
    454456}
    455457
     458body.show-filter-drawer .wp-filter-drawer-toggle:hover:before,
     459body.show-filter-drawer .wp-filter-drawer-toggle:focus:before {
     460        color: $menu-highlight-text;
     461}
     462
    456463/* Widgets */
    457464
    458465.widgets-chooser li.widgets-chooser-selected {

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

     
    627627        padding-right: 0;
    628628}
    629629
     630.wp-title-count {
     631        display: inline;
     632        padding: 4px 10px;
     633        -webkit-border-radius: 30px;
     634        border-radius: 30px;
     635        background: #777;
     636        font-size: 14px;
     637        font-weight: 600;
     638        color: #fff;
     639        position: relative;
     640        top: -3px;
     641        margin-left: 5px;
     642        margin-right: 20px;
     643}
     644
    630645.wp-dialog {
    631646        background-color: #fff;
    632647}

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

     
     1.wp-filter {
     2        background: #fff;
     3        border: 1px solid #e5e5e5;
     4        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     5        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     6        -webkit-box-sizing: border-box;
     7        -moz-box-sizing: border-box;
     8        box-sizing: border-box;
     9        color: #555;
     10        display: inline-block;
     11        font-size: 13px;
     12        margin: 12px 0 25px;
     13        padding: 0 20px;
     14        position: relative;
     15        width: 100%;
     16}
     17.wp-filter a {
     18        text-decoration: none;
     19}
     20
     21.wp-filter-count {
     22        display: inline-block;
     23        vertical-align: middle;
     24        min-width: 4em;
     25}
     26.wp-filter-count .count {
     27        display: inline-block;
     28        padding: 4px 10px;
     29        -webkit-border-radius: 30px;
     30        border-radius: 30px;
     31        background: #777;
     32        font-size: 14px;
     33        font-weight: 600;
     34        color: #fff;
     35        position: relative;
     36        top: -1px;
     37}
     38
     39.wp-filter-links {
     40        margin: 0;
     41        display: inline-block;
     42}
     43.wp-filter-links li {
     44        margin: 0;
     45        display: inline-block;
     46}
     47.wp-filter-link {
     48        border-bottom: 4px solid #fff;
     49        color: #666;
     50        cursor: pointer;
     51        display: inline-block;
     52        margin: 0 10px;
     53        padding: 15px 0;
     54}
     55.wp-filter-links .current {
     56        border-bottom: 4px solid #666;
     57        color: #222;
     58}
     59
     60.wp-filter-search {
     61        position: absolute;
     62        right: 10px;
     63        top: 9px;
     64        left: auto;
     65        font-size: 16px;
     66        font-weight: 300;
     67        line-height: 1.5;
     68        width: 280px;
     69        padding: 3px 5px;
     70}
     71
     72.wp-filter-drawer-toggle {
     73        color: #666;
     74        cursor: pointer;
     75        display: inline-block;
     76        margin: 0 10px;
     77        padding: 4px 6px;
     78}
     79.wp-filter-drawer-toggle:before {
     80        color: #777;
     81        text-align: center;
     82        margin: 0 5px 0 0;
     83        content: "\f111";
     84        display: inline-block;
     85        width: 16px;
     86        height: 16px;
     87        -webkit-font-smoothing: antialiased;
     88        font-size: 16px;
     89        line-height: 1;
     90        font-family: "dashicons";
     91        text-decoration: inherit;
     92        font-weight: normal;
     93        font-style: normal;
     94        vertical-align: top;
     95        -webkit-transition: color .1s ease-in 0;
     96        transition: color .1s ease-in 0;
     97        text-align: center;     
     98}
     99.wp-filter-drawer-toggle:hover {
     100        color: #777;
     101}
     102.wp-filter-drawer-toggle.current:before {
     103        color: #fff;
     104}
     105
     106.wp-filter-drawer {
     107        display: none;
     108        padding: 20px;
     109        border-top: 1px solid #eee;
     110        margin: 0 -20px;
     111        background: #fafafa;
     112}
     113body.show-filter-drawer .wp-filter-drawer {
     114        display: block;
     115        overflow: hidden;
     116}
     117body.show-filter-drawer .wp-filter-drawer-toggle:hover,
     118body.show-filter-drawer .wp-filter-drawer-toggle:focus {
     119        background: rgb(46, 162, 204);
     120}
     121body.show-filter-drawer .wp-filter-link.current {
     122        border-bottom: none;
     123}
     124
     125body.show-filter-drawer .wp-filter-drawer-toggle {
     126        background: #777;
     127        -webkit-border-radius: 2px;
     128        border-radius: 2px;
     129        border: none;
     130        color: #fff;
     131}
     132body.show-filter-drawer .wp-filter-drawer-toggle:before {
     133        color: #fff;
     134}
     135
     136.wp-filter-group {
     137        -webkit-box-sizing: border-box;
     138        -moz-box-sizing: border-box;
     139        box-sizing: border-box;
     140        float: left;
     141        width: 19%;
     142        background: #fff;
     143        margin: 0 1% 0 0;
     144        border: 1px solid #e5e5e5;
     145        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     146        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     147        padding: 10px;
     148}
     149.wp-filter-group-wide {
     150        width: 38%;
     151}
     152.wp-filter-group-title {
     153        margin: 0;
     154        position: relative;
     155}
     156
     157.wp-filter-drawer ol {
     158        list-style-type: none;
     159        margin: 20px 0 0;
     160        font-size: 12px;
     161}
     162.wp-filter-drawer li {
     163        display: inline-block;
     164        vertical-align: top;
     165        list-style-type: none;
     166        margin: 5px 0;
     167        padding-right: 25px;
     168        width: 160px;
     169}
     170
     171.wp-filter .button.wp-filter-drawer-apply {
     172        margin: 0 0 20px;
     173}
     174.wp-filter .button.wp-filter-drawer-apply span {
     175        display: inline-block;
     176        font-size: 12px;
     177        text-indent: 10px;
     178        opacity: 0.8;
     179}
     180.wp-filter .button.wp-filter-drawer-clear {
     181        display: none;
     182        margin: 0 0 20px 10px;
     183}
     184
     185.wp-filter-by {
     186        display: none;
     187        margin: 0;
     188}
     189.wp-filter-by > span {
     190        font-weight: 600;
     191}
     192.wp-filter-by a {
     193        margin-left: 10px;
     194}
     195.wp-filter-by .tags {
     196        display: inline;
     197}
     198.wp-filter-by .tag {
     199        background: #fff;
     200        border: 1px solid #e5e5e5;
     201        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     202        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     203        font-size: 11px;
     204        margin: 0 5px;
     205        padding: 4px 8px;
     206}
     207
     208body.filters-applied .wp-filter-group,
     209body.filters-applied .wp-filter-drawer a.button,
     210body.filters-applied .wp-filter-drawer br {
     211        display: none !important;
     212}
     213body.filters-applied .wp-filter-by {
     214        display: block;
     215}
     216body.filters-applied .wp-filter-drawer {
     217        padding: 20px;
     218}
     219
     220body.show-filter-drawer .wp-filter-content,
     221body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
     222        display: none;
     223}
     224body.show-filter-drawer.filters-applied .wp-filter-content {
     225        display: block;
     226}
     227
     228.loading-content .wp-filter-content,
     229.error .wp-filter-content {
     230        display: none;
     231}
     232.loading-content .spinner {
     233        display: block;
     234        margin: 40px auto 0;
     235        float: none;
     236}
     237
     238@media only screen and (max-width: 1120px) {
     239
     240        .wp-filter-search {
     241                margin: 20px 0;
     242                position: static;
     243                width: 100%;
     244        }
     245       
     246        .wp-filter-drawer {
     247                border-bottom: 1px solid #eee;
     248        }
     249        .wp-filter-group {
     250                margin-bottom: 0;
     251                margin-top: 5px;
     252                width: 100%;
     253        }
     254        .wp-filter-group li {
     255                margin: 10px 0;
     256        }
     257}
     258
     259@media only screen and (max-width: 782px) {
     260
     261        .wp-filter-group,
     262        .wp-filter-group li {
     263                width: 100%;
     264        }
     265
     266}
     267 No newline at end of file

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

     
    2525        margin-left: 20px;
    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;
    39         position: relative;
    40         top: -3px;
    41 }
    42 
    43 .theme-navigation a {
    44         text-decoration:none;
    45 }
    46 
    4728/* Position admin messages */
    4829.themes-php div.updated,
    4930.themes-php div.error {
    … …  
    5132        clear: both;
    5233}
    5334
     35/*
     36 * The search form
     37 */
     38.themes-php .wp-filter-search {
     39        position: relative;
     40        top: -2px;
     41        left: 20px;
     42        font-size: 16px;
     43        font-weight: 300;
     44        line-height: 1.5;
     45        width: 280px;
     46        margin: 0;
     47}
     48
    5449.themes-php div.updated a {
    5550        text-decoration: underline;
    5651}
    … …  
    401396        z-index: 2;
    402397}
    403398
    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 
    417399/**
    418400 * Theme Overlay
    419401 * Shown when clicking a theme
    … …  
    10241006        .themes-php .wrap h2 {
    10251007                width: 100%;
    10261008        }
    1027 
    1028         .themes-php .theme-search {
     1009       
     1010        .themes-php .wp-filter-search {
    10291011                float: none;
    10301012                clear: both;
    10311013                left: 0;
    … …  
    10881070        display: none !important;
    10891071}
    10901072
    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 }
    11061073.theme-install-php a.upload,
    11071074.theme-install-php a.browse-themes {
    11081075        cursor: pointer;
    … …  
    11181085        -webkit-box-sizing: border-box;
    11191086        -moz-box-sizing: border-box;
    11201087        box-sizing: border-box;
    1121         display: none;
    1122         margin: 0px 0 0;
     1088        display: none;
     1089        margin: 0;
    11231090        padding: 0;
    11241091        width: 100%;
    11251092        overflow: hidden;
    … …  
    11441111        padding: 40px 0 0;
    11451112        text-align: center;
    11461113}
    1147 body.show-upload-theme .upload-theme + .theme-navigation,
    1148 body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
     1114body.show-upload-theme .upload-theme + .wp-filter,
     1115body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
    11491116        display: none;
    11501117}
    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 body.more-filters-opened .more-filters:before {
    1185         background: #777;
    1186         -webkit-border-radius: 2px;
    1187         border-radius: 2px;
    1188         border: none;
    1189         color: #fff;
    1190 }
    11911118
    1192 body.more-filters-opened .more-filters:hover,
    1193 body.more-filters-opened .more-filters:focus,
    1194 body.more-filters-opened .more-filters:hover:before,
    1195 body.more-filters-opened .more-filters:focus:before {
    1196         background: rgb(46, 162, 204);
    1197 }
    1198 
    1199 .theme-install-php .theme-search {
    1200         position: absolute;
    1201         right: 10px;
    1202         top: 9px;
    1203         font-size: 16px;
    1204         font-weight: 300;
    1205         line-height: 1.5;
    1206         width: 280px;
    1207 }
    1208 .more-filters:before {
    1209         color: #777;
    1210         text-align: center;
    1211         margin: 0 5px 0 0;
    1212         content: "\f111";
    1213         display: inline-block;
    1214         width: 16px;
    1215         height: 16px;
    1216         -webkit-font-smoothing: antialiased;
    1217         font-size: 16px;
    1218         line-height: 1;
    1219         font-family: "dashicons";
    1220         text-decoration: inherit;
    1221         font-weight: normal;
    1222         font-style: normal;
    1223         vertical-align: top;
    1224         -webkit-transition: color .1s ease-in 0;
    1225         transition: color .1s ease-in 0;
    1226         text-align: center;
    1227 }
    1228 .more-filters.current:before {
    1229         color: #fff;
    1230 }
    1231 .more-filters-container {
    1232         display: none;
    1233         padding: 20px;
    1234         border-top: 1px solid #eee;
    1235         margin: 0 -20px;
    1236         background: #fafafa;
    1237 }
    1238 body.more-filters-opened .more-filters-container {
    1239         display: block;
    1240         overflow: hidden;
    1241 }
    1242 body.more-filters-opened .theme-section.current {
    1243         border-bottom: none;
    1244 }
    1245 body.more-filters-opened .theme-browser,
    1246 body.more-filters-opened.filters-applied.loading-themes .theme-browser {
    1247         display: none;
    1248 }
    1249 body.more-filters-opened.filters-applied .theme-browser {
    1250         display: block;
    1251 }
    1252 .more-filters-container .filters-group {
    1253         -webkit-box-sizing: border-box;
    1254         -moz-box-sizing: border-box;
    1255         box-sizing: border-box;
    1256         float: left;
    1257         width: 19%;
    1258         background: #fff;
    1259         margin: 0 1% 0 0;
    1260         border: 1px solid #e5e5e5;
    1261         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1262         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1263         padding: 10px;
    1264 }
    1265 .more-filters-container .wide-filters-group {
    1266         width: 38%;
    1267 }
    1268 .more-filters-container .feature-name {
    1269         margin: 0;
    1270         position: relative;
    1271 }
    1272 .more-filters-container ol {
    1273         list-style-type: none;
    1274         margin: 20px 0 0;
    1275         font-size: 12px;
    1276 }
    1277 .more-filters-container li {
    1278         display: inline-block;
    1279         vertical-align: top;
    1280         list-style-type: none;
    1281         margin: 5px 0;
    1282         padding-right: 25px;
    1283         width: 160px;
    1284 }
    1285 .theme-navigation .more-filters-container .apply-filters {
    1286         margin: 0 0 20px;
    1287 }
    1288 .theme-navigation .more-filters-container .clear-filters {
    1289         display: none;
    1290         margin: 0 0 20px 10px;
    1291 }
    1292 .more-filters-container .apply-filters span {
    1293         display: inline-block;
    1294         font-size: 12px;
    1295         text-indent: 10px;
    1296         opacity: 0.8;
    1297 }
    1298 .more-filters-container .filtering-by {
    1299         display: none;
    1300         margin: 0;
    1301 }
    1302 .more-filters-container .filtering-by > span {
    1303         font-weight: 600;
    1304 }
    1305 .more-filters-container .filtering-by .tags {
    1306         display: inline;
    1307 }
    1308 .more-filters-container .filtering-by .tag {
    1309         background: #fff;
    1310         border: 1px solid #e5e5e5;
    1311         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1312         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    1313         font-size: 11px;
    1314         margin: 0 5px;
    1315         padding: 4px 8px;
    1316 }
    1317 .more-filters-container .filtering-by a {
    1318         margin-left: 10px;
    1319 }
    1320 body.filters-applied .more-filters-container .filters-group,
    1321 body.filters-applied .more-filters-container a.button,
    1322 body.filters-applied .more-filters-container br {
    1323         display: none !important;
    1324 }
    1325 body.filters-applied .more-filters-container .filtering-by {
    1326         display: block;
    1327 }
    1328 body.filters-applied .more-filters-container {
    1329         padding: 20px;
    1330 }
    13311119p.no-themes {
    13321120        color: #999;
    13331121        font-size: 18px;
    … …  
    13441132        display: none !important;
    13451133}
    13461134
    1347 
    13481135.theme-install-php .add-new-theme {
    13491136        display: none !important;
    13501137}
    13511138
    13521139@media only screen and (max-width: 1120px) {
    1353         .theme-install-php .theme-search {
    1354                 margin: 20px 0;
    1355                 position: static;
    1356                 width: 100%;
    1357         }
    1358         .more-filters-container {
    1359                 border-bottom: 1px solid #eee;
    1360         }
     1140
    13611141        .upload-theme .wp-upload-form {
    13621142                margin: 20px 0;
    13631143                max-width: 100%;
    … …  
    13671147                padding: 20px 0 0;
    13681148                text-align: left;
    13691149        }
    1370         .more-filters-container .filters-group {
    1371                 margin-bottom: 0;
    1372                 margin-top: 5px;
    1373                 width: 100%;
    1374         }
    1375         .more-filters-container .filters-group li {
    1376                 margin: 10px 0;
    1377         }
    1378 }
    13791150
    1380 @media only screen and (max-width: 782px) {
    1381         .more-filters-container .filters-group {
    1382                 width: 100%;
    1383         }
    1384         .more-filters-container .filters-group li {
    1385                 width: 100%;
    1386         }
    13871151}
    13881152
    13891153.rating {
    … …  
    14471211        line-height: 20px;
    14481212        color: #999;
    14491213}
    1450 .loading-themes .theme-browser,
    1451 .error .theme-browser {
    1452         display: none;
    1453 }
    1454 .loading-themes .spinner {
    1455         display: block;
    1456         margin: 40px auto 0;
    1457         float: none;
    1458 }
    14591214
    14601215/*------------------------------------------------------------------------------
    14611216  16.3 - Custom Header Screen
    … …  
    17041459        display: none;
    17051460}
    17061461
    1707 .wp-full-overlay .theme-navigation {
     1462.wp-full-overlay-navigation {
     1463        background: #fff;
     1464        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     1465        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     1466        -webkit-box-sizing: border-box;
     1467        -moz-box-sizing: border-box;
     1468        box-sizing: border-box;
     1469        display: inline-block;
    17081470        padding: 10px 20px;
    17091471        position: absolute;
    1710                 bottom: 10px;
    1711         text-align: left;
     1472        bottom: 10px;
     1473        margin: 20px 0 30px;
     1474        width: 100%;
    17121475}
    1713 .wp-full-overlay .theme-navigation .next-theme {
     1476.wp-full-overlay-navigation .next-theme {
    17141477        float: right;
    17151478}
    1716 .wp-full-overlay.no-navigation .theme-navigation {
     1479.wp-full-overlay.no-navigation .wp-full-overlay-navigation {
    17171480        display: none;
    17181481}
    17191482

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

     
    1212@import url(nav-menus.css);
    1313@import url(widgets.css);
    1414@import url(l10n.css);
     15@import url(filter.css);

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

     
    105105                // Render and append after screen title
    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        },
    111111
    … …  
    342342                        beforeSend: function() {
    343343                                if ( ! paginated ) {
    344344                                        // Spin it
    345                                         $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
     345                                        $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
    346346                                }
    347347                        }
    348348                });
    … …  
    10801080themes.view.Search = wp.Backbone.View.extend({
    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
    10871087        attributes: {
    … …  
    11681168        },
    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
    11781178        navigate: function() {
    … …  
    12291229
    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
    12351235                this.extraRoutes();
    … …  
    12881288                        request.tag = [ value.slice( 4 ) ];
    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
    12951295                // or searching the local cache
    … …  
    13041304
    13051305        el: '#wpbody-content .wrap',
    13061306
    1307         // Register events for sorting and filters in theme-navigation
     1307        // Register events for sorting and filters in wp-filter
    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': 'applyFilters',
     1313                'click .wp-filter-group [type="checkbox"]': 'addFilter',
     1314                'click .wp-filter-drawer-clear': 'clearFilters',
     1315                'click .wp-filter-group-title': 'filterSection',
     1316                'click .wp-filter-by a': 'backToFilters'
    13171317        },
    13181318
    13191319        // Initial render method
    … …  
    13431343                });
    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>' );
    13541354                });
    … …  
    13861386
    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
    13921392                if ( $el.hasClass( this.activeClass ) ) {
    … …  
    14021402        sort: function( sort ) {
    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
    14081408                this.browse( sort );
    … …  
    14191419                        return;
    14201420                }
    14211421
    1422                 $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
     1422                $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
    14231423                $el.addClass( this.activeClass );
    14241424
    14251425                if ( ! filter ) {
    … …  
    14461446                var name,
    14471447                        tags = this.filtersChecked(),
    14481448                        request = { tag: tags },
    1449                         filteringBy = $( '.filtering-by .tags' );
     1449                        filteringBy = $( '.wp-filter-by .tags' );
    14501450
    14511451                if ( event ) {
    14521452                        event.preventDefault();
    14531453                }
    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                });
    14631463
    … …  
    14691469        // Get the checked filters
    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
    14751475                _.each( items.filter( ':checked' ), function( item ) {
    … …  
    14781478
    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' ).find( 'span' ).text( '' );
     1482                        $( '.wp-filter-drawer-clear' ).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' ).find( 'span' ).text( tags.length );
     1488                $( '.wp-filter-drawer-clear' ).css( 'display', 'inline-block' );
    14891489
    14901490                return tags;
    14911491        },
    … …  
    14941494
    14951495        // Overwrite search container class to append search
    14961496        // in new location
    1497         searchContainer: $( '.theme-navigation' ),
     1497        searchContainer: $( '.wp-filter' ),
    14981498
    14991499        uploader: function() {
    15001500                $( 'a.upload' ).on( 'click', function( event ) {
    … …  
    15191519
    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                }
    15251525
    15261526                this.clearSearch();
    15271527
    15281528                themes.router.navigate( themes.router.baseUrl( '' ) );
    1529                 $( 'body' ).toggleClass( 'more-filters-opened' );
     1529                $( 'body' ).toggleClass( 'show-filter-drawer' );
    15301530        },
    15311531
    15321532        // Expand/collapse each individual filter section
    … …  
    15371537        // Clears all the checked filters
    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
    15431543                event.preventDefault();
    … …  
    15571557        },
    15581558
    15591559        clearSearch: function() {
    1560                 $( '#theme-search-input').val( '' );
     1560                $( '#wp-filter-search-input').val( '' );
    15611561        }
    15621562});
    15631563
    … …  
    15751575        },
    15761576
    15771577        search: function( query ) {
    1578                 $( '.theme-search' ).val( query );
     1578                $( '.wp-filter-search' ).val( query );
    15791579        },
    15801580
    15811581        navigate: function() {
    … …  
    16471647
    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
    16531653                this.extraRoutes();

  • trunk/src/wp-admin/theme-install.php

     
    134134        <?php install_themes_upload(); ?>
    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>
     137        <div class="wp-filter">
     138                <div class="wp-filter-count">
     139                        <span class="count theme-count"></span>
    146140                </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" />
     141                <ul class="wp-filter-links">
     142                <?php
     143                $filter_links = array(
     144                        'featured' => 'Featured',
     145                        'popular' => 'Popular',
     146                        'new' => 'Latest',
     147                );
     148                foreach( $filter_links as $filter_link_sort => $filter_link_text ) { ?>
     149                        <li>
     150                                <a href="#" class="wp-filter-link" data-sort="<?php echo $filter_link_sort; ?>">
     151                                        <?php _ex( $filter_link_text, 'themes' ); ?>
     152                                </a>
     153                        </li>
     154                <?php } ?>
     155                </ul>
     156               
     157                <a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
     158
     159                <div class="wp-filter-drawer">
     160                        <div class="wp-filter-drawer-buttons">
     161                                <a class="wp-filter-drawer-apply button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
     162                                <a class="wp-filter-drawer-clear button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
     163                        </div>
    151164                <?php
    152165                $feature_list = get_theme_feature_list();
    153166                foreach ( $feature_list as $feature_name => $features ) {
    154167                        if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
    155                                 echo '<div class="filters-group wide-filters-group">';
     168                                echo '<div class="wp-filter-group wp-filter-group-wide">';
    156169                        } else {
    157                                 echo '<div class="filters-group">';
     170                                echo '<div class="wp-filter-group">';
    158171                        }
    159172                        $feature_name = esc_html( $feature_name );
    160                         echo '<h4 class="feature-name">' . $feature_name . '</h4>';
    161                         echo '<ol class="feature-group">';
     173                        echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';
     174                        echo '<ol>';
    162175                        foreach ( $features as $feature => $feature_name ) {
    163176                                $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>';
     177                                echo '<li><input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
     178                                echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label></li>';
    166179                        }
    167180                        echo '</ol>';
    168181                        echo '</div>';
    169182                }
    170183                ?>
    171                         <div class="filtering-by">
     184                        <div class="wp-filter-by">
    172185                                <span><?php _e( 'Filtering by:' ); ?></span>
    173186                                <div class="tags"></div>
    174187                                <a href="#"><?php _e( 'Edit' ); ?></a>
    175188                        </div>
    176189                </div>
    177190        </div>
    178         <div class="theme-browser"></div>
     191       
     192        <div class="theme-browser wp-filter-content"></div>
    179193        <div class="theme-install-overlay wp-full-overlay expanded"></div>
    180194
    181195        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    … …  
    262276                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
    263277                                <span class="collapse-sidebar-arrow"></span>
    264278                        </a>
    265                         <div class="theme-navigation">
     279                        <div class="wp-full-overlay-navigation">
    266280                                <a class="previous-theme button" href="#"><?php _ex( 'Previous', 'Button label for a theme' ); ?></a>
    267281                                <a class="next-theme button" href="#"><?php _ex( 'Next', 'Button label for a theme' ); ?></a>
    268282                        </div>

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

     
    117117
    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>
    123123        <?php endif; ?>