浏览代码

[assist] Set focus on search when opened and make search clearable

Johan Ahlen 10 年之前
父节点
当前提交
107bb36

+ 7 - 0
desktop/core/src/desktop/static/desktop/js/assist/assistEntry.js

@@ -47,6 +47,7 @@
     self.parent = parent;
     self.filter = filter;
     self.isSearchVisible = ko.observable(false);
+    self.editingSearch = ko.observable(false);
 
     self.expandable = typeof definition.type === "undefined" || /table|view|struct|array|map/i.test(definition.type);
 
@@ -123,6 +124,12 @@
     });
   }
 
+  AssistEntry.prototype.toggleSearch = function() {
+    var self = this;
+    self.isSearchVisible(!self.isSearchVisible());
+    self.editingSearch(self.isSearchVisible());
+  }
+
   AssistEntry.prototype.loadEntries = function() {
     var self = this;
     if (!self.expandable || self.loading()) {

+ 2 - 2
desktop/core/src/desktop/templates/assist.mako

@@ -244,13 +244,13 @@ from desktop.views import _ko
         ${_('tables')}
         <div class="pull-right hover-actions" data-bind="visible: hasEntries() && !$parent.loading() && !$parent.hasErrors()">
           <span class="assist-tables-counter">(<span data-bind="text: filteredEntries().length"></span>)</span>
-          <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { isSearchVisible(!isSearchVisible()) }, css: { 'blue' : isSearchVisible() }"><i class="pointer fa fa-search" title="${_('Search')}"></i></a>
+          <a class="inactive-action" href="javascript:void(0)" data-bind="click: toggleSearch, css: { 'blue' : isSearchVisible }"><i class="pointer fa fa-search" title="${_('Search')}"></i></a>
           <a class="inactive-action" href="javascript:void(0)" data-bind="click: $parent.reload"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : $parent.reloading }" title="${_('Manually refresh the table list')}"></i></a>
         </div>
       </li>
 
       <li data-bind="slideVisible: hasEntries() && isSearchVisible() && !$parent.loading() && !$parent.hasErrors()">
-        <div><input type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="value: filter, valueUpdate: 'afterkeydown'"/></div>
+        <div><input id="searchInput" type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="hasFocus: editingSearch, clearable: filter, value: filter, valueUpdate: 'afterkeydown'"/></div>
       </li>
 
       <div class="table-container">