Add the possibility to select a title icon in widget configuration (#1900)

ui/src/app/components/dashboard.directive.js

@@ -181,12 +181,15 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
     vm.widgetCol = widgetCol;
     vm.widgetStyle = widgetStyle;
     vm.showWidgetTitle = showWidgetTitle;
+    vm.showWidgetTitleIcon = showWidgetTitleIcon;
     vm.hasWidgetTitleTemplate = hasWidgetTitleTemplate;
     vm.widgetTitleTemplate = widgetTitleTemplate;
     vm.showWidgetTitlePanel = showWidgetTitlePanel;
     vm.showWidgetActions = showWidgetActions;
     vm.widgetTitleStyle = widgetTitleStyle;
     vm.widgetTitle = widgetTitle;
+    vm.widgetTitleIcon = widgetTitleIcon;
+    vm.widgetTitleIconStyle = widgetTitleIconStyle;
     vm.customWidgetHeaderActions = customWidgetHeaderActions;
     vm.widgetActions = widgetActions;
     vm.dropWidgetShadow = dropWidgetShadow;
@@ -880,6 +883,14 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         }
     }
 
+    function showWidgetTitleIcon(widget) {
+        if (angular.isDefined(widget.config.showTitleIcon)) {
+            return widget.config.showTitleIcon;
+        } else {
+            return false;
+        }
+    }
+
     function hasWidgetTitleTemplate(widget) {
         var ctx = widgetContext(widget);
         if (ctx && ctx.widgetTitleTemplate) {
@@ -934,6 +945,25 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
         }
     }
 
