Bladeren bron

HUE-5617 [editor] Add colors for each suggestion category in the autocomplete dropdown

Johan Ahlen 9 jaren geleden
bovenliggende
commit
99c395c

+ 23 - 22
desktop/core/src/desktop/static/desktop/js/sqlAutocompleter3.js

@@ -16,29 +16,30 @@
 
 var SqlAutocompleter3 = (function () {
 
-  // Keyword weights come from the parser
+  var colors = HueColors.getCUIChartColors();
+
   var CATEGORIES = {
-    ALL: { label: AutocompleterGlobals.i18n.category.all },
-    POPULAR: { label: AutocompleterGlobals.i18n.category.popular },
-    POPULAR_AGGREGATE: { weight: 1500, label: AutocompleterGlobals.i18n.category.popular },
-    POPULAR_GROUP_BY: { weight: 1400, label: AutocompleterGlobals.i18n.category.popular },
-    POPULAR_ORDER_BY: { weight: 1300, label: AutocompleterGlobals.i18n.category.popular },
-    POPULAR_FILTER: { weight: 1200, label: AutocompleterGlobals.i18n.category.popular },
-    POPULAR_ACTIVE_JOIN: { weight: 1200, label: AutocompleterGlobals.i18n.category.popular },
-    POPULAR_JOIN_CONDITION: { weight: 1100, label: AutocompleterGlobals.i18n.category.popular },
-    COLUMN: { weight: 1000, label: AutocompleterGlobals.i18n.category.column },
-    SAMPLE: { weight: 900, label: AutocompleterGlobals.i18n.category.sample },
-    IDENTIFIER: { weight: 800, label: AutocompleterGlobals.i18n.category.identifier },
-    CTE: { weight: 700, label: AutocompleterGlobals.i18n.category.cte },
-    TABLE: { weight: 600, label: AutocompleterGlobals.i18n.category.table },
-    DATABASE: { weight: 500, label: AutocompleterGlobals.i18n.category.database },
-    UDF: { weight: 400, label: AutocompleterGlobals.i18n.category.udf },
-    HDFS: { weight: 300, label: AutocompleterGlobals.i18n.category.hdfs },
-    VIRTUAL_COLUMN: { weight: 200, label: AutocompleterGlobals.i18n.category.column },
-    COLREF_KEYWORD: { weight: 100, label: AutocompleterGlobals.i18n.category.keyword },
-    VARIABLE: { weight: 50, label: AutocompleterGlobals.i18n.category.variable },
-    KEYWORD: { weight: 0, label: AutocompleterGlobals.i18n.category.keyword },
-    POPULAR_JOIN: { weight: -1, label: AutocompleterGlobals.i18n.category.popular }
+    ALL: { color: HueColors.BLUE, label: AutocompleterGlobals.i18n.category.all },
+    POPULAR: { color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    POPULAR_AGGREGATE: { weight: 1500, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    POPULAR_GROUP_BY: { weight: 1400, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    POPULAR_ORDER_BY: { weight: 1300, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    POPULAR_FILTER: { weight: 1200, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    POPULAR_ACTIVE_JOIN: { weight: 1200, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    POPULAR_JOIN_CONDITION: { weight: 1100, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular },
+    COLUMN: { weight: 1000, color: colors[20].color, label: AutocompleterGlobals.i18n.category.column },
+    SAMPLE: { weight: 900, color: colors[5].color, label: AutocompleterGlobals.i18n.category.sample },
+    IDENTIFIER: { weight: 800, color: colors[8].color, label: AutocompleterGlobals.i18n.category.identifier },
+    CTE: { weight: 700, color: colors[7].color, label: AutocompleterGlobals.i18n.category.cte },
+    TABLE: { weight: 600, color: colors[1].color, label: AutocompleterGlobals.i18n.category.table },
+    DATABASE: { weight: 500, color: colors[0].color, label: AutocompleterGlobals.i18n.category.database },
+    UDF: { weight: 400, color: colors[4].color, label: AutocompleterGlobals.i18n.category.udf },
+    HDFS: { weight: 300, color: colors[9].color, label: AutocompleterGlobals.i18n.category.hdfs },
+    VIRTUAL_COLUMN: { weight: 200, color: colors[2].color, label: AutocompleterGlobals.i18n.category.column },
+    COLREF_KEYWORD: { weight: 100, color: colors[3].color, label: AutocompleterGlobals.i18n.category.keyword },
+    VARIABLE: { weight: 50, color: colors[6].color, label: AutocompleterGlobals.i18n.category.variable },
+    KEYWORD: { weight: 0, color: colors[11].color, label: AutocompleterGlobals.i18n.category.keyword },
+    POPULAR_JOIN: { weight: -1, color: colors[10].color, label: AutocompleterGlobals.i18n.category.popular }
   };
 
   var hiveReservedKeywords = {

+ 0 - 1
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -259,7 +259,6 @@
   <link rel="stylesheet" href="${ static('desktop/css/nv.d3.css') }">
 
   <script src="${ static('desktop/js/hue.geo.js') }" type="text/javascript" charset="utf-8"></script>
-  <script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
 
   <script src="${ static('desktop/ext/js/leaflet/leaflet.js') }" type="text/javascript" charset="utf-8"></script>
   <script src="${ static('desktop/ext/js/leaflet/leaflet.markercluster.js') }" type="text/javascript" charset="utf-8"></script>

+ 1 - 0
desktop/core/src/desktop/templates/common_header.mako

@@ -134,6 +134,7 @@ if USE_NEW_EDITOR.get():
   <script src="${ static('desktop/js/jquery.datatables.sorting.js') }"></script>
   <script src="${ static('desktop/ext/js/bootstrap.min.js') }"></script>
   <script src="${ static('desktop/ext/js/bootstrap-better-typeahead.min.js') }"></script>
+  <script src="${ static('desktop/js/hue.colors.js') }"></script>
   <script src="${ static('desktop/ext/js/fileuploader.js') }"></script>
   <script src="${ static('desktop/ext/js/filesize.min.js') }"></script>
   <script src="${ static('desktop/js/popover-extra-placements.js') }"></script>

+ 1 - 0
desktop/core/src/desktop/templates/responsive.mako

@@ -453,6 +453,7 @@ ${ hueIcons.symbols() }
 <script src="${ static('desktop/js/jquery.tableextender2.js') }"></script>
 
 <script src="${ static('desktop/ext/js/knockout.min.js') }"></script>
+<script src="${ static('desktop/js/hue.colors.js') }"></script>
 <script src="${ static('desktop/js/apiHelper.js') }"></script>
 <script src="${ static('desktop/js/ko.charts.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }"></script>

+ 0 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -121,7 +121,6 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 <script src="${ static('desktop/ext/chosen/chosen.jquery.min.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script src="${ static('desktop/js/hue.geo.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script src="${ static('desktop/ext/js/leaflet/leaflet.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/leaflet/leaflet.markercluster.js') }" type="text/javascript" charset="utf-8"></script>

+ 16 - 3
desktop/libs/notebook/src/notebook/templates/hue_ace_autocompleter.mako

@@ -38,6 +38,7 @@ from desktop.views import _ko
     .autocompleter-header {
       flex: 1 1 22px;
       padding: 5px;
+      background-color: #F9F9F9;
     }
 
     .autocompleter-list {
@@ -91,36 +92,48 @@ from desktop.views import _ko
     .autocompleter-categories > div {
       display: inline-block;
       line-height: 14px;
-      border-bottom: 1px solid transparent;
+      border-bottom: 2px solid transparent;
       cursor: pointer;
       padding: 0 3px;
     }
 
     .autocompleter-categories > div.active {
       display: inline-block;
-      border-bottom: 1px solid #338BB8;
+      border-bottom: 2px solid #338BB8;
       cursor: default;
     }
 
     .autocompleter-suggestion {
       font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;
+      line-height: 18px;
+    }
+
+    .autocompleter-dot {
+      margin-top: 5px;
+      margin-right: 5px;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
     }
   </style>
 
   <script type="text/html" id="hue-ace-autocompleter">
     <!-- ko if: active -->
     <div class="hue-ace-autocompleter" data-bind="style: { top: top() + 'px', left: left() + 'px' }">
+      <!-- ko if: suggestions.availableCategories().length > 1 || suggestions.loading() -->
       <div class="autocompleter-header">
         <!-- ko if: suggestions.availableCategories().length > 1 -->
         <div class="autocompleter-categories" data-bind="foreach: suggestions.availableCategories()">
-          <div data-bind="text: label, css: { 'active': $parent.suggestions.activeCategory() === $data }, click: function (data, event) { $parent.suggestions.activeCategory($data); event.stopPropagation(); }"></div>
+          <div data-bind="text: label, css: { 'active': $parent.suggestions.activeCategory() === $data }, style: { 'border-color': $parent.suggestions.activeCategory() === $data ? color : 'transparent' }, click: function (data, event) { $parent.suggestions.activeCategory($data); event.stopPropagation(); }"></div>
         </div>
         <!-- /ko -->
         <div class="autocompleter-spinner"><!-- ko hueSpinner: { spin: suggestions.loading, size: 'small' } --><!-- /ko --></div>
       </div>
+      <!-- /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(); }, css: { 'selected': $index() === $parent.selectedIndex() }">
+            <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" data-bind="text: meta"></div>
           </div>