Commit 7f843f61071308e96d7fcb9ebd971b04d741c338
Committed by
Igor Kulikov
Igor Kulikov
1 parent
cd213bfe
Improve fix title (#1823)
Showing
3 changed files
with
20 additions
and
15 deletions
| @@ -24,30 +24,34 @@ div.tb-widget { | @@ -24,30 +24,34 @@ div.tb-widget { | ||
| 24 | 24 | ||
| 25 | transition: all .2s ease-in-out; | 25 | transition: all .2s ease-in-out; |
| 26 | 26 | ||
| 27 | - .tb-widget-header{ | ||
| 28 | - display: flex; | ||
| 29 | - align-items: start; | ||
| 30 | - justify-content: space-between; | ||
| 31 | - } | ||
| 32 | - | ||
| 33 | .tb-widget-title { | 27 | .tb-widget-title { |
| 34 | - display: block; | ||
| 35 | - max-height: 75px; | 28 | + max-height: 60px; |
| 36 | padding-top: 5px; | 29 | padding-top: 5px; |
| 37 | padding-left: 5px; | 30 | padding-left: 5px; |
| 38 | overflow: hidden; | 31 | overflow: hidden; |
| 39 | - text-overflow: ellipsis; | ||
| 40 | 32 | ||
| 41 | tb-timewindow { | 33 | tb-timewindow { |
| 42 | font-size: 14px; | 34 | font-size: 14px; |
| 43 | opacity: .85; | 35 | opacity: .85; |
| 44 | } | 36 | } |
| 37 | + | ||
| 38 | + .title{ | ||
| 39 | + width: 100%; | ||
| 40 | + overflow: hidden; | ||
| 41 | + text-overflow: ellipsis; | ||
| 42 | + } | ||
| 45 | } | 43 | } |
| 46 | 44 | ||
| 47 | .tb-widget-actions { | 45 | .tb-widget-actions { |
| 48 | z-index: 19; | 46 | z-index: 19; |
| 49 | margin: 0; | 47 | margin: 0; |
| 50 | 48 | ||
| 49 | + &-absolute{ | ||
| 50 | + position: absolute; | ||
| 51 | + top: 8px; | ||
| 52 | + right: 8px; | ||
| 53 | + } | ||
| 54 | + | ||
| 51 | .md-button.md-icon-button { | 55 | .md-button.md-icon-button { |
| 52 | width: 32px; | 56 | width: 32px; |
| 53 | min-width: 32px; | 57 | min-width: 32px; |
| @@ -44,13 +44,14 @@ | @@ -44,13 +44,14 @@ | ||
| 44 | ng-click="vm.widgetClicked($event, widget)" | 44 | ng-click="vm.widgetClicked($event, widget)" |
| 45 | tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)" | 45 | tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)" |
| 46 | ng-style="vm.widgetStyle(widget)"> | 46 | ng-style="vm.widgetStyle(widget)"> |
| 47 | - <div class="tb-widget-header"> | 47 | + <div layout="row" layout-align="space-between start"> |
| 48 | <div class="tb-widget-title" layout="column" layout-align="center start" ng-show="vm.showWidgetTitlePanel(widget)"> | 48 | <div class="tb-widget-title" layout="column" layout-align="center start" ng-show="vm.showWidgetTitlePanel(widget)"> |
| 49 | <div ng-if="vm.hasWidgetTitleTemplate(widget)" ng-include="vm.widgetTitleTemplate(widget)"></div> | 49 | <div ng-if="vm.hasWidgetTitleTemplate(widget)" ng-include="vm.widgetTitleTemplate(widget)"></div> |
| 50 | - <span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead">{{vm.widgetTitle(widget)}}</span> | 50 | + <span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead title">{{vm.widgetTitle(widget)}}</span> |
| 51 | <tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow> | 51 | <tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow> |
| 52 | </div> | 52 | </div> |
| 53 | - <div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()"> | 53 | + <div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()" |
| 54 | + ng-class="{'tb-widget-actions-absolute': !vm.showWidgetTitlePanel(widget) && !(vm.hasWidgetTitleTemplate(widget)||vm.showWidgetTitle(widget)||vm.hasAggregation(widget))}"> | ||
| 54 | <md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)" | 55 | <md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)" |
| 55 | aria-label="{{action.displayName}}" | 56 | aria-label="{{action.displayName}}" |
| 56 | ng-show="!vm.isEdit" | 57 | ng-show="!vm.isEdit" |
| @@ -16,7 +16,7 @@ | @@ -16,7 +16,7 @@ | ||
| 16 | 16 | ||
| 17 | --> | 17 | --> |
| 18 | <section class="tb-timewindow" layout='row' layout-align="start center"> | 18 | <section class="tb-timewindow" layout='row' layout-align="start center"> |
| 19 | - <md-button ng-if="direction === 'left'" ng-disabled="disabled" class="md-icon-button" aria-label="{{ 'timewindow.edit' | translate }}" ng-click="openEditMode($event)"> | 19 | + <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)"> |
| 20 | <md-tooltip md-direction="{{tooltipDirection}}"> | 20 | <md-tooltip md-direction="{{tooltipDirection}}"> |
| 21 | {{ 'timewindow.edit' | translate }} | 21 | {{ 'timewindow.edit' | translate }} |
| 22 | </md-tooltip> | 22 | </md-tooltip> |
| @@ -28,10 +28,10 @@ | @@ -28,10 +28,10 @@ | ||
| 28 | </md-tooltip> | 28 | </md-tooltip> |
| 29 | {{model.displayValue}} | 29 | {{model.displayValue}} |
| 30 | </span> | 30 | </span> |
| 31 | - <md-button ng-if="direction === 'right'" ng-disabled="disabled" class="md-icon-button" aria-label="{{ 'timewindow.edit' | translate }}" ng-click="openEditMode($event)"> | 31 | + <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)"> |
| 32 | <md-tooltip md-direction="{{tooltipDirection}}"> | 32 | <md-tooltip md-direction="{{tooltipDirection}}"> |
| 33 | {{ 'timewindow.edit' | translate }} | 33 | {{ 'timewindow.edit' | translate }} |
| 34 | </md-tooltip> | 34 | </md-tooltip> |
| 35 | <ng-md-icon aria-label="{{ 'timewindow.date-range' | translate }}" icon="query_builder"></ng-md-icon> | 35 | <ng-md-icon aria-label="{{ 'timewindow.date-range' | translate }}" icon="query_builder"></ng-md-icon> |
| 36 | </md-button> | 36 | </md-button> |
| 37 | -</section> | ||
| 37 | +</section> |