diff --git a/static/june_2007_style/blue/base.css b/static/june_2007_style/blue/base.css index bcb979d63c2..55fd1d2aff6 100644 --- a/static/june_2007_style/blue/base.css +++ b/static/june_2007_style/blue/base.css @@ -714,7 +714,8 @@ select,input,textarea{font:inherit;} textarea,input[type="text"],input[type="password"]{font-size:12px;line-height:16px;border:1px solid #999999;padding:3px;} .search-query{display:inline-block;padding:4px;font-size:12px;line-height:16px;color:#555555;border:1px solid #999999;padding-left:14px !important;padding-right:14px !important;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;max-width:auto;} .search-query:focus{border-color:rgba(24, 132, 218, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);outline:0;outline:thin dotted \9;} -.search-spinner{position:absolute;display:none;right:8px;top:10px;} +.search-spinner{position:absolute;display:none;right:5px;top:9px;} +.search-clear-btn{position:absolute;right:4px;top:8px;} .errormessagelarge,.warningmessagelarge,.donemessagelarge,.infomessagelarge{padding:8px 35px 8px 14px;margin-bottom:16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#ffffcc;border:1px solid #ffdd33;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#666600;min-height:36px;padding-left:52px;background-image:url(error_large.png);background-repeat:no-repeat;background-position:10px 10px;} .errormessagelarge{background-color:#ffcccc;border-color:#ff3355;color:#660000;padding-left:52px;} .warningmessagelarge{background-image:url(warn_large.png);border-color:#aaaa66;background-color:#ffffcc;} diff --git a/static/scripts/mvc/tools.js b/static/scripts/mvc/tools.js index d0b29925511..65c53aa79ad 100644 --- a/static/scripts/mvc/tools.js +++ b/static/scripts/mvc/tools.js @@ -270,11 +270,16 @@ var ToolPanelSection = BaseModel.extend({ */ var ToolSearch = BaseModel.extend({ defaults: { + search_hint_string: "search tools", + min_chars_for_search: 3, spinner_url: "", + clear_btn_url: "", search_url: "", visible: true, query: "", - results: null + results: null, + // ESC (27) will clear the input field and tool search filters + clear_key: 27 }, initialize: function() { @@ -288,7 +293,7 @@ var ToolSearch = BaseModel.extend({ var query = this.attributes.query; // If query is too short, do not search. - if (query.length < 3) { + if (query.length < this.attributes.min_chars_for_search) { this.set("results", null); return; } @@ -300,15 +305,23 @@ var ToolSearch = BaseModel.extend({ clearTimeout(this.timer); } // Start a new ajax-request in X ms + $("#search-clear-btn").hide(); $("#search-spinner").show(); var self = this; this.timer = setTimeout(function () { $.get(self.attributes.search_url, { query: q }, function (data) { self.set("results", data); $("#search-spinner").hide(); + $("#search-clear-btn").show(); }, "json" ); }, 200 ); + }, + + clear_search: function() { + this.set("query", ""); + this.set("results", null); } + }); /** @@ -520,7 +533,8 @@ var ToolSearchView = Backbone.View.extend({ events: { 'click': 'focus_and_select', - 'keyup :input': 'query_changed' + 'keyup :input': 'query_changed', + 'click #search-clear-btn': 'clear' }, render: function() { @@ -535,7 +549,20 @@ var ToolSearchView = Backbone.View.extend({ this.$el.find(":input").focus().select(); }, - query_changed: function() { + clear: function() { + this.model.clear_search(); + this.$el.find(":input").val(this.model.attributes.search_hint_string); + this.focus_and_select(); + return false; + }, + + query_changed: function( evData ) { + // check for the 'clear key' (ESC) first + if( ( this.model.attributes.clear_key ) + && ( this.model.attributes.clear_key == evData.which ) ){ + this.clear(); + return false; + } this.model.set("query", this.$el.find(":input").val()); } }); diff --git a/static/scripts/templates/compiled/panel_section.js b/static/scripts/templates/compiled/panel_section.js index cf814274098..d9eda221ea7 100644 --- a/static/scripts/templates/compiled/panel_section.js +++ b/static/scripts/templates/compiled/panel_section.js @@ -2,24 +2,21 @@ var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; templates['panel_section'] = template(function (Handlebars,depth0,helpers,partials,data) { helpers = helpers || Handlebars.helpers; - var buffer = "", stack1, foundHelper, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression; + var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression; buffer += "
\n