Improve fix title (#1823)

ui/src/app/components/dashboard.scss

@@ -24,30 +24,34 @@ div.tb-widget {
 
   transition: all .2s ease-in-out;
 
-  .tb-widget-header{
-    display: flex;
-    align-items: start;
-    justify-content: space-between;
-  }
-
   .tb-widget-title {
-    display: block;
-    max-height: 75px;
+    max-height: 60px;
     padding-top: 5px;
     padding-left: 5px;
     overflow: hidden;
-    text-overflow: ellipsis;
 
     tb-timewindow {
       font-size: 14px;
       opacity: .85;
     }
+
+    .title{
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .tb-widget-actions {
     z-index: 19;
     margin: 0;
 
+    &-absolute{
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    }
+
     .md-button.md-icon-button {
       width: 32px;
       min-width: 32px;

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

@@ -44,13 +44,14 @@
 										ng-click="vm.widgetClicked($event, widget)"
 										tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
 									    ng-style="vm.widgetStyle(widget)">
-								<div class="tb-widget-header">
+								<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">{{vm.widgetTitle(widget)}}</span>
+										<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead title">{{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()">
+									<div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()"
+										ng-class="{'tb-widget-actions-absolute': !vm.showWidgetTitlePanel(widget) && !(vm.hasWidgetTitleTemplate(widget)||vm.showWidgetTitle(widget)||vm.hasAggregation(widget))}">
 										<md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)"
 												   aria-label="{{action.displayName}}"
 												   ng-show="!vm.isEdit"

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

@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-timewindow" layout='row' layout-align="start center">
-    <md-button ng-if="direction === 'left'" ng-disabled="disabled" class="md-icon-button" aria-label="{{ 'timewindow.edit' | translate }}" ng-click="openEditMode($event)">
+    <md-button ng-if="direction === 'left'" ng-disabled="disabled" class="md-icon-button tb-md-32" aria-label="{{ 'timewindow.edit' | translate }}" ng-click="openEditMode($event)">
         <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'timewindow.edit' | translate }}
         </md-tooltip>
@@ -28,10 +28,10 @@
         </md-tooltip>
         {{model.displayValue}}
     </span>
-    <md-button ng-if="direction === 'right'" ng-disabled="disabled" class="md-icon-button" aria-label="{{ 'timewindow.edit' | translate }}" ng-click="openEditMode($event)">
+    <md-button ng-if="direction === 'right'" ng-disabled="disabled" class="md-icon-button tb-md-32" aria-label="{{ 'timewindow.edit' | translate }}" ng-click="openEditMode($event)">
         <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'timewindow.edit' | translate }}
         </md-tooltip>
         <ng-md-icon aria-label="{{ 'timewindow.date-range' | translate }}" icon="query_builder"></ng-md-icon>
     </md-button>
-</section>
+</section>