From 821f3eb23a7f75dd502c3aacbda5b69b04e247e1 Mon Sep 17 00:00:00 2001
From: pgrisu <42511852+pgrisu@users.noreply.github.com>
Date: Mon, 22 Jul 2019 16:53:56 +0200
Subject: [PATCH 1/2] add support for optional widget title tooltip text

---
 ui/src/app/components/dashboard.directive.js          | 11 +++++++++++
 ui/src/app/components/dashboard.tpl.html              |  6 +++++-
 .../app/components/widget/widget-config.directive.js  |  4 +++-
 ui/src/app/components/widget/widget-config.tpl.html   |  6 ++++++
 ui/src/app/locale/locale.constant-de_DE.json          |  1 +
 ui/src/app/locale/locale.constant-en_US.json          |  1 +
 ui/src/app/locale/locale.constant-es_ES.json          |  1 +
 ui/src/app/locale/locale.constant-fr_FR.json          |  1 +
 ui/src/app/locale/locale.constant-it_IT.json          |  1 +
 9 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/components/dashboard.directive.js b/ui/src/app/components/dashboard.directive.js
index f748d52066..8cb7ce0167 100644
--- a/ui/src/app/components/dashboard.directive.js
+++ b/ui/src/app/components/dashboard.directive.js
@@ -187,6 +187,7 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     vm.showWidgetActions = showWidgetActions;
     vm.widgetTitleStyle = widgetTitleStyle;
     vm.widgetTitle = widgetTitle;
+    vm.widgetTitleTooltip = widgetTitleTooltip;
     vm.customWidgetHeaderActions = customWidgetHeaderActions;
     vm.widgetActions = widgetActions;
     vm.dropWidgetShadow = dropWidgetShadow;
@@ -934,6 +935,16 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         }
     }
 
