Add a clear button to the tag / branch filter input fields; simplify

the jQuery code a bit.

src/IDF/templates/idf/list-filter.html

@@ -8,29 +8,35 @@
 {literal}
 $(document).ready(function() {
   $("input.filter-list").each(function() {
-    var lists = $("ul#" + $(this).attr("rel"));
+    var input = $(this);
+    var lists = $("ul#" + input.attr("rel"));
     if (lists.length == 0)
       return;
     var list = $(lists[0]);
+    var wrapper = input.parent();
 
     // a list should contain a reasonable amount of items
     // to be filterable - we also give the filter input a
     // special class here so we recognize it later in case
     // we have to hide it when the list view is collapsed
     if (list.children("li").length > 10) {
-      $(this).addClass("activated");
+      wrapper.addClass("activated");
-      $(this).focus(function() {
+      input.focus(function() {
         // ensure that the parent of the list keeps activated / opened
         list.parent().addClass("activated");
-        if ($(this)[0].value == $(this).attr("title"))
+        if (input.attr("value") == input.attr("title")) {
-          $(this).attr("value", "").removeClass("default");
+          input.attr("value", "");
+          wrapper.removeClass("default");
+        }
       });
-      $(this).blur(function() {
+      input.blur(function() {
         list.parent().removeClass("activated");
-        if ($(this)[0].value.length == 0)
+        if (input.attr("value").length == 0) {
-          $(this).attr("value", $(this).attr("title")).addClass("default");
+          input.attr("value", input.attr("title"));
+          wrapper.addClass("default");
+        }
       });
-      $(this).keyup(function(ev) {
+      input.keyup(function(ev) {
         var filter = $(this)[0];
         list.children("li").css('display', 'block');
         list.children("li").filter(function(index) {
@@ -41,9 +47,11 @@ $(document).ready(function() {
           return true;
         }).css('display', 'none');
       });
+      wrapper.children('span').click(function() {
+        input.val('').keyup().blur();
+      });
       // initialize it with the default
-      $(this)[0].value = "";
+      input.val('').blur();
-      $(this).blur();
     }
   });
 });

src/IDF/templates/idf/source/mtn/changelog.html

@@ -4,7 +4,10 @@
 <div class="gradient"></div>
 <h1>
   {trans 'Branches'}
+  <div class="input-with-delete">
     <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+    <span></span>
+  </div>
 </h1>
 <ul id="branch-list">
 {foreach $branches as $selector => $branch}
@@ -17,7 +20,10 @@
 {if $tags}
 <h1>
   {trans 'Tags'}
+  <div class="input-with-delete">
     <input type="text" rel="tag-list" class="filter-list"  title="{trans 'filter tags'}" />
+    <span></span>
+  </div>
 </h1>
 <ul id="tag-list">
 {foreach $tags as $selector => $tag}

src/IDF/templates/idf/source/mtn/commit.html

@@ -4,12 +4,15 @@
 <div class="gradient"></div>
 <h1>
   {trans 'Branches'}
+  <div class="input-with-delete">
     <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+    <span></span>
+  </div>
 </h1>
 <ul id="branch-list">
 {foreach $branches as $selector => $branch}
 {aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-<li class="{if in_array($branch, $tree_in)}active{/if}">
+<li class="{if in_array($selector, $tree_in)}active{/if}">
   <a href="{$url}" class="label">{$branch}</a>
 </li>
 {/foreach}
@@ -17,12 +20,15 @@
 {if $tags}
 <h1>
   {trans 'Tags'}
+  <div class="input-with-delete">
     <input type="text" rel="tag-list" class="filter-list"  title="{trans 'filter tags'}" />
+    <span></span>
+  </div>
 </h1>
 <ul id="tag-list">
 {foreach $tags as $selector => $tag}
 {aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-<li class="{if in_array($tag, $tags_in)}active{/if}">
+<li class="{if in_array($selector, $tags_in)}active{/if}">
   <a href="{$url}" class="label">{$tag}</a>
 </li>
 {/foreach}

src/IDF/templates/idf/source/mtn/file.html

@@ -19,33 +19,46 @@
 </table>
 {aurl 'url', 'IDF_Views_Source::getFile', array($project.shortname, $commit, $fullpath)}
 <p class="right soft"><a href="{$url}"><img style="vertical-align: text-bottom;" src="{media '/idf/img/package-grey.png'}" alt="{trans 'Archive'}" align="bottom" /></a> <a href="{$url}">{trans 'Download this file'}</a></p>
-
-{/block}
-{block context}
-<p><strong>{trans 'Branches:'}</strong><br/>
-{foreach $branches as $selector => $branch}
-{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-<span class="label{if in_array($branch, $tree_in)} active{/if}">
-    <a href="{$url}" class="label" title="{$branch}">
-        {$branch|shorten:25}
-    </a>
-</span><br/>
-{/foreach}
-</p>
-{if $tags}
-<p><strong>{trans 'Tags:'}</strong><br/>
-{foreach $tags as $selector => $tag}
-{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-<span class="label{if in_array($tag, $tags_in)} active{/if}">
-    <a href="{$url}" class="label" title="{$tag}">
-        {$tag|shorten:25}
-    </a>
-</span><br/>
-{/foreach}
-</p>
-{/if}
 {/block}
 {block javascript}
 <script type="text/javascript" src="{media '/idf/js/prettify.js'}"></script>
 <script type="text/javascript">prettyPrint();</script>
 {/block}
+{block context}
+<div class="expander">
+<div class="gradient"></div>
+<h1>
+  {trans 'Branches'}
+  <div class="input-with-delete">
+    <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+    <span></span>
+  </div>
+</h1>
+<ul id="branch-list">
+{foreach $branches as $selector => $branch}
+{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
+<li class="{if in_array($selector, $tree_in)}active{/if}">
+  <a href="{$url}" class="label">{$branch}</a>
+</li>
+{/foreach}
+</ul>
+{if $tags}
+<h1>
+  {trans 'Tags'}
+  <div class="input-with-delete">
+    <input type="text" rel="tag-list" class="filter-list"  title="{trans 'filter tags'}" />
+    <span></span>
+  </div>
+</h1>
+<ul id="tag-list">
+{foreach $tags as $selector => $tag}
+{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
+<li class="{if in_array($selector, $tags_in)}active{/if}">
+  <a href="{$url}" class="label">{$tag}</a>
+</li>
+{/foreach}
+</ul>
+{/if}
+</div>
+{/block}
+

src/IDF/templates/idf/source/mtn/tree.html

@@ -51,15 +51,16 @@
 <a href="{$url}"><img style="vertical-align: text-bottom;" src="{media '/idf/img/package-grey.png'}" alt="{trans 'Archive'}" align="bottom" /></a> <a href="{$url}">{trans 'Download this version'}</a> {trans 'or'}
 <kbd>mtn clone {$project.getSourceAccessUrl($user, $commit)}</kbd> <a href="{url 'IDF_Views_Source::help', array($project.shortname)}"><img style="vertical-align: text-bottom;" src="{media '/idf/img/help.png'}" alt="{trans 'Help'}" /></a>
 </p>
-
-
 {/block}
 {block context}
 <div class="expander">
 <div class="gradient"></div>
 <h1>
   {trans 'Branches'}
+  <div class="input-with-delete">
     <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+    <span></span>
+  </div>
 </h1>
 <ul id="branch-list">
 {foreach $branches as $selector => $branch}
@@ -72,7 +73,10 @@
 {if $tags}
 <h1>
   {trans 'Tags'}
+  <div class="input-with-delete">
     <input type="text" rel="tag-list" class="filter-list"  title="{trans 'filter tags'}" />
+    <span></span>
+  </div>
 </h1>
 <ul id="tag-list">
 {foreach $tags as $selector => $tag}
@@ -85,3 +89,4 @@
 {/if}
 </div>
 {/block}
+

www/media/idf/css/style.css

@@ -918,24 +918,41 @@ ol > li {
   display: none;
 }
 
-.context > .expander input.filter-list {
+.context > .expander div.input-with-delete {
+  padding: 1px;
+  border: 1px dotted #474747;
+  display: none;
+  float: right;
+  margin-left: 10px;
+  margin-top: -3px;
+}
+
+.context > .expander div.input-with-delete * {
+  vertical-align: middle;
+}
+
+.context > .expander div.input-with-delete span {
+  display: inline-block;
+  width: 13px;
+  height: 12px;
+  background: url(../img/clear.png) left top no-repeat;
+  cursor: pointer;
+}
+
+.context > .expander div.input-with-delete input.filter-list {
   font-size: 11px;
   font-weight: normal;
   color: #333;
-  border: 1px dotted #474747;
+  border: 0;
-  margin-left: 10px;
+  width: 100px;
-  padding: 2px;
+  height: 11px;
-  width: 80px;
-  display: none;
-  float: right;
 }
 
-.context > .expander:hover input.filter-list.activated,
+.context > .expander:hover div.input-with-delete.activated,
-.context > .expander.activated input.filter-list.activated {
+.context > .expander.activated div.input-with-delete.activated {
   display: block;
 }
 
-.context > .expander input.filter-list.default {
+.context > .expander div.input-with-delete.default {
-  color: #aaa;
+  opacity: 0.5;
-  border-color: #aaa;
 }