Beef up the branch and tag lists as per issue 601 - currently

only for the monotone plugin's source view.

src/IDF/templates/idf/base-full.html

@@ -69,6 +69,7 @@
   <div id="ft">{block foot}{/block}</div>
 </div>
 {include 'idf/js-hotkeys.html'}
+{include 'idf/list-filter.html'}
 {block javascript}{/block}
 {if $project}
 <script type="text/javascript" charset="utf-8">{literal}

src/IDF/templates/idf/base-simple.html

@@ -53,6 +53,7 @@
   <div id="ft">{block foot}{/block}</div>
 </div>
 {include 'idf/js-hotkeys.html'}
+{include 'idf/list-filter.html'}
 {block javascript}{/block}
 </body>
 </html>

src/IDF/templates/idf/base.html

@@ -70,6 +70,7 @@
   <div id="ft">{block foot}{/block}</div>
 </div>
 {include 'idf/js-hotkeys.html'}
+{include 'idf/list-filter.html'}
 {block javascript}{/block}
 {if $project}
 <script type="text/javascript" charset="utf-8">{literal}

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

@@ -1,25 +1,32 @@
 {extends "idf/source/changelog.html"}
 {block context}
-<p><strong>{trans 'Branches:'}</strong><br/>
+<div class="expander">
+<div class="gradient"></div>
+<h1>
+  {trans 'Branches'}
+  <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+</h1>
+<ul id="branch-list">
 {foreach $branches as $selector => $branch}
 {aurl 'url', 'IDF_Views_Source::changeLog', array($project.shortname, $selector)}
-<span class="label{if in_array($selector, $tree_in)} active{/if}">
+<li class="{if in_array($selector, $tree_in)}active{/if}">
-    <a href="{$url}" class="label" title="{$branch}">
+  <a href="{$url}" class="label">{$branch}</a>
-        {$branch|shorten:24}
+</li>
-    </a>
-</span><br/>
 {/foreach}
-</p>
+</ul>
 {if $tags}
-<p><strong>{trans 'Tags:'}</strong><br/>
+<h1>
+  {trans 'Tags'}
+  <input type="text" rel="tag-list" class="filter-list" title="{trans 'filter tags'}" />
+</h1>
+<ul id="tag-list">
 {foreach $tags as $selector => $tag}
 {aurl 'url', 'IDF_Views_Source::changeLog', array($project.shortname, $selector)}
-<span class="label{if in_array($selector, $tags_in)} active{/if}">
+<li class="{if in_array($selector, $tags_in)}active{/if}">
-    <a href="{$url}" class="label" title="{$tag}">
+  <a href="{$url}" class="label">{$tag}</a>
-        {$tag|shorten:24}
+</li>
-    </a>
-</span><br/>
 {/foreach}
-</p>
+</ul>
 {/if}
+</div>
 {/block}

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

@@ -1,26 +1,32 @@
 {extends "idf/source/commit.html"}
 {block context}
-<p><strong>{trans 'Branches:'}</strong><br/>
+<div class="expander">
+<div class="gradient"></div>
+<h1>
+  {trans 'Branches'}
+  <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+</h1>
+<ul id="branch-list">
 {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}">
+<li class="{if in_array($branch, $tree_in)}active{/if}">
-    <a href="{$url}" class="label" title="{$branch}">
+  <a href="{$url}" class="label">{$branch}</a>
-        {$branch|shorten:25}
+</li>
-    </a>
-</span><br/>
 {/foreach}
-</p>
+</ul>
 {if $tags}
-<p><strong>{trans 'Tags:'}</strong><br/>
+<h1>
+  {trans 'Tags'}
+  <input type="text" rel="tag-list" class="filter-list" title="{trans 'filter tags'}" />
+</h1>
+<ul id="tag-list">
 {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}">
