Ticket #27055: 27055.25.diff
File 27055.25.diff, 9.4 KB (added by , 10 years ago) |
---|
-
wp-admin/css/themes.css
1150 1150 display: inline-block; 1151 1151 margin: 0 10px; 1152 1152 padding: 15px 0; 1153 -webkit-transition: border-color .1s ease-in;1154 transition: border-color .1s ease-in;1155 1153 } 1156 1154 .theme-section.current, 1157 1155 .theme-filter.current { … … 1167 1165 display: inline-block; 1168 1166 margin: 0 10px; 1169 1167 padding: 4px 6px; 1170 -webkit-transition: color .1s ease-in, background .1s ease-in;1171 transition: color .1s ease-in, background .1s ease-in;1172 1168 } 1173 1169 body.more-filters-opened .more-filters, 1174 1170 body.more-filters-opened .more-filters:before { … … 1177 1173 border-radius: 2px; 1178 1174 border: none; 1179 1175 color: #fff; 1180 -webkit-transition: color .1s ease-in, background .1s ease-in;1181 transition: color .1s ease-in, background .1s ease-in;1182 1176 } 1183 1177 1184 1178 body.more-filters-opened .more-filters:hover, … … 1230 1224 body.more-filters-opened .more-filters-container { 1231 1225 display: block; 1232 1226 } 1227 body.more-filters-opened .theme-section.current { 1228 border-bottom: none; 1229 } 1230 body.more-filters-opened .theme-browser, 1231 body.more-filters-opened.filters-applied.loading-themes .theme-browser { 1232 display: none; 1233 } 1234 body.more-filters-opened.filters-applied .theme-browser { 1235 display: block; 1236 } 1233 1237 .more-filters-container .filters-group { 1234 1238 -webkit-box-sizing: border-box; 1235 1239 -moz-box-sizing: border-box; 1236 1240 box-sizing: border-box; 1237 1241 float: left; 1238 width: 20%; 1242 width: 19%; 1243 background: #fff; 1244 margin: 0 1% 0 0; 1245 border: 1px solid #e5e5e5; 1246 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); 1247 box-shadow: 0 1px 1px rgba(0,0,0,0.04); 1248 padding: 10px; 1239 1249 } 1240 1250 .more-filters-container .feature-name { 1241 margin-top: 0; 1251 cursor: pointer; 1252 margin: 0; 1253 position: relative; 1242 1254 } 1243 1255 .more-filters-container ol { 1244 1256 list-style-type: none; 1257 margin: 20px 0 0; 1258 display: block; 1259 font-size: 12px; 1260 } 1261 .theme-navigation .more-filters-container .apply-filters { 1262 margin: 20px 0 0; 1263 } 1264 .theme-navigation .more-filters-container .clear-filters { 1265 display: none; 1266 margin: 20px 0 0 10px; 1267 } 1268 .more-filters-container .apply-filters span { 1269 display: inline-block; 1270 font-size: 12px; 1271 text-indent: 10px; 1272 opacity: 0.8; 1273 } 1274 .more-filters-container .filtering-by { 1275 display: none; 1245 1276 margin: 0; 1246 1277 } 1278 .more-filters-container .filtering-by > span { 1279 font-weight: 600; 1280 } 1281 .more-filters-container .filtering-by .tags { 1282 display: inline; 1283 } 1284 .more-filters-container .filtering-by .tag { 1285 background: #fff; 1286 border: 1px solid #e5e5e5; 1287 box-shadow: 0 1px 1px rgba(0,0,0,0.04); 1288 font-size: 11px; 1289 margin: 0 5px; 1290 padding: 4px 8px; 1291 } 1292 body.filters-applied .more-filters-container .filters-group, 1293 body.filters-applied .more-filters-container a, 1294 body.filters-applied .more-filters-container br { 1295 display: none !important; 1296 } 1297 body.filters-applied .more-filters-container .filtering-by { 1298 display: block; 1299 } 1300 body.filters-applied .more-filters-container { 1301 padding: 20px; 1302 } 1303 p.no-themes { 1304 color: #999; 1305 font-size: 18px; 1306 font-style: normal; 1307 margin: 0; 1308 padding: 0; 1309 text-align: center; 1310 display: none; 1311 } 1312 body.no-results p.no-themes { 1313 display: block; 1314 } 1315 body.show-upload-theme p.no-themes { 1316 display: none !important; 1317 } 1247 1318 1319 1248 1320 .theme-install-php .add-new-theme { 1249 1321 display: none !important; 1250 1322 } … … 1268 1340 text-align: left; 1269 1341 } 1270 1342 .more-filters-container .filters-group { 1271 width: 50%; 1343 margin-bottom: 0; 1344 margin-top: 5px; 1345 width: 49%; 1272 1346 } 1273 1347 .more-filters-container .filters-group:nth-child(3n) { 1274 1348 clear: left; 1275 1349 } 1276 1350 } 1277 1351 1352 @media only screen and (max-width: 782px) { 1353 .more-filters-container .filters-group { 1354 width: 100%; 1355 } 1356 } 1357 1278 1358 .rating { 1279 1359 margin: 30px 0; 1280 1360 } -
wp-admin/js/theme.js
255 255 self.trigger( 'update' ); 256 256 self.trigger( 'query:success', count ); 257 257 258 if ( data.themes.length === 0 ) { 259 self.trigger( 'query:empty' ); 260 } 261 258 262 // Store the results and the query request 259 263 queries.push( { themes: data.themes, request: request } ); 260 264 }).fail( function() { … … 277 281 }); 278 282 } 279 283 284 if ( query.themes.length === 0 ) { 285 self.trigger( 'query:empty' ); 286 } else { 287 $( 'body' ).removeClass( 'no-results' ); 288 } 289 280 290 // Only trigger an update event since we already have the themes 281 291 // on our cached object 282 292 this.reset( query.themes ); … … 330 340 beforeSend: function() { 331 341 if ( ! paginated ) { 332 342 // Spin it 333 $( 'body' ).addClass( 'loading-themes' ) ;343 $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' ); 334 344 } 335 345 } 336 346 }); … … 704 714 } 705 715 }); 706 716 717 this.listenTo( self.collection, 'query:empty', function() { 718 $( 'body' ).addClass( 'no-results' ); 719 }); 720 707 721 this.listenTo( this.parent, 'theme:scroll', function() { 708 722 self.renderThemes( self.parent.page ); 709 723 }); … … 1143 1157 'click .theme-section': 'onSort', 1144 1158 'click .theme-filter': 'onFilter', 1145 1159 'click .more-filters': 'moreFilters', 1146 'click [type="checkbox"]': 'addFilter' 1160 'click .apply-filters': 'addFilter', 1161 'click [type="checkbox"]': 'filtersChecked', 1162 'click .clear-filters': 'clearFilters', 1163 'click .feature-name': 'filterSection' 1147 1164 }, 1148 1165 1149 1166 // Handles all the rendering of the public theme directory … … 1217 1234 1218 1235 event.preventDefault(); 1219 1236 1237 $( 'body' ).removeClass( 'filters-applied more-filters-opened' ); 1238 1220 1239 // Bail if this is already active 1221 1240 if ( $el.hasClass( this.activeClass ) ) { 1222 1241 return; … … 1268 1287 // Clicking on a checkbox triggers a tag request 1269 1288 addFilter: function() { 1270 1289 var tags = this.filtersChecked(), 1271 request = { tag: tags }; 1290 request = { tag: tags }, 1291 filteringBy = $( '.filtering-by .tags' ), 1292 name; 1272 1293 1294 $( 'body' ).addClass( 'filters-applied' ); 1295 filteringBy.empty(); 1296 1297 _.each( tags, function( tag ) { 1298 name = $( 'label[for="feature-id-' + tag + '"]' ).text(); 1299 filteringBy.append( '<span class="tag">' + name + '</span>' ); 1300 }); 1301 1273 1302 // Get the themes by sending Ajax POST request to api.wordpress.org/themes 1274 1303 // or searching the local cache 1275 1304 this.collection.query( request ); 1276 1305 }, 1277 1306 1278 // Get the checked filters and return an array 1307 // Get the checked filters 1308 // @return {array} of tags or false 1279 1309 filtersChecked: function() { 1280 1310 var items = $( '.feature-group' ).find( ':checkbox' ), 1281 1311 tags = []; … … 1284 1314 tags.push( $( item ).prop( 'value' ) ); 1285 1315 }); 1286 1316 1317 // When no filters are checked, restore initial state and return 1318 if ( tags.length === 0 ) { 1319 $( '.apply-filters' ).find( 'span' ).text( '' ); 1320 $( '.clear-filters' ).hide(); 1321 $( 'body' ).removeClass( 'filters-applied' ); 1322 return false; 1323 } 1324 1325 $( '.apply-filters' ).find( 'span' ).text( tags.length ); 1326 $( '.clear-filters' ).css( 'display', 'inline-block' ); 1327 1287 1328 return tags; 1288 1329 }, 1289 1330 … … 1304 1345 }); 1305 1346 }, 1306 1347 1348 // Toggle the full filters navigation 1307 1349 moreFilters: function() { 1350 if ( $( 'body' ).hasClass( 'filters-applied' ) ) { 1351 return $( 'body' ).removeClass( 'filters-applied' ); 1352 } 1353 1354 // If the filters section is opened and filters are checked 1355 // run the relevant query collapsing to filtered-by state 1356 if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) { 1357 return this.addFilter(); 1358 } 1359 1308 1360 $( 'body' ).toggleClass( 'more-filters-opened' ); 1361 }, 1362 1363 // Expand/collapse each individual filter section 1364 filterSection: function() { 1365 $( event.target ).parent().toggleClass( 'open' ); 1366 }, 1367 1368 // Clears all the checked filters 1369 // @uses filtersChecked() 1370 clearFilters: function() { 1371 var items = $( '.feature-group' ).find( ':checkbox' ), 1372 self = this; 1373 1374 _.each( items.filter( ':checked' ), function( item ) { 1375 $( item ).prop( 'checked', false ); 1376 return self.filtersChecked(); 1377 }); 1309 1378 } 1310 1379 }); 1311 1380 -
wp-admin/theme-install.php
118 118 <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a> 119 119 <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a> 120 120 <div class="theme-top-filters"> 121 <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>122 <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->123 <a class="more-filters" href="#"><?php _e( ' Feature Filter' ); ?></a>121 <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span> 122 <span class="theme-filter" data-filter="responsive-layout">Responsive</span> --> 123 <a class="more-filters" href="#"><?php _e( 'All' ); ?></a> 124 124 </div> 125 125 <div class="more-filters-container"> 126 126 <?php … … 140 140 } 141 141 ?> 142 142 <br class="clear" /> 143 <a class="apply-filters button button-secondary"><?php _e( 'Apply Filters' ); ?><span></span></a> 144 <a class="clear-filters button button-secondary"><?php _e( 'Clear' ); ?></a> 145 <div class="filtering-by"> 146 <span><?php _e( 'Filtering by:' ); ?></span> 147 <div class="tags"></div> 148 </div> 143 149 </div> 144 150 </div> 145 151 <div class="theme-browser"></div> 146 152 <div class="theme-overlay"></div> 147 153 <div id="theme-installer" class="wp-full-overlay expanded"></div> 148 154 155 <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p> 149 156 <span class="spinner"></span> 150 157 151 158 <br class="clear" />