Explorar el Código

HUE-3294 [assist] Use hue-drop-down for function dialect selection

Johan Ahlen hace 9 años
padre
commit
c2ee67d

+ 5 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2420,6 +2420,11 @@ body {
   margin-left: -1px;
 }
 
+.hue-drop-down-active span {
+  font-size: 12px;
+  font-weight: lighter;
+}
+
 .hue-context-menu {
   display: none;
   position: fixed;

+ 4 - 14
desktop/core/src/desktop/templates/assist.mako

@@ -2024,17 +2024,7 @@ from metadata.conf import has_navigator
 
   <script type="text/html" id="functions-panel-template">
     <div style="height: 100%; width: 100%; overflow-x: hidden; position: relative;" data-bind="niceScroll">
-      <div class="assist-function-type-switch" data-bind="foreach: availableTypes">
-        <!-- ko if: $index() > 0 -->
-        |
-        <!-- /ko -->
-        <!-- ko if: $data === $parent.activeType() -->
-        <span style="font-weight: 600; color: #338BB8;" data-bind="text: $data"></span>
-        <!-- /ko -->
-        <!-- ko ifnot: $data === $parent.activeType() -->
-        <a class="black-link" href="javascript:void(0);" data-bind="click: function () { $parent.activeType($data); }, text: $data"></a>
-        <!-- /ko -->
-      </div>
+      <div data-bind="component: { name: 'hue-drop-down', params: { value: activeType, entries: availableTypes, linkTitle: '${ _ko('Selected dialect') }' } }" style="display: inline-block"></div>
       <ul class="assist-function-categories" data-bind="foreach: activeCategories">
         <li>
           <a class="black-link" href="javascript: void(0);" data-bind="toggle: open"><i class="fa fa-fw" data-bind="css: { 'fa-chevron-right': !open(), 'fa-chevron-down': open }"></i> <span data-bind="text: name"></span></a>
@@ -2061,9 +2051,9 @@ from metadata.conf import has_navigator
         self.categories = {};
 
         self.activeType = ko.observable();
-        self.availableTypes = ['hive', 'impala', 'pig'];
+        self.availableTypes = ko.observableArray(['hive', 'impala', 'pig']);
 
-        self.availableTypes.forEach(function (type) {
+        self.availableTypes().forEach(function (type) {
           self.initFunctions(type);
         })
 
@@ -2073,7 +2063,7 @@ from metadata.conf import has_navigator
           self.activeCategories(self.categories[newValue]);
         });
 
-        self.activeType(self.availableTypes[0]);
+        self.activeType(self.availableTypes()[0]);
       }
 
       FunctionsPanel.prototype.initFunctions = function (dialect) {

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

@@ -24,8 +24,8 @@ from desktop.views import _ko
 <%def name="all()">
   <script type="text/html" id="hue-drop-down-template">
     <!-- ko if: !dropDownVisible() || !searchable -->
-    <a class="inactive-action active-database margin-left-10" href="javascript:void(0)" data-bind="toggle: dropDownVisible, css: { 'blue': dropDownVisible }">
-      <span data-bind="text: value, visible: ! dropDownVisible()"  title="${ _('Selected database') }"></span>
+    <a class="inactive-action hue-drop-down-active margin-left-10" href="javascript:void(0)" data-bind="toggle: dropDownVisible, css: { 'blue': dropDownVisible }">
+      <span data-bind="text: value, visible: ! dropDownVisible() || !searchable, attr: { 'title': linkTitle }" ></span>
       <i class="fa fa-caret-down"></i>
     </a>
     <!-- /ko -->
@@ -58,6 +58,7 @@ from desktop.views import _ko
         self.entries = params.entries;
         self.searchable = params.searchable || false;
         self.foreachVisible = params.foreachVisible || false;
+        self.linkTitle = params.linkTitle || '${ _('Selected entry') }';
 
         var closeOnOutsideClick = function (e) {
           var $input = $(element).find('.hue-drop-down-input');

+ 0 - 5
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -841,11 +841,6 @@ table.airy tr td {
   font-weight: lighter;
 }
 
-.active-database span {
-  font-size: 12px;
-  font-weight: lighter;
-}
-
 .resultTable th {
   color: #FFF;
 }

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

@@ -1461,7 +1461,7 @@ ${ hueIcons.symbols() }
     <!-- ko template: { name: 'longer-operation' } --><!-- /ko -->
     <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()" title="${ _('Execution time') }"></span>
     <!-- ko if: availableDatabases().length > 0 && isSqlDialect() -->
-    <div data-bind="component: { name: 'hue-drop-down', params: { value: database, entries: availableDatabases, foreachVisible: true, searchable: true } }" style="display: inline-block"></div>
+    <div data-bind="component: { name: 'hue-drop-down', params: { value: database, entries: availableDatabases, foreachVisible: true, searchable: true, linkTitle: '${ _ko('Active database') }' } }" style="display: inline-block"></div>
     <!-- /ko -->
 
    <!-- ko template: { name: 'snippet-header-statement-type' } --><!-- /ko -->