add a clear search button to the right of the input

raggi · Feb 24, 2009 · 8eaeb06 · 8eaeb06
1 parent 30aeff5
commit 8eaeb06
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/lib/hanna/template_files/method_search.js b/lib/hanna/template_files/method_search.js
@@ -17,6 +17,14 @@ $(document).observe('dom:loaded', function() {
 	} else {
 		search_box.removeClassName('untouched');
 	}
+
+	search_box.insert({
+	  after: new Element('span', { 'class': 'clear_button' }).update('x').observe('click', function(e) {
+	    e.stopPropagation()
+  	  search_box.setValue('')
+  	  search_box.focus()
+  	})
+  })
 });
 
 function searchInIndex(query) {

diff --git a/lib/hanna/template_files/styles.sass b/lib/hanna/template_files/styles.sass
@@ -125,11 +125,17 @@ table
     :margin 0
     :padding 0
     input
-      :margin .4em
-      :margin-bottom 0
-      :width 90%
+      :margin .4em 3px 0 .4em
+      :width 80%
     #search.untouched
       :color #777777
+    .clear_button
+      :-moz-border-radius 7px
+      :-webkit-border-radius 7px
+      :background #AAA
+      :color white
+      :padding 0 5px 1px 5px
+      :cursor pointer
   ol
     :padding .4em .5em
     li