From ccb1bd33d4b3868fd871efb3ccc4293654c51307 Mon Sep 17 00:00:00 2001
From: Thomas Keller
Date: Wed, 26 Jan 2011 01:37:29 +0100
Subject: [PATCH] Add a clear button to the tag / branch filter input fields;
simplify the jQuery code a bit.
---
src/IDF/templates/idf/list-filter.html | 30 ++++++---
.../templates/idf/source/mtn/changelog.html | 10 ++-
src/IDF/templates/idf/source/mtn/commit.html | 14 ++--
src/IDF/templates/idf/source/mtn/file.html | 63 +++++++++++-------
src/IDF/templates/idf/source/mtn/tree.html | 13 ++--
www/media/idf/css/style.css | 41 ++++++++----
www/media/idf/img/clear.png | Bin 0 -> 636 bytes
7 files changed, 113 insertions(+), 58 deletions(-)
create mode 100644 www/media/idf/img/clear.png
diff --git a/src/IDF/templates/idf/list-filter.html b/src/IDF/templates/idf/list-filter.html
index a2a606a..e788464 100644
--- a/src/IDF/templates/idf/list-filter.html
+++ b/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");
- $(this).focus(function() {
+ wrapper.addClass("activated");
+ input.focus(function() {
// ensure that the parent of the list keeps activated / opened
list.parent().addClass("activated");
- if ($(this)[0].value == $(this).attr("title"))
- $(this).attr("value", "").removeClass("default");
+ if (input.attr("value") == input.attr("title")) {
+ input.attr("value", "");
+ wrapper.removeClass("default");
+ }
});
- $(this).blur(function() {
+ input.blur(function() {
list.parent().removeClass("activated");
- if ($(this)[0].value.length == 0)
- $(this).attr("value", $(this).attr("title")).addClass("default");
+ if (input.attr("value").length == 0) {
+ 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 = "";
- $(this).blur();
+ input.val('').blur();
}
});
});
diff --git a/src/IDF/templates/idf/source/mtn/changelog.html b/src/IDF/templates/idf/source/mtn/changelog.html
index 3db65d6..abaf35f 100644
--- a/src/IDF/templates/idf/source/mtn/changelog.html
+++ b/src/IDF/templates/idf/source/mtn/changelog.html
@@ -4,7 +4,10 @@
{trans 'Branches'}
-
+
+
+
+
{foreach $branches as $selector => $branch}
@@ -17,7 +20,10 @@
{if $tags}
{trans 'Tags'}
-
+
+
+
+
{foreach $tags as $selector => $tag}
diff --git a/src/IDF/templates/idf/source/mtn/commit.html b/src/IDF/templates/idf/source/mtn/commit.html
index ee97616..ff3ec7a 100644
--- a/src/IDF/templates/idf/source/mtn/commit.html
+++ b/src/IDF/templates/idf/source/mtn/commit.html
@@ -4,12 +4,15 @@
{trans 'Branches'}
-
+
+
+
+
{foreach $branches as $selector => $branch}
{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
--
+
-
{$branch}
{/foreach}
@@ -17,12 +20,15 @@
{if $tags}
{trans 'Tags'}
-
+
+
+
+
{foreach $tags as $selector => $tag}
{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
--
+
-
{$tag}
{/foreach}
diff --git a/src/IDF/templates/idf/source/mtn/file.html b/src/IDF/templates/idf/source/mtn/file.html
index 6190557..a7c0d75 100644
--- a/src/IDF/templates/idf/source/mtn/file.html
+++ b/src/IDF/templates/idf/source/mtn/file.html
@@ -19,33 +19,46 @@
{aurl 'url', 'IDF_Views_Source::getFile', array($project.shortname, $commit, $fullpath)}
{trans 'Download this file'}
-
-{/block}
-{block context}
-{trans 'Branches:'}
-{foreach $branches as $selector => $branch}
-{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-
-
- {$branch|shorten:25}
-
-
-{/foreach}
-
-{if $tags}
-{trans 'Tags:'}
-{foreach $tags as $selector => $tag}
-{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
-
-
- {$tag|shorten:25}
-
-
-{/foreach}
-
-{/if}
{/block}
{block javascript}
{/block}
+{block context}
+
+
+
+ {trans 'Branches'}
+
+
+
+
+
+
+{foreach $branches as $selector => $branch}
+{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
+-
+ {$branch}
+
+{/foreach}
+
+{if $tags}
+
+ {trans 'Tags'}
+
+
+
+
+
+
+{foreach $tags as $selector => $tag}
+{aurl 'url', 'IDF_Views_Source::treeBase', array($project.shortname, $selector)}
+-
+ {$tag}
+
+{/foreach}
+
+{/if}
+
+{/block}
+
diff --git a/src/IDF/templates/idf/source/mtn/tree.html b/src/IDF/templates/idf/source/mtn/tree.html
index 24462f6..d310aeb 100644
--- a/src/IDF/templates/idf/source/mtn/tree.html
+++ b/src/IDF/templates/idf/source/mtn/tree.html
@@ -51,15 +51,16 @@
{trans 'Download this version'} {trans 'or'}
mtn clone {$project.getSourceAccessUrl($user, $commit)}
-
-
{/block}
{block context}
{/block}
+
diff --git a/www/media/idf/css/style.css b/www/media/idf/css/style.css
index 86b5551..ee95375 100644
--- a/www/media/idf/css/style.css
+++ b/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;
- margin-left: 10px;
- padding: 2px;
- width: 80px;
- display: none;
- float: right;
+ border: 0;
+ width: 100px;
+ height: 11px;
}
-.context > .expander:hover input.filter-list.activated,
-.context > .expander.activated input.filter-list.activated {
+.context > .expander:hover div.input-with-delete.activated,
+.context > .expander.activated div.input-with-delete.activated {
display: block;
}
-.context > .expander input.filter-list.default {
- color: #aaa;
- border-color: #aaa;
+.context > .expander div.input-with-delete.default {
+ opacity: 0.5;
}
diff --git a/www/media/idf/img/clear.png b/www/media/idf/img/clear.png
new file mode 100644
index 0000000000000000000000000000000000000000..11079dd44931b5ad6f88c779153977b91bbc488a
GIT binary patch
literal 636
zcmV-?0)zdDP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipM}
z039rQUD)^l00I0-L_t(2&t;KcNK;_|#n1PB%(m2U}pyJ@jo`V+D$;cBn>QjNXaB*P?^@+(k%J-mL+e
zQ`9H1wE`L}984DU&W&J>nQ7}kljnaEvl;LvBNeQSS9b5}u$s&@4W{I5B+OHY{#9hB
zynySJfpm6k(ql)MMgZXEWt`u+w{~p*f#WPV@IhUZveekULt6g+^;Kk9dfM;7^S=i2
z@J2P4XQ@fMrO8?LLWgaFispfKt*lZYiI{{?=o)H
zT+J68BQ8KzG$=^|@>7##j>HlK@pu$V;^#Ci^g#uHr85}ScNqaWhobZmn@SK;N<<>^
zOoQ@Tv)Sz6IQ|!z0pR@8Z*syGbsTk=RoSb_xeR1^1B5d0RVPUx_yY_6FK+gzWaEP^
znKac2T|xy{+*l7&17D}=%G+shF^+lPr%OH8aEk%J{bAtcERc<2zP>JUxO)4(`YK~1
zi6wa|ih;b}=XdvB#~1*Rl7mQhAGDscsBCQ$-s=tJwW-AFa5#hqgLe^{er!QHUBGV(
WbI&Sm8Xl1V0000