<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[29217] trunk/src/wp-admin: Use more generic, reusable CSS for the filter bar on Add Themes.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/29217">29217</a></dd>
<dt>Author</dt> <dd>helen</dd>
<dt>Date</dt> <dd>2014-07-18 03:39:04 +0000 (Fri, 18 Jul 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>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 <a href="http://core.trac.wordpress.org/ticket/28794">#28794</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincssthemescss">trunk/src/wp-admin/css/themes.css</a></li>
<li><a href="#trunksrcwpadminjsthemejs">trunk/src/wp-admin/js/theme.js</a></li>
<li><a href="#trunksrcwpadminthemeinstallphp">trunk/src/wp-admin/theme-install.php</a></li>
<li><a href="#trunksrcwpadminthemesphp">trunk/src/wp-admin/themes.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/common.css (29216 => 29217)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/common.css        2014-07-17 22:21:37 UTC (rev 29216)
+++ trunk/src/wp-admin/css/common.css   2014-07-18 03:39:04 UTC (rev 29217)
</span><span class="lines">@@ -923,7 +923,315 @@
</span><span class="cx">  text-align: right;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+/* Filter bar */
</ins><span class="cx"> 
</span><ins>+.wp-title-count {
+       display: inline;
+       position: relative;
+       top: -3px;
+       margin-left: 5px;
+       margin-right: 20px;
+       padding: 4px 10px;
+       -webkit-border-radius: 30px;
+       border-radius: 30px;
+       background: #777;
+       color: #fff;
+       font-size: 14px;
+       font-weight: 600;
+}
+
+.wp-filter {
+       display: inline-block;
+       position: relative;
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       box-sizing: border-box;
+       margin: 12px 0 25px;
+       padding: 0 20px;
+       width: 100%;
+       -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+       box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+       border: 1px solid #e5e5e5;
+       background: #fff;
+       color: #555;
+       font-size: 13px;
+}
+
+.wp-filter a {
+       text-decoration: none;
+}
+
+.wp-filter-count {
+       display: inline-block;
+       vertical-align: middle;
+       min-width: 4em;
+}
+
+.wp-filter-count .count {
+       display: inline-block;
+       position: relative;
+       top: -1px;
+       padding: 4px 10px;
+       -webkit-border-radius: 30px;
+       border-radius: 30px;
+       background: #777;
+       color: #fff;
+       font-size: 14px;
+       font-weight: 600;
+}
+
+.wp-filter-links {
+       display: inline-block;
+       margin: 0;
+}
+
+.wp-filter-links li {
+       display: inline-block;
+       margin: 0;
+}
+
+.wp-filter-link {
+       display: inline-block;
+       margin: 0 10px;
+       padding: 15px 0;
+       border-bottom: 4px solid #fff;
+       color: #666;
+       cursor: pointer;
+}
+
+.wp-filter-links .current {
+       border-bottom: 4px solid #666;
+       color: #222;
+}
+
+.wp-filter-search {
+       position: absolute;
+       top: 9px;
+       right: 10px;
+       left: auto;
+       padding: 3px 5px;
+       width: 280px;
+       font-size: 16px;
+       font-weight: 300;
+       line-height: 1.5;
+}
+
+.wp-filter-drawer-toggle {
+       display: inline-block;
+       margin: 0 10px;
+       padding: 4px 6px;
+       color: #666;
+       cursor: pointer;
+}
+
+.wp-filter-drawer-toggle:before {
+       display: inline-block;
+       vertical-align: top;
+       content: "\f111";
+       margin: 0 5px 0 0;
+       width: 16px;
+       height: 16px;
+       color: #777;
+       -webkit-transition: color .1s ease-in 0;
+       transition: color .1s ease-in 0;
+       font-family: "dashicons";
+       font-size: 16px;
+       line-height: 1;
+       text-align: center;
+       text-decoration: inherit;
+       font-weight: normal;
+       font-style: normal;
+       -webkit-font-smoothing: antialiased;
+}
+
+.wp-filter-drawer-toggle:hover {
+       color: #777;
+}
+
+.wp-filter-drawer-toggle.current:before {
+       color: #fff;
+}
+
+.wp-filter-drawer {
+       display: none;
+       margin: 0 -20px;
+       padding: 20px;
+       border-top: 1px solid #eee;
+       background: #fafafa;
+}
+
+body.show-filter-drawer .wp-filter-drawer {
+       display: block;
+       overflow: hidden;
+}
+
+body.show-filter-drawer .wp-filter-drawer-toggle:hover,
+body.show-filter-drawer .wp-filter-drawer-toggle:focus {
+       background: rgb(46, 162, 204);
+}
+
+body.show-filter-drawer .wp-filter-link.current {
+       border-bottom: none;
+}
+
+body.show-filter-drawer .wp-filter-drawer-toggle {
+       -webkit-border-radius: 2px;
+       border-radius: 2px;
+       border: none;
+       background: #777;
+       color: #fff;
+}
+
+body.show-filter-drawer .wp-filter-drawer-toggle:before {
+       color: #fff;
+}
+
+.wp-filter-group {
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       box-sizing: border-box;
+       float: left;
+       margin: 0 1% 0 0;
+       padding: 10px;
+       width: 19%;
+       background: #fff;
+       border: 1px solid #e5e5e5;
+       -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+       box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+}
+
+.wp-filter-group-wide {
+       width: 38%;
+}
+
+.wp-filter-group-title {
+       position: relative;
+       margin: 0;
+}
+
+.wp-filter-drawer ol {
+       margin: 20px 0 0;
+       list-style-type: none;
+       font-size: 12px;
+}
+
+.wp-filter-drawer li {
+       display: inline-block;
+       vertical-align: top;
+       margin: 5px 0;
+       padding-right: 25px;
+       width: 160px;
+       list-style-type: none;
+}
+
+.wp-filter-drawer-buttons {
+       margin-bottom: 20px;
+}
+
+.wp-filter .wp-filter-drawer-buttons .button span {
+       display: inline-block;
+       opacity: 0.8;
+       font-size: 12px;
+       text-indent: 10px;
+}
+
+.wp-filter .button.clear-filters {
+       display: none;
+       margin: 0 0 20px 10px;
+}
+
+.wp-filter-by {
+       display: none;
+       margin: 0;
+}
+
+.wp-filter-by > span {
+       font-weight: 600;
+}
+
+.wp-filter-by a {
+       margin-left: 10px;
+}
+
+.wp-filter-by .tags {
+       display: inline;
+}
+
+.wp-filter-by .tag {
+       margin: 0 5px;
+       padding: 4px 8px;
+       border: 1px solid #e5e5e5;
+       -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+       box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+       background: #fff;
+       font-size: 11px;
+}
+
+body.filters-applied .wp-filter-group,
+body.filters-applied .wp-filter-drawer a.button,
+body.filters-applied .wp-filter-drawer br {
+       display: none !important;
+}
+
+body.filters-applied .wp-filter-by {
+       display: block;
+}
+
+body.filters-applied .wp-filter-drawer {
+       padding: 20px;
+}
+
+body.show-filter-drawer .wp-filter-content,
+body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
+       display: none;
+}
+
+body.show-filter-drawer.filters-applied .wp-filter-content {
+       display: block;
+}
+
+.loading-content .wp-filter-content,
+.error .wp-filter-content {
+       display: none;
+}
+
+.loading-content .spinner {
+       display: block;
+       margin: 40px auto 0;
+       float: none;
+}
+
+@media only screen and (max-width: 1120px) {
+       .wp-filter-search {
+               position: static;
+               margin: 20px 0;
+               width: 100%;
+       }
+
+       .wp-filter-drawer {
+               border-bottom: 1px solid #eee;
+       }
+
+       .wp-filter-group {
+               margin-bottom: 0;
+               margin-top: 5px;
+               width: 100%;
+       }
+
+       .wp-filter-group li {
+               margin: 10px 0;
+       }
+}
+
+@media only screen and (max-width: 782px) {
+       .wp-filter-group,
+       .wp-filter-group li {
+               width: 100%;
+       }
+
+}
+
+
</ins><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx">   4.0 - Notifications
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span></span></pre></div>
<a id="trunksrcwpadmincssthemescss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/css/themes.css (29216 => 29217)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/css/themes.css        2014-07-17 22:21:37 UTC (rev 29216)
+++ trunk/src/wp-admin/css/themes.css   2014-07-18 03:39:04 UTC (rev 29217)
</span><span class="lines">@@ -25,25 +25,18 @@
</span><span class="cx">  margin-left: 20px;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.themes-php .wrap .theme-count,
-.theme-navigation .theme-count {
-       color: #fff;
-       -webkit-border-radius: 30px;
-       border-radius: 30px;
-       background: #777;
-       font-size: 14px;
-       padding: 4px 10px;
-       font-weight: 600;
-       margin-left: 5px;
-       margin-right: 20px;
</del><ins>+/* Search form */
+.themes-php .wp-filter-search {
</ins><span class="cx">   position: relative;
</span><del>-       top: -3px;
</del><ins>+        top: -2px;
+       left: 20px;
+       margin: 0;
+       width: 280px;
+       font-size: 16px;
+       font-weight: 300;
+       line-height: 1.5;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-.theme-navigation a {
-       text-decoration:none;
-}
-
</del><span class="cx"> /* Position admin messages */
</span><span class="cx"> .themes-php div.updated,
</span><span class="cx"> .themes-php div.error {
</span><span class="lines">@@ -401,19 +394,6 @@
</span><span class="cx">  z-index: 2;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-/*
- * The search form
- */
-.themes-php .theme-search {
-       position: relative;
-       top: -2px;
-       left: 20px;
-       font-size: 16px;
-       font-weight: 300;
-       line-height: 1.5;
-       width: 280px;
-}
-
</del><span class="cx"> /**
</span><span class="cx">  * Theme Overlay
</span><span class="cx">  * Shown when clicking a theme
</span><span class="lines">@@ -1025,7 +1005,7 @@
</span><span class="cx">          width: 100%;
</span><span class="cx">  }
</span><span class="cx"> 
</span><del>-       .themes-php .theme-search {
</del><ins>+        .themes-php .wp-filter-search {
</ins><span class="cx">           float: none;
</span><span class="cx">          clear: both;
</span><span class="cx">          left: 0;
</span><span class="lines">@@ -1088,21 +1068,6 @@
</span><span class="cx">  display: none !important;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.theme-navigation {
-       background: #fff;
-       -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-       box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
-       -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-       box-sizing: border-box;
-       color: #555;
-       display: inline-block;
-       font-size: 13px;
-       margin: 20px 0 30px;
-       padding: 0 20px;
-       position: relative;
-       width: 100%;
-}
</del><span class="cx"> .theme-install-php a.upload,
</span><span class="cx"> .theme-install-php a.browse-themes {
</span><span class="cx">  cursor: pointer;
</span><span class="lines">@@ -1119,7 +1084,7 @@
</span><span class="cx">  -moz-box-sizing: border-box;
</span><span class="cx">  box-sizing: border-box;
</span><span class="cx">  display: none;
</span><del>-       margin: 0px 0 0;
</del><ins>+        margin: 0;
</ins><span class="cx">   padding: 0;
</span><span class="cx">  width: 100%;
</span><span class="cx">  overflow: hidden;
</span><span class="lines">@@ -1144,191 +1109,11 @@
</span><span class="cx">  padding: 40px 0 0;
</span><span class="cx">  text-align: center;
</span><span class="cx"> }
</span><del>-body.show-upload-theme .upload-theme + .theme-navigation,
-body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
</del><ins>+body.show-upload-theme .upload-theme + .wp-filter,
+body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
</ins><span class="cx">   display: none;
</span><span class="cx"> }
</span><del>-.theme-navigation .theme-count {
-       margin-left: 0;
-       position: absolute;
-       top: 12px;
-}
-.theme-count + .theme-section {
-       margin-left: 60px;
-}
-.theme-section,
-.theme-filter {
-       border-bottom: 4px solid #fff;
-       color: #666;
-       cursor: pointer;
-       display: inline-block;
-       margin: 0 10px;
-       padding: 15px 0;
-}
-.theme-section.current,
-.theme-filter.current {
-       border-bottom: 4px solid #666;
-       color: #222;
-}
-.theme-top-filters {
-       display: inline-block;
-}
-.theme-navigation .more-filters {
-       color: #666;
-       cursor: pointer;
-       display: inline-block;
-       margin: 0 10px;
-       padding: 4px 6px;
-}
-body.more-filters-opened .more-filters {
-       background: #777;
-       -webkit-border-radius: 2px;
-       border-radius: 2px;
-       border: none;
-       color: #fff;
-}
</del><span class="cx"> 
</span><del>-body.more-filters-opened .more-filters:before {
-       color: #fff;
-}
-
-body.more-filters-opened .more-filters:hover,
-body.more-filters-opened .more-filters:focus {
-       background: rgb(46, 162, 204);
-}
-
-.theme-install-php .theme-search {
-       position: absolute;
-       right: 10px;
-       top: 9px;
-       font-size: 16px;
-       font-weight: 300;
-       line-height: 1.5;
-       width: 280px;
-}
-.more-filters:before {
-       color: #777;
-       text-align: center;
-       margin: 0 5px 0 0;
-       content: "\f111";
-       display: inline-block;
-       width: 16px;
-       height: 16px;
-       -webkit-font-smoothing: antialiased;
-       font-size: 16px;
-       line-height: 1;
-       font-family: "dashicons";
-       text-decoration: inherit;
-       font-weight: normal;
-       font-style: normal;
-       vertical-align: top;
-       -webkit-transition: color .1s ease-in 0;
-       transition: color .1s ease-in 0;
-       text-align: center;
-}
-.more-filters.current:before {
-       color: #fff;
-}
-.more-filters-container {
-       display: none;
-       padding: 20px;
-       border-top: 1px solid #eee;
-       margin: 0 -20px;
-       background: #fafafa;
-}
-body.more-filters-opened .more-filters-container {
-       display: block;
-       overflow: hidden;
-}
-body.more-filters-opened .theme-section.current {
-       border-bottom: none;
-}
-body.more-filters-opened .theme-browser,
-body.more-filters-opened.filters-applied.loading-themes .theme-browser {
-       display: none;
-}
-body.more-filters-opened.filters-applied .theme-browser {
-       display: block;
-}
-.more-filters-container .filters-group {
-       -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-       box-sizing: border-box;
-       float: left;
-       width: 19%;
-       background: #fff;
-       margin: 0 1% 0 0;
-       border: 1px solid #e5e5e5;
-       -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-       box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-       padding: 10px;
-}
-.more-filters-container .wide-filters-group {
-       width: 38%;
-}
-.more-filters-container .feature-name {
-       margin: 0;
-       position: relative;
-}
-.more-filters-container ol {
-       list-style-type: none;
-       margin: 20px 0 0;
-       font-size: 12px;
-}
-.more-filters-container li {
-       display: inline-block;
-       vertical-align: top;
-       list-style-type: none;
-       margin: 5px 0;
-       padding-right: 25px;
-       width: 160px;
-}
-.theme-navigation .more-filters-container .apply-filters {
-       margin: 0 0 20px;
-}
-.theme-navigation .more-filters-container .clear-filters {
-       display: none;
-       margin: 0 0 20px 10px;
-}
-.more-filters-container .apply-filters span {
-       display: inline-block;
-       font-size: 12px;
-       text-indent: 10px;
-       opacity: 0.8;
-}
-.more-filters-container .filtering-by {
-       display: none;
-       margin: 0;
-}
-.more-filters-container .filtering-by > span {
-       font-weight: 600;
-}
-.more-filters-container .filtering-by .tags {
-       display: inline;
-}
-.more-filters-container .filtering-by .tag {
-       background: #fff;
-       border: 1px solid #e5e5e5;
-       -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-       box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-       font-size: 11px;
-       margin: 0 5px;
-       padding: 4px 8px;
-}
-.more-filters-container .filtering-by a {
-       margin-left: 10px;
-}
-body.filters-applied .more-filters-container .filters-group,
-body.filters-applied .more-filters-container a.button,
-body.filters-applied .more-filters-container br {
-       display: none !important;
-}
-body.filters-applied .more-filters-container .filtering-by {
-       display: block;
-}
-body.filters-applied .more-filters-container {
-       padding: 20px;
-}
</del><span class="cx"> p.no-themes {
</span><span class="cx">  color: #999;
</span><span class="cx">  font-size: 18px;
</span><span class="lines">@@ -1345,20 +1130,11 @@
</span><span class="cx">  display: none !important;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-
</del><span class="cx"> .theme-install-php .add-new-theme {
</span><span class="cx">  display: none !important;
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> @media only screen and (max-width: 1120px) {
</span><del>-       .theme-install-php .theme-search {
-               margin: 20px 0;
-               position: static;
-               width: 100%;
-       }
-       .more-filters-container {
-               border-bottom: 1px solid #eee;
-       }
</del><span class="cx">   .upload-theme .wp-upload-form {
</span><span class="cx">          margin: 20px 0;
</span><span class="cx">          max-width: 100%;
</span><span class="lines">@@ -1368,25 +1144,8 @@
</span><span class="cx">          padding: 20px 0 0;
</span><span class="cx">          text-align: left;
</span><span class="cx">  }
</span><del>-       .more-filters-container .filters-group {
-               margin-bottom: 0;
-               margin-top: 5px;
-               width: 100%;
-       }
-       .more-filters-container .filters-group li {
-               margin: 10px 0;
-       }
</del><span class="cx"> }
</span><span class="cx"> 
</span><del>-@media only screen and (max-width: 782px) {
-       .more-filters-container .filters-group {
-               width: 100%;
-       }
-       .more-filters-container .filters-group li {
-               width: 100%;
-       }
-}
-
</del><span class="cx"> .rating {
</span><span class="cx">  margin: 30px 0;
</span><span class="cx"> }
</span><span class="lines">@@ -1448,15 +1207,6 @@
</span><span class="cx">  line-height: 20px;
</span><span class="cx">  color: #999;
</span><span class="cx"> }
</span><del>-.loading-themes .theme-browser,
-.error .theme-browser {
-       display: none;
-}
-.loading-themes .spinner {
-       display: block;
-       margin: 40px auto 0;
-       float: none;
-}
</del><span class="cx"> 
</span><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx">   16.3 - Custom Header Screen
</span></span></pre></div>
<a id="trunksrcwpadminjsthemejs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/theme.js (29216 => 29217)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/theme.js   2014-07-17 22:21:37 UTC (rev 29216)
+++ trunk/src/wp-admin/js/theme.js      2014-07-18 03:39:04 UTC (rev 29217)
</span><span class="lines">@@ -105,7 +105,7 @@
</span><span class="cx">          // Render and append after screen title
</span><span class="cx">          view.render();
</span><span class="cx">          this.searchContainer
</span><del>-                       .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
</del><ins>+                        .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
</ins><span class="cx">                   .append( view.el );
</span><span class="cx">  },
</span><span class="cx"> 
</span><span class="lines">@@ -342,7 +342,7 @@
</span><span class="cx">                  beforeSend: function() {
</span><span class="cx">                          if ( ! paginated ) {
</span><span class="cx">                                  // Spin it
</span><del>-                                       $( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
</del><ins>+                                        $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
</ins><span class="cx">                           }
</span><span class="cx">                  }
</span><span class="cx">          });
</span><span class="lines">@@ -1080,8 +1080,8 @@
</span><span class="cx"> themes.view.Search = wp.Backbone.View.extend({
</span><span class="cx"> 
</span><span class="cx">  tagName: 'input',
</span><del>-       className: 'theme-search',
-       id: 'theme-search-input',
</del><ins>+        className: 'wp-filter-search',
+       id: 'wp-filter-search-input',
</ins><span class="cx">   searching: false,
</span><span class="cx"> 
</span><span class="cx">  attributes: {
</span><span class="lines">@@ -1168,11 +1168,11 @@
</span><span class="cx">  },
</span><span class="cx"> 
</span><span class="cx">  search: function( query ) {
</span><del>-               $( '.theme-search' ).val( query );
</del><ins>+                $( '.wp-filter-search' ).val( query );
</ins><span class="cx">   },
</span><span class="cx"> 
</span><span class="cx">  themes: function() {
</span><del>-               $( '.theme-search' ).val( '' );
</del><ins>+                $( '.wp-filter-search' ).val( '' );
</ins><span class="cx">   },
</span><span class="cx"> 
</span><span class="cx">  navigate: function() {
</span><span class="lines">@@ -1229,7 +1229,7 @@
</span><span class="cx"> 
</span><span class="cx">          // Handles search route event
</span><span class="cx">          themes.router.on( 'route:search', function() {
</span><del>-                       $( '.theme-search' ).trigger( 'keyup' );
</del><ins>+                        $( '.wp-filter-search' ).trigger( 'keyup' );
</ins><span class="cx">           });
</span><span class="cx"> 
</span><span class="cx">          this.extraRoutes();
</span><span class="lines">@@ -1288,8 +1288,8 @@
</span><span class="cx">                  request.tag = [ value.slice( 4 ) ];
</span><span class="cx">          }
</span><span class="cx"> 
</span><del>-               $( '.theme-section.current' ).removeClass( 'current' );
-               $( 'body' ).removeClass( 'more-filters-opened filters-applied' );
</del><ins>+                $( '.wp-filter-link.current' ).removeClass( 'current' );
+               $( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
</ins><span class="cx"> 
</span><span class="cx">          // Get the themes by sending Ajax POST request to api.wordpress.org/themes
</span><span class="cx">          // or searching the local cache
</span><span class="lines">@@ -1306,14 +1306,14 @@
</span><span class="cx"> 
</span><span class="cx">  // Register events for sorting and filters in theme-navigation
</span><span class="cx">  events: {
</span><del>-               'click .theme-section': 'onSort',
</del><ins>+                'click .wp-filter-link': 'onSort',
</ins><span class="cx">           'click .theme-filter': 'onFilter',
</span><del>-               'click .more-filters': 'moreFilters',
-               'click .apply-filters': 'applyFilters',
-               'click [type="checkbox"]': 'addFilter',
-               'click .clear-filters': 'clearFilters',
-               'click .feature-name': 'filterSection',
-               'click .filtering-by a': 'backToFilters'
</del><ins>+                'click .wp-filter-drawer-toggle': 'moreFilters',
+               'click .wp-filter-drawer .apply-filters': 'applyFilters',
+               'click .wp-filter-group [type="checkbox"]': 'addFilter',
+               'click .wp-filter-drawer .clear-filters': 'clearFilters',
+               'click .wp-filter-group-title': 'filterSection',
+               'click .wp-filter-by a': 'backToFilters'
</ins><span class="cx">   },
</span><span class="cx"> 
</span><span class="cx">  // Initial render method
</span><span class="lines">@@ -1343,12 +1343,12 @@
</span><span class="cx">          });
</span><span class="cx"> 
</span><span class="cx">          this.listenTo( this.collection, 'query:success', function() {
</span><del>-                       $( 'body' ).removeClass( 'loading-themes' );
</del><ins>+                        $( 'body' ).removeClass( 'loading-content' );
</ins><span class="cx">                   $( '.theme-browser' ).find( 'div.error' ).remove();
</span><span class="cx">          });
</span><span class="cx"> 
</span><span class="cx">          this.listenTo( this.collection, 'query:fail', function() {
</span><del>-                       $( 'body' ).removeClass( 'loading-themes' );
</del><ins>+                        $( 'body' ).removeClass( 'loading-content' );
</ins><span class="cx">                   $( '.theme-browser' ).find( 'div.error' ).remove();
</span><span class="cx">                  $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
</span><span class="cx">          });
</span><span class="lines">@@ -1386,7 +1386,7 @@
</span><span class="cx"> 
</span><span class="cx">          event.preventDefault();
</span><span class="cx"> 
</span><del>-               $( 'body' ).removeClass( 'filters-applied more-filters-opened' );
</del><ins>+                $( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
</ins><span class="cx"> 
</span><span class="cx">          // Bail if this is already active
</span><span class="cx">          if ( $el.hasClass( this.activeClass ) ) {
</span><span class="lines">@@ -1402,7 +1402,7 @@
</span><span class="cx">  sort: function( sort ) {
</span><span class="cx">          this.clearSearch();
</span><span class="cx"> 
</span><del>-               $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
</del><ins>+                $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
</ins><span class="cx">           $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
</span><span class="cx"> 
</span><span class="cx">          this.browse( sort );
</span><span class="lines">@@ -1419,7 +1419,7 @@
</span><span class="cx">                  return;
</span><span class="cx">          }
</span><span class="cx"> 
</span><del>-               $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
</del><ins>+                $( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass );
</ins><span class="cx">           $el.addClass( this.activeClass );
</span><span class="cx"> 
</span><span class="cx">          if ( ! filter ) {
</span><span class="lines">@@ -1446,18 +1446,18 @@
</span><span class="cx">          var name,
</span><span class="cx">                  tags = this.filtersChecked(),
</span><span class="cx">                  request = { tag: tags },
</span><del>-                       filteringBy = $( '.filtering-by .tags' );
</del><ins>+                        filteringBy = $( '.wp-filter-by .tags' );
</ins><span class="cx"> 
</span><span class="cx">          if ( event ) {
</span><span class="cx">                  event.preventDefault();
</span><span class="cx">          }
</span><span class="cx"> 
</span><span class="cx">          $( 'body' ).addClass( 'filters-applied' );
</span><del>-               $( '.theme-section.current' ).removeClass( 'current' );
</del><ins>+                $( '.wp-filter-link.current' ).removeClass( 'current' );
</ins><span class="cx">           filteringBy.empty();
</span><span class="cx"> 
</span><span class="cx">          _.each( tags, function( tag ) {
</span><del>-                       name = $( 'label[for="feature-id-' + tag + '"]' ).text();
</del><ins>+                        name = $( 'label[for="filter-id-' + tag + '"]' ).text();
</ins><span class="cx">                   filteringBy.append( '<span class="tag">' + name + '</span>' );
</span><span class="cx">          });
</span><span class="cx"> 
</span><span class="lines">@@ -1469,7 +1469,7 @@
</span><span class="cx">  // Get the checked filters
</span><span class="cx">  // @return {array} of tags or false
</span><span class="cx">  filtersChecked: function() {
</span><del>-               var items = $( '.feature-group' ).find( ':checkbox' ),
</del><ins>+                var items = $( '.wp-filter-group' ).find( ':checkbox' ),
</ins><span class="cx">                   tags = [];
</span><span class="cx"> 
</span><span class="cx">          _.each( items.filter( ':checked' ), function( item ) {
</span><span class="lines">@@ -1478,14 +1478,14 @@
</span><span class="cx"> 
</span><span class="cx">          // When no filters are checked, restore initial state and return
</span><span class="cx">          if ( tags.length === 0 ) {
</span><del>-                       $( '.apply-filters' ).find( 'span' ).text( '' );
-                       $( '.clear-filters' ).hide();
</del><ins>+                        $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' );
+                       $( '.wp-filter-drawer .clear-filters' ).hide();
</ins><span class="cx">                   $( 'body' ).removeClass( 'filters-applied' );
</span><span class="cx">                  return false;
</span><span class="cx">          }
</span><span class="cx"> 
</span><del>-               $( '.apply-filters' ).find( 'span' ).text( tags.length );
-               $( '.clear-filters' ).css( 'display', 'inline-block' );
</del><ins>+                $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
+               $( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
</ins><span class="cx"> 
</span><span class="cx">          return tags;
</span><span class="cx">  },
</span><span class="lines">@@ -1494,7 +1494,7 @@
</span><span class="cx"> 
</span><span class="cx">  // Overwrite search container class to append search
</span><span class="cx">  // in new location
</span><del>-       searchContainer: $( '.theme-navigation' ),
</del><ins>+        searchContainer: $( '.wp-filter' ),
</ins><span class="cx"> 
</span><span class="cx">  uploader: function() {
</span><span class="cx">          $( 'a.upload' ).on( 'click', function( event ) {
</span><span class="lines">@@ -1519,14 +1519,14 @@
</span><span class="cx"> 
</span><span class="cx">          // If the filters section is opened and filters are checked
</span><span class="cx">          // run the relevant query collapsing to filtered-by state
</span><del>-               if ( $( 'body' ).hasClass( 'more-filters-opened' ) && this.filtersChecked() ) {
</del><ins>+                if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) {
</ins><span class="cx">                   return this.addFilter();
</span><span class="cx">          }
</span><span class="cx"> 
</span><span class="cx">          this.clearSearch();
</span><span class="cx"> 
</span><span class="cx">          themes.router.navigate( themes.router.baseUrl( '' ) );
</span><del>-               $( 'body' ).toggleClass( 'more-filters-opened' );
</del><ins>+                $( 'body' ).toggleClass( 'show-filter-drawer' );
</ins><span class="cx">   },
</span><span class="cx"> 
</span><span class="cx">  // Expand/collapse each individual filter section
</span><span class="lines">@@ -1537,7 +1537,7 @@
</span><span class="cx">  // Clears all the checked filters
</span><span class="cx">  // @uses filtersChecked()
</span><span class="cx">  clearFilters: function( event ) {
</span><del>-               var items = $( '.feature-group' ).find( ':checkbox' ),
</del><ins>+                var items = $( '.wp-filter-group' ).find( ':checkbox' ),
</ins><span class="cx">                   self = this;
</span><span class="cx"> 
</span><span class="cx">          event.preventDefault();
</span><span class="lines">@@ -1557,7 +1557,7 @@
</span><span class="cx">  },
</span><span class="cx"> 
</span><span class="cx">  clearSearch: function() {
</span><del>-               $( '#theme-search-input').val( '' );
</del><ins>+                $( '#wp-filter-search-input').val( '' );
</ins><span class="cx">   }
</span><span class="cx"> });
</span><span class="cx"> 
</span><span class="lines">@@ -1575,7 +1575,7 @@
</span><span class="cx">  },
</span><span class="cx"> 
</span><span class="cx">  search: function( query ) {
</span><del>-               $( '.theme-search' ).val( query );
</del><ins>+                $( '.wp-filter-search' ).val( query );
</ins><span class="cx">   },
</span><span class="cx"> 
</span><span class="cx">  navigate: function() {
</span><span class="lines">@@ -1647,7 +1647,7 @@
</span><span class="cx"> 
</span><span class="cx">          // The `search` route event. The router populates the input field.
</span><span class="cx">          themes.router.on( 'route:search', function() {
</span><del>-                       $( '.theme-search' ).focus().trigger( 'keyup' );
</del><ins>+                        $( '.wp-filter-search' ).focus().trigger( 'keyup' );
</ins><span class="cx">           });
</span><span class="cx"> 
</span><span class="cx">          this.extraRoutes();
</span></span></pre></div>
<a id="trunksrcwpadminthemeinstallphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/theme-install.php (29216 => 29217)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/theme-install.php     2014-07-17 22:21:37 UTC (rev 29216)
+++ trunk/src/wp-admin/theme-install.php        2014-07-18 03:39:04 UTC (rev 29217)
</span><span class="lines">@@ -134,48 +134,52 @@
</span><span class="cx">  <?php install_themes_upload(); ?>
</span><span class="cx">  </div>
</span><span class="cx"> 
</span><del>-       <div class="theme-navigation">
-               <span class="theme-count"></span>
-               <a class="theme-section" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
-               <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
-               <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
-               <div class="theme-top-filters">
-                       <!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
-                       <span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
-                       <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
</del><ins>+        <div class="wp-filter">
+               <div class="wp-filter-count">
+                       <span class="count theme-count"></span>
</ins><span class="cx">           </div>
</span><del>-               <div class="more-filters-container">
-                       <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
-                       <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
-                       <br class="clear" />
</del><ins>+
+               <ul class="wp-filter-links">
+                       <li><a class="wp-filter-link" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
+                       <li><a class="wp-filter-link" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
+                       <li><a class="wp-filter-link" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
+               </ul>
+
+               <a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
+
+               <div class="wp-filter-drawer">
+                       <div class="wp-filter-drawer-buttons">
+                               <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
+                               <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
+                       </div>
</ins><span class="cx">           <?php
</span><span class="cx">          $feature_list = get_theme_feature_list();
</span><span class="cx">          foreach ( $feature_list as $feature_name => $features ) {
</span><span class="cx">                  if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
</span><del>-                               echo '<div class="filters-group wide-filters-group">';
</del><ins>+                                echo '<div class="wp-filter-group wp-filter-group-wide">';
</ins><span class="cx">                   } else {
</span><del>-                               echo '<div class="filters-group">';
</del><ins>+                                echo '<div class="wp-filter-group">';
</ins><span class="cx">                   }
</span><span class="cx">                  $feature_name = esc_html( $feature_name );
</span><del>-                       echo '<h4 class="feature-name">' . $feature_name . '</h4>';
</del><ins>+                        echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';
</ins><span class="cx">                   echo '<ol class="feature-group">';
</span><span class="cx">                  foreach ( $features as $feature => $feature_name ) {
</span><span class="cx">                          $feature = esc_attr( $feature );
</span><del>-                               echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
-                               echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
</del><ins>+                                echo '<li><input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
+                               echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label></li>';
</ins><span class="cx">                   }
</span><span class="cx">                  echo '</ol>';
</span><span class="cx">                  echo '</div>';
</span><span class="cx">          }
</span><span class="cx">          ?>
</span><del>-                       <div class="filtering-by">
</del><ins>+                        <div class="wp-filter-by">
</ins><span class="cx">                           <span><?php _e( 'Filtering by:' ); ?></span>
</span><span class="cx">                          <div class="tags"></div>
</span><span class="cx">                          <a href="#"><?php _e( 'Edit' ); ?></a>
</span><span class="cx">                  </div>
</span><span class="cx">          </div>
</span><span class="cx">  </div>
</span><del>-       <div class="theme-browser"></div>
</del><ins>+        <div class="theme-browser wp-filter-content"></div>
</ins><span class="cx">   <div class="theme-install-overlay wp-full-overlay expanded"></div>
</span><span class="cx"> 
</span><span class="cx">  <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
</span></span></pre></div>
<a id="trunksrcwpadminthemesphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/themes.php (29216 => 29217)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/themes.php    2014-07-17 22:21:37 UTC (rev 29216)
+++ trunk/src/wp-admin/themes.php       2014-07-18 03:39:04 UTC (rev 29217)
</span><span class="lines">@@ -117,7 +117,7 @@
</span><span class="cx"> 
</span><span class="cx"> <div class="wrap">
</span><span class="cx">  <h2><?php esc_html_e( 'Themes' ); ?>
</span><del>-               <span class="theme-count"><?php echo count( $themes ); ?></span>
</del><ins>+                <span class="wp-title-count theme-count"><?php echo count( $themes ); ?></span>
</ins><span class="cx">   <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
</span><span class="cx">          <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>
</span><span class="cx">  <?php endif; ?>
</span></span></pre>
</div>
</div>

</body>
</html>