+    function widgetTitleIcon(widget) {
+        if (angular.isDefined(widget.config.titleIcon)) {
+            return widget.config.titleIcon;
+        } else {
+            return '';
+        }
+    }
+
+    function widgetTitleIconStyle(widget) {
+        var style = {};
+        if (angular.isDefined(widget.config.iconColor)) {
+            style.color = widget.config.iconColor;
+        }
+        if (angular.isDefined(widget.config.iconSize)) {
+            style.fontSize = widget.config.iconSize;
+        }
+        return style;
+    }
+
     function customWidgetHeaderActions(widget) {
         var ctx = widgetContext(widget);
         if (ctx && ctx.customHeaderActions && ctx.customHeaderActions.length) {

ui/src/app/components/dashboard.tpl.html

@@ -47,7 +47,12 @@
 								<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">
+											<md-icon class="material-icons" ng-if="vm.showWidgetTitleIcon(widget)" ng-style="vm.widgetTitleIconStyle(widget)">
+												{{vm.widgetTitleIcon(widget)}}
+											</md-icon>
+											{{vm.widgetTitle(widget)}}
+										</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()"

ui/src/app/components/widget/widget-config.directive.js

@@ -109,6 +109,10 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
                 if (config) {
                     scope.selectedTab = 0;
                     scope.title = config.title;
+                    scope.showTitleIcon = angular.isDefined(config.showTitleIcon) ? config.showTitleIcon : false;
+                    scope.titleIcon = angular.isDefined(config.titleIcon) ? config.titleIcon : '';
+                    scope.iconColor = angular.isDefined(config.iconColor) ? config.iconColor : 'rgba(0, 0, 0, 0.87)';
+                    scope.iconSize = angular.isDefined(config.iconSize) ? config.iconSize : '24px';
                     scope.showTitle = config.showTitle;
                     scope.dropShadow = angular.isDefined(config.dropShadow) ? config.dropShadow : true;
                     scope.enableFullscreen = angular.isDefined(config.enableFullscreen) ? config.enableFullscreen : true;
@@ -236,14 +240,18 @@ function WidgetConfig($compile, $templateCache, $rootScope, $translate, $timeout
             }
         };
 
-        scope.$watch('title + showTitle + dropShadow + enableFullscreen + backgroundColor + color + ' +
+        scope.$watch('title + showTitleIcon + titleIcon + iconColor + iconSize + showTitle + dropShadow + enableFullscreen + backgroundColor + ' +
-            'padding + margin + widgetStyle + titleStyle + mobileOrder + mobileHeight + units + decimals + useDashboardTimewindow + displayTimewindow + ' +
+            'color + padding + margin + widgetStyle + titleStyle + mobileOrder + mobileHeight + units + decimals + useDashboardTimewindow + ' +
-            'alarmSearchStatus + alarmsPollingInterval + showLegend', function () {
+            'displayTimewindow + alarmSearchStatus + alarmsPollingInterval + showLegend', function () {
             if (ngModelCtrl.$viewValue) {
                 var value = ngModelCtrl.$viewValue;
                 if (value.config) {
                     var config = value.config;
                     config.title = scope.title;
+                    config.showTitleIcon = scope.showTitleIcon;
+                    config.titleIcon = scope.titleIcon;
+                    config.iconColor = scope.iconColor;
+                    config.iconSize = scope.iconSize;
                     config.showTitle = scope.showTitle;
                     config.dropShadow = scope.dropShadow;
                     config.enableFullscreen = scope.enableFullscreen;

ui/src/app/components/widget/widget-config.tpl.html

@@ -190,6 +190,32 @@
                         </div>
                     </div>
                 </div>
+                <div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
+                    <div layout="row" flex layout-padding>
+                        <md-checkbox aria-label="{{ 'widget-config.display-icon' | translate }}"
+                                     ng-model="showTitleIcon">{{ 'widget-config.display-icon' | translate }}
+                        </md-checkbox>
+                    </div>
+                    <div flex>
+                        <tb-material-icon-select ng-disabled="!showTitleIcon" ng-model="titleIcon">
+                        </tb-material-icon-select>
+                    </div>
+                    <div flex
+                         md-color-picker
+                         ng-model="iconColor"
+                         label="{{ 'widget-config.icon-color' | translate }}"
+                         icon="format_color_fill"
+                         default="rgba(0, 0, 0, 0.87)"
+                         md-color-clear-button="false"
+                         open-on-input="true"
+                         md-color-generic-palette="false"
+                         md-color-history="false"
+                    ></div>
+                    <md-input-container flex>
+                        <label translate>widget-config.icon-size</label>
+                        <input ng-model="iconSize">
+                    </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 }}"

ui/src/app/locale/locale.constant-en_US.json

@@ -1610,7 +1610,10 @@
         "edit-action": "Edit action",
         "delete-action": "Delete action",
         "delete-action-title": "Delete widget action",
-        "delete-action-text": "Are you sure you want delete widget action with name '{{actionName}}'?"
+        "delete-action-text": "Are you sure you want delete widget action with name '{{actionName}}'?",
+        "display-icon": "Display title icon",
+        "icon-color": "Icon color",
+        "icon-size": "Icon size"
     },
     "widget-type": {
         "import": "Import widget type",

ui/src/app/locale/locale.constant-es_ES.json

@@ -1610,7 +1610,10 @@
         "edit-action": "Editar acción",
         "delete-action": "Eliminar acción",
         "delete-action-title": "Eliminar acción del widget",
-        "delete-action-text": "¿Está seguro de que desea eliminar la acción del widget con nombre '{{actionName}}'?"
+        "delete-action-text": "¿Está seguro de que desea eliminar la acción del widget con nombre '{{actionName}}'?",
+        "display-icon": "Mostrar icono del título",
+        "icon-color": "Color del icono",
+        "icon-size": "Tamaño del icono"
     },
     "widget-type": {
         "import": "Importar tipo de widget",

ui/src/app/locale/locale.constant-fr_FR.json

@@ -1431,7 +1431,10 @@
         "title-style": "Style 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"
+        "widget-style": "Style du widget",
+        "display-icon": "Afficher l'icône du titre",
+        "icon-color": "Couleur de l'icône",
+        "icon-size": "Taille de l'icône"
     },
     "widget-type": {
         "create-new-widget-type": "Créer un nouveau type de widget",

ui/src/app/locale/locale.constant-it_IT.json

@@ -1545,7 +1545,10 @@
         "edit-action": "Modifica azione",
         "delete-action": "Cancella azione",
         "delete-action-title": "Cancella azione del widget",
-        "delete-action-text": "Sei sicuro di voler cancellare l'azione del widget '{{actionName}}'?"
+        "delete-action-text": "Sei sicuro di voler cancellare l'azione del widget '{{actionName}}'?",
+        "display-icon": "Mostra icona titolo",
+        "icon-color": "Colore dell'icona",
+        "icon-size": "Dimensione dell'icona"
     },
     "widget-type": {
         "import": "Importa un tipo di widget",