瀏覽代碼

HUE-5804 [assist] Truncate long entry names in the assist search

This also moves some of the inline styles to less and fixes some alignment/sizing issues.
Johan Ahlen 8 年之前
父節點
當前提交
7a80cf1

文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 6 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -90,7 +90,9 @@
         blurOnEnter: false,
         classPrefix: 'hue-',
         showOnFocus: false,
-        minLength: 0
+        minLength: 0,
+        limitWidthToInput: false,
+        minWidth: 200
       }, options);
 
       if (options.addCount) {
@@ -128,6 +130,9 @@
             }
           },
           _renderMenu: function (ul, items) {
+            if (options.limitWidthToInput) {
+              ul.css('max-width', Math.max(options.minWidth, $element.outerWidth(true)) + 'px');
+            }
             var self = this;
             ul.addClass(this.options.classPrefix + 'autocomplete');
             $.each(items, function (index, item) {

+ 66 - 20
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -585,34 +585,80 @@
   font-size: 70%;
 }
 
-.nav-autocomplete-item .ui-state-focus {
-  border: 1px solid @hue-primary-color-light;
-  background-color: @hue-primary-color-light !important;
-}
+.nav-autocomplete {
+  max-height: 70%;
+  overflow-y: auto;
+
+  > li {
+    list-style-image: none !important;
+  }
 
-.nav-autocomplete-item-link {
-  height: 44px;
-  overflow:hidden;
+  .nav-autocomplete-item .ui-state-focus {
+    border: 1px solid @hue-primary-color-light;
+    background-color: @hue-primary-color-light !important;
+  }
+
+  .nav-autocomplete-item-link {
+    display: flex;
+    width: 100%;
+    height: 40px;
+  }
 
-  i {
+  .nav-search-result-icon {
+    flex: 0 0 35px;
+    line-height: 40px;
+    height: 40px;
     font-size: 18px;
     color: @hue-primary-color-dark;
   }
 
-  > div {
-    vertical-align: top;
-    display:inline-block;
+  .nav-search-result-text {
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
   }
-}
 
-.nav-autocomplete-item-link em, .result-entry em {
-  font-style: normal;
-  font-weight: bold;
-}
+  .nav-search-result-description,
+  .nav-search-result-header {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+  }
+
+  .nav-search-result-header {
+    color: @hue-primary-color-dark;
+    font-size: 14px;
+  }
 
-.nav-autocomplete-item-link
+  .nav-search-result-description {
+    font-size: 12px;
 
-.nav-autocomplete-divider {
-  height: 2px;
-  border-top: 1px solid #dddddd;
+  }
+
+  .nav-autocomplete-item-link em, .result-entry em {
+    font-style: normal;
+    font-weight: bold;
+  }
+
+  .nav-autocomplete-divider {
+    height: 2px;
+    border-top: 1px solid #dddddd;
+  }
+
+  .nav-autocomplete-empty {
+    font-size: 12px;
+    margin: 6px 8px;
+    color: #737373;
+    font-style: italic;
+  }
+}
+
+.nav-search-result {
+  position:absolute;
+  left:0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  background-color: @cui-white;
 }

+ 33 - 28
desktop/core/src/desktop/templates/assist_search.mako

@@ -31,11 +31,11 @@ from notebook.conf import ENABLE_QUERY_BUILDER
   <script type="text/html" id="nav-search-autocomp-item">
     <a>
       <div class="nav-autocomplete-item-link">
-        <div style="padding: 12px 8px 0 8px;"><i class="fa fa-fw" data-bind="css: icon"></i></div>
-        <div>
-          <div style="font-size: 14px; color: #338bb8" data-bind="html: label, style: { 'padding-top': description ? 0 : '10px' }"></div>
+        <div class="nav-search-result-icon"><i class="fa fa-fw" data-bind="css: icon"></i></div>
+        <div class="nav-search-result-text">
+          <div class="nav-search-result-header" data-bind="html: label, style: { 'padding-top': description ? 0 : '9px' }"></div>
           <!-- ko if: description -->
-          <div style="display:inline-block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; font-size: 12px;" data-bind="html: description"></div>
+          <div class="nav-search-result-description" data-bind="html: description"></div>
           <!-- /ko -->
         </div>
       </div>
@@ -44,7 +44,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
 
   <script type="text/html" id="nav-search-autocomp-no-match">
     <div class="nav-autocomplete-item-link" style="height: 30px;">
-      <div style="font-size: 12px; margin: 6px 8px; color: #737373; font-style: italic;">${ _('No recent match found') }</div>
+      <div class="nav-autocomplete-empty">${ _('No recent match found') }</div class>
     </div>
   </script>
 
@@ -60,6 +60,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
           onEnter: performSearch,
           valueObservable: searchInput,
           onSelect: performSearch,
+          limitWidthToInput: true,
           reopenPattern: /.*:$/
         },
         hasFocus: searchHasFocus,
@@ -73,34 +74,38 @@ from notebook.conf import ENABLE_QUERY_BUILDER
   </script>
 
   <script type="text/html" id="nav-search-result">
-    <div style="position:absolute; left:0; right: 0; top: 0; bottom: 0; overflow: hidden; background-color: #FFF;" data-bind="niceScroll">
-      <div class="assist-inner-header" style="width: inherit;">${ _('Search result') }
-        <div class="assist-db-header-actions">
-          <a class="inactive-action" href="javascript:void(0)" data-bind="click: function() { searchActive(false); }"><i class="pointer fa fa-times" title="${ _('Close') }"></i></a>
+    <div class="nav-search-result assist-flex-panel">
+      <div class="assist-flex-header">
+        <div class="assist-inner-header" style="width: inherit;">${ _('Search result') }
+          <div class="assist-db-header-actions">
+            <a class="inactive-action" href="javascript:void(0)" data-bind="click: function() { searchActive(false); }"><i class="pointer fa fa-times" title="${ _('Close') }"></i></a>
+          </div>
         </div>
       </div>
-      <!-- ko hueSpinner: { spin: searching, center: true, size: 'large' } --><!-- /ko -->
-      <!-- ko if: !searching() -->
-      <!-- ko if: searchResult().length == 0 -->
-        <div class="result-entry">${ _('No result found.') }</div>
-      <!-- /ko -->
-      <div data-bind="foreach: searchResult" style="overflow-x:hidden">
-        <div class="result-entry" data-bind="visibleOnHover: { override: statsVisible, selector: '.table-actions' }, event: { mouseover: showNavContextPopoverDelayed, mouseout: clearNavContextPopoverDelay }">
-          <div class="icon-col">
-            <i class="fa fa-fw valign-middle" data-bind="css: icon"></i>
-          </div>
-          <div class="doc-col" data-bind="css: { 'doc-col-no-desc' : !hasDescription }">
-            <!-- ko if: typeof click !== 'undefined' -->
-            <a class="pointer" data-bind="click: click, html: hue_name" target="_blank" ></a>
-            <!-- /ko -->
-            <!-- ko if: typeof click === 'undefined' && typeof link !== 'undefined'-->
-            <a class="pointer" data-bind="attr: { 'href': link }, text: originalName" target="_blank" ></a>
-            <!-- /ko -->
-            <div class="doc-desc" data-bind="html: hue_description"></div>
+      <div class="assist-flex-fill" data-bind="niceScroll" style="overflow:hidden;">
+        <!-- ko hueSpinner: { spin: searching, center: true, size: 'large' } --><!-- /ko -->
+        <!-- ko if: !searching() -->
+        <!-- ko if: searchResult().length == 0 -->
+          <div class="result-entry">${ _('No result found.') }</div>
+        <!-- /ko -->
+        <div data-bind="foreach: searchResult">
+          <div class="result-entry" data-bind="visibleOnHover: { override: statsVisible, selector: '.table-actions' }, event: { mouseover: showNavContextPopoverDelayed, mouseout: clearNavContextPopoverDelay }">
+            <div class="icon-col">
+              <i class="fa fa-fw valign-middle" data-bind="css: icon"></i>
+            </div>
+            <div class="doc-col" data-bind="css: { 'doc-col-no-desc' : !hasDescription }">
+              <!-- ko if: typeof click !== 'undefined' -->
+              <a class="pointer" data-bind="click: click, html: hue_name" target="_blank" ></a>
+              <!-- /ko -->
+              <!-- ko if: typeof click === 'undefined' && typeof link !== 'undefined'-->
+              <a class="pointer" data-bind="attr: { 'href': link }, text: originalName" target="_blank" ></a>
+              <!-- /ko -->
+              <div class="doc-desc" data-bind="html: hue_description"></div>
+            </div>
           </div>
         </div>
+        <!-- /ko -->
       </div>
-      <!-- /ko -->
     </div>
   </script>
 

部分文件因文件數量過多而無法顯示