From 4d050b3c93973eb02f6d6c93f8a810a823b460af Mon Sep 17 00:00:00 2001
From: Vladyslav Prykhodko <vlad.pryhodko@icloud.com>
Date: Fri, 1 Mar 2019 15:18:02 +0200
Subject: [PATCH] fix widget title longed

---
 ui/src/app/components/dashboard.scss     |  14 ++-
 ui/src/app/components/dashboard.tpl.html | 124 ++++++++++++-----------
 2 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/ui/src/app/components/dashboard.scss b/ui/src/app/components/dashboard.scss
index afc1d5934c..bfbb3ead4f 100644
--- a/ui/src/app/components/dashboard.scss
+++ b/ui/src/app/components/dashboard.scss
@@ -24,12 +24,19 @@ div.tb-widget {
 
   transition: all .2s ease-in-out;
 
-  .tb-widget-title {
-    max-height: 60px;
+  .tb-widget-header{
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+  }
 
+  .tb-widget-title {
+    display: block;
+    max-height: 75px;
     padding-top: 5px;
     padding-left: 5px;
     overflow: hidden;
+    text-overflow: ellipsis;
 
     tb-timewindow {
       font-size: 14px;
@@ -38,9 +45,6 @@ div.tb-widget {
   }
 
   .tb-widget-actions {
-    position: absolute;
-    top: 8px;
-    right: 8px;
     z-index: 19;
     margin: 0;
 
diff --git a/ui/src/app/components/dashboard.tpl.html b/ui/src/app/components/dashboard.tpl.html
index cb45a52561..7be57240b9 100644
--- a/ui/src/app/components/dashboard.tpl.html
+++ b/ui/src/app/components/dashboard.tpl.html
@@ -44,66 +44,68 @@
 										ng-click="vm.widgetClicked($event, widget)"
 										tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
 									    ng-style="vm.widgetStyle(widget)">
-								<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">{{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()">
-									<md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)"
-											   aria-label="{{action.displayName}}"
-											   ng-show="!vm.isEdit"
-											   ng-click="action.onAction($event)"
-											   class="md-icon-button">
-										<md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
-											{{action.displayName}}
-										</md-tooltip>
-										<ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>
-									</md-button>
-									<md-button ng-repeat="action in vm.widgetActions(widget)"
-											   aria-label="{{ action.name | translate }}"
-											   ng-show="!vm.isEdit && action.show"
-											   ng-click="action.onAction($event)"
-											   class="md-icon-button">
-											   <md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
-												   {{ action.name | translate }}
-											   </md-tooltip>
-											   <ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>
-									</md-button>
-									<md-button id="expand-button"
-											   ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)"
-											   aria-label="{{ 'fullscreen.fullscreen' | translate }}"
-											   class="md-icon-button"></md-button>
-									<md-button ng-show="vm.isEditActionEnabled && !vm.isWidgetExpanded"
-											   ng-disabled="vm.loading()"
-											   class="md-icon-button"
-											   ng-click="vm.editWidget($event, widget)"
-											   aria-label="{{ 'widget.edit' | translate }}">
-										<md-tooltip md-direction="top">
-											{{ 'widget.edit' | translate }}
-										</md-tooltip>
-										<ng-md-icon size="20" icon="edit"></ng-md-icon>
-									</md-button>
-									<md-button ng-show="vm.isExportActionEnabled && !vm.isWidgetExpanded"
-											   ng-disabled="vm.loading()"
-											   class="md-icon-button"
-											   ng-click="vm.exportWidget($event, widget)"
-											   aria-label="{{ 'widget.export' | translate }}">
-										<md-tooltip md-direction="top">
-											{{ 'widget.export' | translate }}
-										</md-tooltip>
-										<ng-md-icon size="20" icon="file_download"></ng-md-icon>
-									</md-button>
-									<md-button ng-show="vm.isRemoveActionEnabled && !vm.isWidgetExpanded"
-										ng-disabled="vm.loading()"
-										class="md-icon-button"
-										ng-click="vm.removeWidget($event, widget)"
-										aria-label="{{ 'widget.remove' | translate }}">
-										<md-tooltip md-direction="top">
-											{{ 'widget.remove' | translate }}
-										</md-tooltip>
-										<ng-md-icon size="20" icon="close"></ng-md-icon>
-									</md-button>
+								<div class="tb-widget-header">
+									<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">{{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()">
+										<md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)"
+												   aria-label="{{action.displayName}}"
+												   ng-show="!vm.isEdit"
+												   ng-click="action.onAction($event)"
+												   class="md-icon-button">
+											<md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
+												{{action.displayName}}
+											</md-tooltip>
+											<ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>
+										</md-button>
+										<md-button ng-repeat="action in vm.widgetActions(widget)"
+												   aria-label="{{ action.name | translate }}"
+												   ng-show="!vm.isEdit && action.show"
+												   ng-click="action.onAction($event)"
+												   class="md-icon-button">
+											<md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
+												{{ action.name | translate }}
+											</md-tooltip>
+											<ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>
+										</md-button>
+										<md-button id="expand-button"
+												   ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)"
+												   aria-label="{{ 'fullscreen.fullscreen' | translate }}"
+												   class="md-icon-button"></md-button>
+										<md-button ng-show="vm.isEditActionEnabled && !vm.isWidgetExpanded"
+												   ng-disabled="vm.loading()"
+												   class="md-icon-button"
+												   ng-click="vm.editWidget($event, widget)"
+												   aria-label="{{ 'widget.edit' | translate }}">
+											<md-tooltip md-direction="top">
+												{{ 'widget.edit' | translate }}
+											</md-tooltip>
+											<ng-md-icon size="20" icon="edit"></ng-md-icon>
+										</md-button>
+										<md-button ng-show="vm.isExportActionEnabled && !vm.isWidgetExpanded"
+												   ng-disabled="vm.loading()"
+												   class="md-icon-button"
+												   ng-click="vm.exportWidget($event, widget)"
+												   aria-label="{{ 'widget.export' | translate }}">
+											<md-tooltip md-direction="top">
+												{{ 'widget.export' | translate }}
+											</md-tooltip>
+											<ng-md-icon size="20" icon="file_download"></ng-md-icon>
+										</md-button>
+										<md-button ng-show="vm.isRemoveActionEnabled && !vm.isWidgetExpanded"
+												   ng-disabled="vm.loading()"
+												   class="md-icon-button"
+												   ng-click="vm.removeWidget($event, widget)"
+												   aria-label="{{ 'widget.remove' | translate }}">
+											<md-tooltip md-direction="top">
+												{{ 'widget.remove' | translate }}
+											</md-tooltip>
+											<ng-md-icon size="20" icon="close"></ng-md-icon>
+										</md-button>
+									</div>
 								</div>
 								<div flex layout="column" class="tb-widget-content">
 									<div flex tb-widget
@@ -143,4 +145,4 @@
 			</md-button>
 		</md-menu-item>
 	</md-menu-content>
-</md-menu>
\ No newline at end of file
+</md-menu>