浏览代码

HUE-6815 [frontend] Add basis for in-place autocomplete of global search

Johan Ahlen 8 年之前
父节点
当前提交
4eef737

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 39 - 6
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -278,7 +278,6 @@ body {
   max-width: 600px;
 }
 
-.search-container-top,
 .search-container {
   .display-flex;
   .flex(1 1 44px);
@@ -295,15 +294,50 @@ body {
   margin-bottom: 0;
 }
 
-.search-container-top > input {
+.search-container-top {
   .flex(1 1 100%);
+  position: relative;
+}
+
+.search-container-top .global-search-input-container {
+  position: relative;
   border-radius: 4px;
   border: 1px solid @cui-gray-300;
-  box-shadow: none;
-  margin-bottom: 0;
+  margin-top: 5px;
+  width: 100%;
+  height: 30px;
+
+  > div {
+    position:absolute;
+    left:10px;
+    right: 10px;
+    height: 30px;
+
+    input {
+      display: block;
+      position: absolute;
+      width: 100%;
+      border: none;
+      box-shadow: none;
+      padding: 5px;
+      margin: 0;
+      font-size: 15px;
+      line-height: 15px;
+      background-color: transparent;
+
+      &.global-search-input {
+        z-index: 2;
+      }
+
+      &.global-search-autocomplete {
+        color: @cui-gray-500;
+        outline: none;
+        z-index: 1;
+      }
+    }
+  }
 }
 
-.search-container-top > a,
 .search-container > a {
   .flex(0 0 31px);
   margin-bottom: 0;
@@ -319,7 +353,6 @@ body {
   width: 31px;
 }
 
-.search-container-top > a > i,
 .search-container > a > i {
   margin-left: 8px;
 }

+ 11 - 3
desktop/core/src/desktop/templates/ko_components.mako

@@ -550,8 +550,12 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="hue-global-search-template">
-    <input placeholder="${ _('Search data and saved documents...') }" type="text" data-bind="textInput: searchInput, hasFocus: searchHasFocus">
-
+    <div class="global-search-input-container">
+      <div>
+        <input class="global-search-input" placeholder="${ _('Search data and saved documents...') }" type="text" data-bind="textInput: searchInput, hasFocus: searchHasFocus">
+        <input class="global-search-autocomplete" disabled type="text" data-bind="value: searchAutocomplete">
+      </div>
+    </div>
     <div class="global-search-results" data-bind="visible: searchResultVisible, onClickOutside: onResultClickOutside" style="display:none;">
       <div class="global-search-alternatives">
         <div class="global-search-category">
@@ -623,6 +627,11 @@ from desktop.views import _ko
         self.searchInput = ko.observable('');
         self.searchActive = ko.observable(false);
 
+        self.searchAutocomplete = ko.pureComputed(function () {
+          // TODO: Add autocomplete suggestions here
+          return self.searchInput() + '';
+        });
+
         self.searchResultVisible = ko.observable(false);
 
         self.searchInput.subscribe(function (newValue) {
@@ -634,7 +643,6 @@ from desktop.views import _ko
 
       GlobalSearch.prototype.onResultClickOutside = function () {
         var self = this;
-        console.log('on outside');
         if (!self.searchResultVisible() || self.searchHasFocus()) {
           return false;
         }

部分文件因为文件数量过多而无法显示