+<li class="{if in_array($tag, $tags_in)}active{/if}">
-    <a href="{$url}" class="label" title="{$tag}">
+  <a href="{$url}" class="label">{$tag}</a>
-        {$tag|shorten:25}
+</li>
-    </a>
-</span><br/>
 {/foreach}
-</p>
+</ul>
 {/if}
+</div>
 {/block}
-

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

@@ -55,26 +55,33 @@
 
 {/block}
 {block context}
-<p><strong>{trans 'Branches:'}</strong><br/>
+<div class="expander">
+<div class="gradient"></div>
+<h1>
+  {trans 'Branches'}
+  <input type="text" rel="branch-list" class="filter-list"  title="{trans 'filter branches'}" />
+</h1>
+<ul id="branch-list">
 {foreach $branches as $selector => $branch}
 {aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-<span class="label{if in_array($selector, $tree_in)} active{/if}">
+<li class="{if in_array($selector, $tree_in)}active{/if}">
-    <a href="{$url}" class="label" title="{$branch}">
+  <a href="{$url}" class="label">{$branch}</a>
-        {$branch|shorten:24}
+</li>
-    </a>
-</span><br/>
 {/foreach}
-</p>
+</ul>
 {if $tags}
-<p><strong>{trans 'Tags:'}</strong><br/>
+<h1>
+  {trans 'Tags'}
+  <input type="text" rel="tag-list" class="filter-list"  title="{trans 'filter tags'}" />
+</h1>
+<ul id="tag-list">
 {foreach $tags as $selector => $tag}
 {aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-<span class="label{if in_array($selector, $tags_in)} active{/if}">
+<li class="{if in_array($selector, $tags_in)}active{/if}">
-    <a href="{$url}" class="label" title="{$tag}">
+  <a href="{$url}" class="label">{$tag}</a>
-        {$tag|shorten:24}
+</li>
-    </a>
-</span><br/>
 {/foreach}
-</p>
+</ul>
 {/if}
+</div>
 {/block}

www/media/idf/css/style.css

@@ -858,3 +858,84 @@ ol > li {
   color: #2E3436;
 }
 
+/**
+ * List expander for tag and branch view
+ */
+.context {}
+
+.context h1 {
+  font-size: 13px;
+  font-weight: bold;
+  margin: 10px 0 5px;
+}
+
+.context > .expander {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.context > .expander > ul {
+  margin: 5px;
+}
+
+.context > .expander > ul > li {
+  white-space: nowrap;
+  list-style-type: none;
+}
+
+.context > .expander > ul > li.active {
+  font-weight: bold;
+}
+
+.context > .expander > .gradient {
+  position: absolute;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  z-index: 998;
+  background: url(../img/white_gradient.png) repeat-y;
+}
+
+.context > .expander:hover,
+.context > .expander.activated {
+  position: absolute;
+  z-index: 999;
+  overflow: visible;
+  -moz-border-radius: 0 10px 10px 0;
+  -webkit-border-radius: 0 10px 10px 0;
+  border-radius: 0 10px 10px 0;
+  -moz-box-shadow: 3px 3px 5px #333;
+  -webkit-box-shadow: 3px 3px 5px #333;
+  box-shadow: 3px 3px 5px #333;
+  padding: 5px 10px;
+  margin: -5px -10px;
+  min-width: 180px;
+}
+
+.context > .expander:hover > .gradient,
+.context > .expander.activated > .gradient {
+  display: none;
+}
+
+.context > .expander input.filter-list {
+  font-size: 11px;
+  font-weight: normal;
+  color: #333;
+  border: 1px dotted #474747;
+  margin-left: 10px;
+  padding: 2px;
+  width: 80px;
+  display: none;
+  float: right;
+}
+
+.context > .expander:hover input.filter-list.activated,
+.context > .expander.activated input.filter-list.activated {
+  display: block;
+}
+
+.context > .expander input.filter-list.default {
+  color: #aaa;
+  border-color: #aaa;
+}