Bläddra i källkod

HUE-5673 [editor] Don’t wrap long suggestions in the autocomplete dropdown

Johan Ahlen 8 år sedan
förälder
incheckning
6d0b75004d

+ 23 - 9
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -104,22 +104,35 @@ from desktop.views import _ko
     }
 
     .autocompleter-suggestion {
+      display: flex;
+      flex-direction: row;
       font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
       line-height: 18px;
     }
 
-    .autocompleter-suggestion > b {
+    .autocompleter-suggestion-value {
+      flex: 1 1 100%;
+      margin-left: 3px;
+      margin-right: 6px;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .autocompleter-suggestion-value > b {
       text-shadow: 0 0 0.01em;
     }
 
-    .autocompleter-suggestion.pull-right {
+    .autocompleter-suggestion-meta {
+      flex: 1;
+      color: #737373;
+      white-space: nowrap;
       margin-right: 3px;
     }
 
     .autocompleter-dot {
-      margin-left: 2px;
+      display: inline-block;
       margin-top: 5px;
-      margin-right: 5px;
       width: 8px;
       height: 8px;
       border-radius: 4px;
@@ -179,12 +192,13 @@ from desktop.views import _ko
       <!-- /ko -->
       <div class="autocompleter-entries">
         <div class="autocompleter-list" data-bind="foreach: suggestions.filtered">
-          <div data-bind="click: function () { $parent.selectedIndex($index()); $parent.insertSuggestion(); $parent.editor().focus(); },
+          <div class="autocompleter-suggestion" data-bind="click: function () { $parent.selectedIndex($index()); $parent.insertSuggestion(); $parent.editor().focus(); },
               css: { 'selected': $index() === $parent.selectedIndex() },
               event: { 'mouseover': function () { $parent.hoveredIndex($index()); }, 'mouseout': function () { $parent.hoveredIndex(null); } }">
-            <div class="pull-left autocompleter-dot" data-bind="style: { 'background-color': category.color }"></div>
-            <div class="autocompleter-suggestion pull-left" data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></div>
-            <div class="autocompleter-suggestion pull-right"><!-- ko if: typeof popular !== 'undefined' && popular --><i class="fa fa-star-o popular-icon"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
+            <div class="autocompleter-suggestion-value">
+              <div class="autocompleter-dot " data-bind="style: { 'background-color': category.color }"></div> <span data-bind="matchedText: { suggestion: $data, filter: $parent.suggestions.filter }"></span>
+            </div>
+            <div class="autocompleter-suggestion-meta"><!-- ko if: typeof popular !== 'undefined' && popular --><i class="fa fa-star-o popular-icon"></i> <!-- /ko --><span data-bind="text: meta"></span></div>
           </div>
         </div>
         <!-- ko if: focusedEntry() && focusedEntry().details -->
@@ -218,7 +232,7 @@ from desktop.views import _ko
     <!-- ko if: details -->
     <div class="autocompleter-details">
       <div class="autocomplete-details-table">
-        <div class="details-header"><i class="fa fa-fw" data-bind="css: { 'fa-eye': details.type !== 'table', 'fa-table': details.type !== 'table' }"></i> <span data-bind="text: details.name"></span></div>
+        <div class="details-header"><i class="fa fa-fw" data-bind="css: { 'fa-eye': details.type.toLowerCase() !== 'table', 'fa-table': details.type.toLowerCase() === 'table' }"></i> <span data-bind="text: details.name"></span></div>
         <div class="details-attribute" ><i class="fa fa-database fa-fw"></i> <span data-bind="text: details.database"></span></div>
         <!-- ko if: typeof details.popularity !== 'undefined' -->
         <div class="details-popularity margin-left-5" data-bind="tooltip: { title: '${ _ko('Popularity') } ' + details.popularity.relativePopularity + '%', placement: 'bottom' }"><i class="fa fa-fw fa-star-o popular-icon"></i>