+    function widgetTitleTooltip(widget) {
+        var ctx = widgetContext(widget);
+        if (ctx && ctx.widgetTitleTooltip
+            && ctx.widgetTitleTooltip.length) {
+            return ctx.widgetTitleTooltip;
+        } else {
+            return widget.config.titleTooltip;
+        }
+    }
+
     function customWidgetHeaderActions(widget) {
         var ctx = widgetContext(widget);
         if (ctx && ctx.customHeaderActions && ctx.customHeaderActions.length) {
diff --git a/ui/src/app/components/dashboard.tpl.html b/ui/src/app/components/dashboard.tpl.html
index 6687058216..40cdac4baf 100644
--- a/ui/src/app/components/dashboard.tpl.html
+++ b/ui/src/app/components/dashboard.tpl.html
@@ -47,7 +47,11 @@
 								<div layout="row" layout-align="space-between start">
 									<div class="tb-widget-title" layout="column" layout-align="center start" ng-show="vm.showWidgetTitlePanel(widget)">
 										<div ng-if="vm.hasWidgetTitleTemplate(widget)" ng-include="vm.widgetTitleTemplate(widget)"></div>
-										<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead title">{{vm.widgetTitle(widget)}}</span>
+										<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead title">{{vm.widgetTitle(widget)}}
+											<md-tooltip ng-show="vm.widgetTitleTooltip(widget)" md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
+												{{vm.widgetTitleTooltip(widget)}}
+											</md-tooltip>
+										</span>
 										<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
 									</div>
 									<div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()"
diff --git a/ui/src/app/components/widget/widget-config.directive.js b/ui/src/app/components/widget/widget-config.directive.js
index 861e9fe0a0..b132b4b28a 100644
--- a/ui/src/app/components/widget/widget-config.directive.js
+++ b/ui/src/app/components/widget/widget-config.directive.js
@@ -109,6 +109,7 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
                 if (config) {
                     scope.selectedTab = 0;
                     scope.title = config.title;
+                    scope.titleTooltip = angular.isDefined(config.titleTooltip) ? config.titleTooltip : '';
                     scope.showTitle = config.showTitle;
                     scope.dropShadow = angular.isDefined(config.dropShadow) ? config.dropShadow : true;
                     scope.enableFullscreen = angular.isDefined(config.enableFullscreen) ? config.enableFullscreen : true;
@@ -236,7 +237,7 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
             }
         };
 
-        scope.$watch('title + showTitle + dropShadow + enableFullscreen + backgroundColor + color + ' +
+        scope.$watch('title + titleTooltip + showTitle + dropShadow + enableFullscreen + backgroundColor + color + ' +
             'padding + margin + widgetStyle + titleStyle + mobileOrder + mobileHeight + units + decimals + useDashboardTimewindow + displayTimewindow + ' +
             'alarmSearchStatus + alarmsPollingInterval + showLegend', function () {
             if (ngModelCtrl.$viewValue) {
@@ -244,6 +245,7 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
                 if (value.config) {
                     var config = value.config;
                     config.title = scope.title;
+                    config.titleTooltip = scope.titleTooltip;
                     config.showTitle = scope.showTitle;
                     config.dropShadow = scope.dropShadow;
                     config.enableFullscreen = scope.enableFullscreen;
diff --git a/ui/src/app/components/widget/widget-config.tpl.html b/ui/src/app/components/widget/widget-config.tpl.html
index ea439ce8bf..38187b1787 100644
--- a/ui/src/app/components/widget/widget-config.tpl.html
+++ b/ui/src/app/components/widget/widget-config.tpl.html
@@ -190,6 +190,12 @@
                         </div>
                     </div>
                 </div>
+                <div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
+                    <md-input-container flex class="md-block">
+                        <label translate>widget-config.title-tooltip</label>
+                        <input name="titleTooltip" ng-model="titleTooltip">
+                    </md-input-container>
+                </div>
                 <div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
                     <div layout="row" layout-padding>
                         <md-checkbox aria-label="{{ 'widget-config.display-title' | translate }}"
diff --git a/ui/src/app/locale/locale.constant-de_DE.json b/ui/src/app/locale/locale.constant-de_DE.json
index f7048368b4..9f76888a15 100644
--- a/ui/src/app/locale/locale.constant-de_DE.json
+++ b/ui/src/app/locale/locale.constant-de_DE.json
@@ -1498,6 +1498,7 @@
     "settings": "Einstellungen",
     "advanced": "Erweitert ",
     "title": "Titel",
+    "title-tooltip": "Titel Tooltip",
     "general-settings": "Allgemeine Einstellungen",
     "display-title": "Titel anzeigen",
     "drop-shadow": "Schlagschatten",
diff --git a/ui/src/app/locale/locale.constant-en_US.json b/ui/src/app/locale/locale.constant-en_US.json
index 918b3b4a35..73a53c865c 100644
--- a/ui/src/app/locale/locale.constant-en_US.json
+++ b/ui/src/app/locale/locale.constant-en_US.json
@@ -1568,6 +1568,7 @@
         "settings": "Settings",
         "advanced": "Advanced",
         "title": "Title",
+        "title-tooltip": "Title Tooltip",
         "general-settings": "General settings",
         "display-title": "Display title",
         "drop-shadow": "Drop shadow",
diff --git a/ui/src/app/locale/locale.constant-es_ES.json b/ui/src/app/locale/locale.constant-es_ES.json
index 0d76e8b566..86ce9407c8 100644
--- a/ui/src/app/locale/locale.constant-es_ES.json
+++ b/ui/src/app/locale/locale.constant-es_ES.json
@@ -1498,6 +1498,7 @@
         "settings": "Configuración",
         "advanced": "Avanzado",
         "title": "Título",
+        "title-tooltip": "Tooltip Título",
         "general-settings": "Configuaración general",
         "display-title": "Mostrar título",
         "drop-shadow": "Colocar sombra",
diff --git a/ui/src/app/locale/locale.constant-fr_FR.json b/ui/src/app/locale/locale.constant-fr_FR.json
index 036e10efa4..61a237a907 100644
--- a/ui/src/app/locale/locale.constant-fr_FR.json
+++ b/ui/src/app/locale/locale.constant-fr_FR.json
@@ -1429,6 +1429,7 @@
         "timewindow": "Fenêtre de temps",
         "title": "Titre",
         "title-style": "Style de titre",
+        "title-tooltip": "Tooltip de titre",
         "units": "Symbole spécial à afficher à côté de la valeur",
         "use-dashboard-timewindow": "Utiliser la fenêtre de temps du tableau de bord",
         "widget-style": "Style du widget"
diff --git a/ui/src/app/locale/locale.constant-it_IT.json b/ui/src/app/locale/locale.constant-it_IT.json
index b53bdbf558..95862ef5f3 100644
--- a/ui/src/app/locale/locale.constant-it_IT.json
+++ b/ui/src/app/locale/locale.constant-it_IT.json
@@ -1503,6 +1503,7 @@
         "settings": "Impostazioni",
         "advanced": "Avanzate",
         "title": "Titolo",
+        "title-tooltip": "Tooltip titolo",
         "general-settings": "Impostazioni generali",
         "display-title": "Mostra titolo",
         "drop-shadow": "Drop shadow",

From 4299869ae9f09f6aa3d0c88d1782b62d02c7ccd8 Mon Sep 17 00:00:00 2001
From: pgrisu <42511852+pgrisu@users.noreply.github.com>
Date: Thu, 1 Aug 2019 11:43:47 +0200
Subject: [PATCH 2/2] Add multiline support on widget title tooltip

---
 ui/src/app/components/dashboard.tpl.html | 4 ++--
 ui/src/scss/main.scss                    | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/components/dashboard.tpl.html b/ui/src/app/components/dashboard.tpl.html
index 40cdac4baf..04b1330a65 100644
--- a/ui/src/app/components/dashboard.tpl.html
+++ b/ui/src/app/components/dashboard.tpl.html
@@ -48,8 +48,8 @@
 									<div class="tb-widget-title" layout="column" layout-align="center start" ng-show="vm.showWidgetTitlePanel(widget)">
 										<div ng-if="vm.hasWidgetTitleTemplate(widget)" ng-include="vm.widgetTitleTemplate(widget)"></div>
 										<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead title">{{vm.widgetTitle(widget)}}
-											<md-tooltip ng-show="vm.widgetTitleTooltip(widget)" md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
-												{{vm.widgetTitleTooltip(widget)}}
+											<md-tooltip class="tb-tooltip-multiline" ng-if="vm.widgetTitleTooltip(widget)" md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
+												<span ng-bind-html="vm.widgetTitleTooltip(widget)"></span>
 											</md-tooltip>
 										</span>
 										<tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 07cea7f1f7..e2c03ce2fe 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -483,6 +483,15 @@ pre.tb-highlight {
   @include line-clamp(2, 1.1);
 }
 
+.tb-tooltip-multiline {
+  max-width: 400px;
+  height: auto !important;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1.5;
+  white-space: normal !important;
+}
+
 /***********************
  * Flow
  ***********************/