Browse Source

HUE-8257 [dashboard] The plus button hint should be shown just on hovering the filter bar

Enrico Berti 7 years ago
parent
commit
ac660a2318

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

@@ -120,7 +120,8 @@
 
   % if USE_NEW_ADD_METHOD.get():
   <!-- ko if: $root.isGridster -->
-  <div class="initial-hint empty-dashboard-plus" data-bind="fadeVisible: columns().length > 0 && showPlusButtonHint(), click: function(){ showPlusButtonHint(false); }">
+  <div class="initial-hint empty-dashboard-plus" data-bind="fadeVisible: columns().length > 0 && showPlusButtonHint() && !showPlusButtonHintShownOnce(), click: function(){ showPlusButtonHint(false); }">
+
     <div class="initial-hint-text">${_('Drag the top plus button or any field from the right assistant into your dashboard')}</div>
     <img src="${ static('desktop/art/hint_arrow.svg') }" alt="${ _('Hint arrow') }" style="width: 90px" />
     <img src="${ static('desktop/art/hint_arrow.svg') }" alt="${ _('Hint arrow') }" style="width: 90px; margin-left: 80px; position: absolute; transform: rotate(33deg);" />
@@ -237,6 +238,10 @@
                   <i class="fa fa-fw fa-info" title="${_('Show Details')}"/>
                 </a>
                 <!-- /ko -->
+                <!-- ko ifnot: fieldName  -->
+                  <i class="fa fa-fw"/>
+                <!-- /ko -->
+
 
                 <div class="clearfix"></div>
                 <br>

+ 8 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -1895,7 +1895,14 @@ var SearchViewModel = function (collection_json, query_json, initial_json, has_g
     self.isGridster(false);
   }
 
-  self.showPlusButtonHint = ko.observable(collection_json.layout.length === 0);
+  self.showPlusButtonHint = ko.observable(false);
+  self.showPlusButtonHint.subscribe(function(val){
+    if (!val) {
+      self.showPlusButtonHintShownOnce(true);
+    }
+  });
+  self.showPlusButtonHintShownOnce = ko.observable(false);
+
 
   self.build = function () {
     self.intervalOptions = ko.observableArray(ko.bindingHandlers.daterangepicker.INTERVAL_OPTIONS);

+ 4 - 2
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -51,7 +51,7 @@ from dashboard.conf import USE_GRIDSTER, USE_NEW_ADD_METHOD, HAS_REPORT_ENABLED,
     </div>
   </form>
 %else:
-<div class="search-bar" data-bind="visible: !$root.isPlayerMode(), dockable: { scrollable: '.page-content', jumpCorrection: 0, topSnap: '${ conf.CUSTOM.BANNER_TOP_HTML.get() and "78px" or "50px" }', triggerAdjust: 50 }">
+<div class="search-bar" data-bind="visible: !$root.isPlayerMode(), dockable: { scrollable: '.page-content', jumpCorrection: 0, topSnap: '${ conf.CUSTOM.BANNER_TOP_HTML.get() and "78px" or "50px" }', triggerAdjust: 50 }, event: { mouseover: function(){ if (columns().length && isGridster()) { showPlusButtonHint(true); } } }">
   <div class="search-bar-header">
     <div class="search-bar-logo">
       <div class="app-header">
@@ -170,7 +170,7 @@ from dashboard.conf import USE_GRIDSTER, USE_NEW_ADD_METHOD, HAS_REPORT_ENABLED,
       % endif
 
       <div class="dropdown pull-right margin-left-10">
-        <a class="btn" data-toggle="dropdown" href="javascript: void(0)">
+        <a class="btn" data-toggle="dropdown" href="javascript: void(0)" data-bind="click: function() { showPlusButtonHint(false); }">
           <i class="fa fa-fw fa-ellipsis-v"></i>
         </a>
         <ul class="dropdown-menu">
@@ -4460,6 +4460,8 @@ $(document).ready(function () {
 
     if (searchViewModel.columns().length > 0) {
 
+      searchViewModel.showPlusButtonHint(false);
+
       if (typeof dimensions.overlap !== 'undefined') {
         if (dimensions.overlap === 'N') {
           dimensions.row = dimensions.widgetRow;