浏览代码

HUE-1423 [hbase] Various Searchbar Improvements

Kevin Wang 12 年之前
父节点
当前提交
3feeaed
共有 3 个文件被更改,包括 38 次插入5 次删除
  1. 4 2
      apps/hbase/src/hbase/templates/app.mako
  2. 30 3
      apps/hbase/static/css/hbase.css
  3. 4 0
      apps/hbase/static/js/controls.js

+ 4 - 2
apps/hbase/src/hbase/templates/app.mako

@@ -196,11 +196,11 @@ ${ commonheader(None, "hbase", user) | n,unicode }
     <div class="subnav sticky">
       <div class="container-fluid">
         <div class="row-fluid">
-          <div id="searchbar-main" class="span6" data-bind="click: search.clickTagBar">
+          <div id="searchbar-main" class="span5" data-bind="click: search.clickTagBar">
             <div id="search-tags" contenteditable="true" data-bind="editableText: search.cur_input, hasfocus: search.focused, css: { 'active': search.cur_input() != '' }, event: { 'keydown': search.onKeyDown, click: search.updateMenu.bind(null) }" data-placeholder="${_('row_key, row_key_prefix* + scan_length, row_key [family:col1, family2:col2, family3:]')}">
             </div>
           </div>
-          <ul id="search-typeahead" data-bind="visible: search.focused()">
+          <ul id="search-typeahead" data-bind="visible: search.focused() && !search.submitted()">
             <!-- ko if: search.mode() != 'idle' -->
             <li><a><b data-bind="text: search.modes[search.mode()].hint"></b>: <span data-bind="html: search.hintText()"></span> <code class="pull-right" data-bind="text: search.modes[search.mode()].type"></code></a></li>
             <!-- /ko -->
@@ -208,6 +208,8 @@ ${ commonheader(None, "hbase", user) | n,unicode }
             <li data-bind="event: { mousedown: function(){app.search.cur_input(app.search.cur_input() + $data.shortcut);} }, css: {active: self.activeHint}"><a><span data-bind="text: $data.hint"></span> <code class="pull-right" data-bind="text: $data.shortcut"></code></a></li>
             <!-- /ko -->
           </ul>
+          <button class="btn btn-primary add-on" data-bind="enabled: !search.submitted(), click: search.evaluate.bind(null)"><i class="icon-search"></i></button>
+          <a class="search-remove" data-bind="click: function(){ app.search.cur_input(''); }"><i class="icon-remove-sign"></i></a>
           <span id="column-family-selectors">
             <!-- ko foreach: views.tabledata.columnFamilies() -->
               <span class="label" data-bind="text: $data.name, style: {'backgroundColor': ($data.enabled()) ? stringHashColor($data.name.split(':')[0]) : '#ccc' ,'cursor':'pointer'}, click: $data.toggle"></span>

+ 30 - 3
apps/hbase/static/css/hbase.css

@@ -288,7 +288,6 @@ ul#hbase-breadcrumbs li a {
 	background-color: rgb(255, 255, 255);
 	border-bottom-color: rgb(204, 204, 204);
 	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
 	border-bottom-style: solid;
 	border-bottom-width: 1px;
 	border-image-outset: 0px;
@@ -304,7 +303,6 @@ ul#hbase-breadcrumbs li a {
 	border-right-width: 1px;
 	border-top-color: rgb(204, 204, 204);
 	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
 	border-top-style: solid;
 	border-top-width: 1px;
 	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
@@ -334,7 +332,7 @@ ul#hbase-breadcrumbs li a {
 	transition-property: border, box-shadow;
 	transition-timing-function: linear, linear;
 	vertical-align: middle;
-	height:35px;
+	height:36px;
 	font-size: 18px;
 	white-space: nowrap;
 	position: relative;
@@ -551,3 +549,32 @@ textarea {
 	margin: 0px;
 }
 
+.add-on
+{
+	border-radius: 1.5em;
+	border-bottom-left-radius: 0px;
+	border-top-left-radius: 0px;
+	padding: .5em 1em .5em .8em;
+	margin-left:-1px;
+}
+
+.add-on i
+{
+	font-size: 17px;
+}
+
+.search-remove
+{
+	position: relative;
+	left: -65px;
+	top: 2px;
+	text-decoration: none;
+	cursor: pointer;
+	color: #ccc;
+}
+
+.search-remove:hover
+{
+	color: #777;
+	text-decoration: none;
+}

+ 4 - 0
apps/hbase/static/js/controls.js

@@ -556,6 +556,7 @@ var tagsearch = function() {
   self.tags = ko.observableArray();
   self.mode = ko.observable('idle');
   self.cur_input = ko.observable('');
+  self.submitted = ko.observable(false);
   self.hints = ko.observableArray([ {
       hint: 'End Query',
       shortcut: ',',
@@ -659,6 +660,7 @@ var tagsearch = function() {
   };
 
   self.updateMode = function(value) {
+    self.submitted(false);
     var selection = value.slice(0, self.selectionEnd());
     var endindex = selection.slice(selection.lastIndexOf(',')).indexOf(',');
     if(endindex == -1) endindex = selection.length;
@@ -725,6 +727,8 @@ var tagsearch = function() {
 
   self.evaluate = function() {
     app.views.tabledata.searchQuery(self.cur_input());
+    self.submitted(true);
+    self.mode('idle');
   };
 
   $('#search-tags').blur(function(){