Improve fix title (#1823)

This commit is contained in:
Vladyslav 2019-07-01 18:21:36 +03:00 committed by Igor Kulikov
parent cd213bfeb9
commit 7f843f6107
3 changed files with 20 additions and 15 deletions

View File

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

View File

@ -44,13 +44,14 @@
ng-click="vm.widgetClicked($event, widget)" ng-click="vm.widgetClicked($event, widget)"
tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)" tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
ng-style="vm.widgetStyle(widget)"> 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 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> <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> <tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
</div> </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)" <md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)"
aria-label="{{action.displayName}}" aria-label="{{action.displayName}}"
ng-show="!vm.isEdit" ng-show="!vm.isEdit"

View File

@ -16,7 +16,7 @@
--> -->
<section class="tb-timewindow" layout='row' layout-align="start center"> <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}}"> <md-tooltip md-direction="{{tooltipDirection}}">
{{ 'timewindow.edit' | translate }} {{ 'timewindow.edit' | translate }}
</md-tooltip> </md-tooltip>
@ -28,10 +28,10 @@
</md-tooltip> </md-tooltip>
{{model.displayValue}} {{model.displayValue}}
</span> </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}}"> <md-tooltip md-direction="{{tooltipDirection}}">
{{ 'timewindow.edit' | translate }} {{ 'timewindow.edit' | translate }}
</md-tooltip> </md-tooltip>
<ng-md-icon aria-label="{{ 'timewindow.date-range' | translate }}" icon="query_builder"></ng-md-icon> <ng-md-icon aria-label="{{ 'timewindow.date-range' | translate }}" icon="query_builder"></ng-md-icon>
</md-button> </md-button>
</section> </section>