Add the possibility to select a title icon in widget configuration (#1900)
This commit is contained in:
Mirco Pizzichini
Igor Kulikov
parent
3d5920e8cd
commit
c8abaf1a06
@ -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) {
|
||||
|
||||
@ -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()"
|
||||
|
||||
@ -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 + ' +
|
||||
'padding + margin + widgetStyle + titleStyle + mobileOrder + mobileHeight + units + decimals + useDashboardTimewindow + displayTimewindow + ' +
|
||||
'alarmSearchStatus + alarmsPollingInterval + showLegend', function () {
|
||||
scope.$watch('title + showTitleIcon + titleIcon + iconColor + iconSize + showTitle + dropShadow + enableFullscreen + backgroundColor + ' +
|
||||
'color + padding + margin + widgetStyle + titleStyle + mobileOrder + mobileHeight + units + decimals + useDashboardTimewindow + ' +
|
||||
'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;
|
||||
|
||||
@ -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 }}"
|
||||
|
||||
@ -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",
|
||||
@ -1714,4 +1717,4 @@
|
||||
"cs_CZ": "Czech"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user