Browse Source

[frontend] Option to pass tooltip in params now

Harshg999 4 years ago
parent
commit
ceb5e6d30f

+ 1 - 4
desktop/core/src/desktop/js/ko/components/ko.contextSelector.js

@@ -81,10 +81,7 @@ const TEMPLATE = `
     <!-- /ko -->
 
     <!-- ko if: availableDatabases().length > 0 && !hideDatabases-->
-    <!-- ko ifnot: hideLabels --><span class="editor-header-title">${I18n(
-      'Database'
-    )}</span><!-- /ko -->
-    <div data-bind="component: { name: 'hue-drop-down', params: { value: database, entries: availableDatabases, foreachVisible: true, searchable: true, linkTitle: '${I18n(
+    <div data-bind="component: { name: 'hue-drop-down', params: { titleName: 'Database', value: database, entries: availableDatabases, foreachVisible: true, searchable: true, linkTitle: '${I18n(
       'Active database'
     )}' } }" style="display: inline-block"></div>
     <!-- /ko -->

+ 14 - 1
desktop/core/src/desktop/js/ko/components/ko.dropDown.js

@@ -27,7 +27,7 @@ const TEMPLATE = `
   <a class="inactive-action hue-drop-down-active" href="javascript:void(0)" data-bind="toggle: dropDownVisible, css: { 'blue': dropDownVisible }">
     <!-- ko if: icon --><i class="fa" data-bind="css: icon"></i><!-- /ko -->
     <!-- ko if: !noLabel && value -->
-    <span class="hue-drop-down-selected" data-bind="text: value() && typeof value()[labelAttribute] !== 'undefined' ? value()[labelAttribute] : value(), visible: ! dropDownVisible() || !searchable, attr: { 'title': value() && typeof value()[labelAttribute] !== 'undefined' ? value()[labelAttribute] : value() }" ></span>
+    <span class="hue-drop-down-selected" data-bind="text: value() && typeof value()[labelAttribute] !== 'undefined' ? value()[labelAttribute] : value(), visible: ! dropDownVisible() || !searchable, attr: { 'title': titleTooltip }" ></span>
     <!-- /ko -->
     <i class="fa fa-caret-down"></i>
   </a>
@@ -160,6 +160,7 @@ class HueDropDown {
     self.labelAttribute = params.labelAttribute || 'label';
     self.icon = params.icon;
     self.value = params.value;
+    self.titleName = params.titleName;
     self.entries = params.entries;
     self.searchable = params.searchable || false;
     self.foreachVisible = params.foreachVisible || false;
@@ -173,6 +174,18 @@ class HueDropDown {
         : self.value();
     });
 
+    self.titleTooltip = ko.pureComputed(() => {
+      const title =
+        self.value() && typeof self.value()[self.labelAttribute] !== 'undefined'
+          ? self.value()[self.labelAttribute]
+          : self.value();
+
+      if (typeof self.titleName == 'undefined') {
+        return title;
+      }
+      return self.titleName + ' ' + title;
+    });
+
     const closeOnOutsideClick = function (e) {
       const $input = $(element).find('.hue-drop-down-input');
       if (!$input.is($(e.target))) {