简柏林 / thingskit · Commits

Commit 4d050b3c93973eb02f6d6c93f8a810a823b460af

Authored by Vladyslav Prykhodko
1 parent 17067442

fix widget title longed

Inline Side-by-side
Showing 2 changed files with 72 additions and 66 deletions
@@ -24,12 +24,19 @@ div.tb-widget { @@ -24,12 +24,19 @@ div.tb-widget {
24 24
25 transition: all .2s ease-in-out; 25 transition: all .2s ease-in-out;
26 26
27 - .tb-widget-title {  
28 - max-height: 60px; 27 + .tb-widget-header{
  28 + display: flex;
  29 + align-items: start;
  30 + justify-content: space-between;
  31 + }
29 32
  33 + .tb-widget-title {
  34 + display: block;
  35 + max-height: 75px;
30 padding-top: 5px; 36 padding-top: 5px;
31 padding-left: 5px; 37 padding-left: 5px;
32 overflow: hidden; 38 overflow: hidden;
  39 + text-overflow: ellipsis;
33 40
34 tb-timewindow { 41 tb-timewindow {
35 font-size: 14px; 42 font-size: 14px;
@@ -38,9 +45,6 @@ div.tb-widget { @@ -38,9 +45,6 @@ div.tb-widget {
38 } 45 }
39 46
40 .tb-widget-actions { 47 .tb-widget-actions {
41 - position: absolute;  
42 - top: 8px;  
43 - right: 8px;  
44 z-index: 19; 48 z-index: 19;
45 margin: 0; 49 margin: 0;
46 50
@@ -44,66 +44,68 @@ @@ -44,66 +44,68 @@
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-title" layout="column" layout-align="center start" ng-show="vm.showWidgetTitlePanel(widget)">  
48 - <div ng-if="vm.hasWidgetTitleTemplate(widget)" ng-include="vm.widgetTitleTemplate(widget)"></div>  
49 - <span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead">{{vm.widgetTitle(widget)}}</span>  
50 - <tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>  
51 - </div>  
52 - <div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()">  
53 - <md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)"  
54 - aria-label="{{action.displayName}}"  
55 - ng-show="!vm.isEdit"  
56 - ng-click="action.onAction($event)"  
57 - class="md-icon-button">  
58 - <md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">  
59 - {{action.displayName}}  
60 - </md-tooltip>  
61 - <ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>  
62 - </md-button>  
63 - <md-button ng-repeat="action in vm.widgetActions(widget)"  
64 - aria-label="{{ action.name | translate }}"  
65 - ng-show="!vm.isEdit && action.show"  
66 - ng-click="action.onAction($event)"  
67 - class="md-icon-button">  
68 - <md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">  
69 - {{ action.name | translate }}  
70 - </md-tooltip>  
71 - <ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>  
72 - </md-button>  
73 - <md-button id="expand-button"  
74 - ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)"  
75 - aria-label="{{ 'fullscreen.fullscreen' | translate }}"  
76 - class="md-icon-button"></md-button>  
77 - <md-button ng-show="vm.isEditActionEnabled && !vm.isWidgetExpanded"  
78 - ng-disabled="vm.loading()"  
79 - class="md-icon-button"  
80 - ng-click="vm.editWidget($event, widget)"  
81 - aria-label="{{ 'widget.edit' | translate }}">  
82 - <md-tooltip md-direction="top">  
83 - {{ 'widget.edit' | translate }}  
84 - </md-tooltip>  
85 - <ng-md-icon size="20" icon="edit"></ng-md-icon>  
86 - </md-button>  
87 - <md-button ng-show="vm.isExportActionEnabled && !vm.isWidgetExpanded"  
88 - ng-disabled="vm.loading()"  
89 - class="md-icon-button"  
90 - ng-click="vm.exportWidget($event, widget)"  
91 - aria-label="{{ 'widget.export' | translate }}">  
92 - <md-tooltip md-direction="top">  
93 - {{ 'widget.export' | translate }}  
94 - </md-tooltip>  
95 - <ng-md-icon size="20" icon="file_download"></ng-md-icon>  
96 - </md-button>  
97 - <md-button ng-show="vm.isRemoveActionEnabled && !vm.isWidgetExpanded"  
98 - ng-disabled="vm.loading()"  
99 - class="md-icon-button"  
100 - ng-click="vm.removeWidget($event, widget)"  
101 - aria-label="{{ 'widget.remove' | translate }}">  
102 - <md-tooltip md-direction="top">  
103 - {{ 'widget.remove' | translate }}  
104 - </md-tooltip>  
105 - <ng-md-icon size="20" icon="close"></ng-md-icon>  
106 - </md-button> 47 + <div class="tb-widget-header">
  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>
  50 + <span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead">{{vm.widgetTitle(widget)}}</span>
  51 + <tb-timewindow aggregation="{{vm.hasAggregation(widget)}}" ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
  52 + </div>
  53 + <div class="tb-widget-actions" layout="row" layout-align="start center" ng-show="vm.showWidgetActions(widget)" tb-mousedown="$event.stopPropagation()">
  54 + <md-button ng-repeat="action in vm.customWidgetHeaderActions(widget)"
  55 + aria-label="{{action.displayName}}"
  56 + ng-show="!vm.isEdit"
  57 + ng-click="action.onAction($event)"
  58 + class="md-icon-button">
  59 + <md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
  60 + {{action.displayName}}
  61 + </md-tooltip>
  62 + <ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>
  63 + </md-button>
  64 + <md-button ng-repeat="action in vm.widgetActions(widget)"
  65 + aria-label="{{ action.name | translate }}"
  66 + ng-show="!vm.isEdit && action.show"
  67 + ng-click="action.onAction($event)"
  68 + class="md-icon-button">
  69 + <md-tooltip md-direction="{{vm.isWidgetExpanded ? 'bottom' : 'top'}}">
  70 + {{ action.name | translate }}
  71 + </md-tooltip>
  72 + <ng-md-icon size="20" icon="{{action.icon}}"></ng-md-icon>
  73 + </md-button>
  74 + <md-button id="expand-button"
  75 + ng-show="!vm.isEdit && vm.enableWidgetFullscreen(widget)"
  76 + aria-label="{{ 'fullscreen.fullscreen' | translate }}"
  77 + class="md-icon-button"></md-button>
  78 + <md-button ng-show="vm.isEditActionEnabled && !vm.isWidgetExpanded"
  79 + ng-disabled="vm.loading()"
  80 + class="md-icon-button"
  81 + ng-click="vm.editWidget($event, widget)"
  82 + aria-label="{{ 'widget.edit' | translate }}">
  83 + <md-tooltip md-direction="top">
  84 + {{ 'widget.edit' | translate }}
  85 + </md-tooltip>
  86 + <ng-md-icon size="20" icon="edit"></ng-md-icon>
  87 + </md-button>
  88 + <md-button ng-show="vm.isExportActionEnabled && !vm.isWidgetExpanded"
  89 + ng-disabled="vm.loading()"
  90 + class="md-icon-button"
  91 + ng-click="vm.exportWidget($event, widget)"
  92 + aria-label="{{ 'widget.export' | translate }}">
  93 + <md-tooltip md-direction="top">
  94 + {{ 'widget.export' | translate }}
  95 + </md-tooltip>
  96 + <ng-md-icon size="20" icon="file_download"></ng-md-icon>
  97 + </md-button>
  98 + <md-button ng-show="vm.isRemoveActionEnabled && !vm.isWidgetExpanded"
  99 + ng-disabled="vm.loading()"
  100 + class="md-icon-button"
  101 + ng-click="vm.removeWidget($event, widget)"
  102 + aria-label="{{ 'widget.remove' | translate }}">
  103 + <md-tooltip md-direction="top">
  104 + {{ 'widget.remove' | translate }}
  105 + </md-tooltip>
  106 + <ng-md-icon size="20" icon="close"></ng-md-icon>
  107 + </md-button>
  108 + </div>
107 </div> 109 </div>
108 <div flex layout="column" class="tb-widget-content"> 110 <div flex layout="column" class="tb-widget-content">
109 <div flex tb-widget 111 <div flex tb-widget
@@ -143,4 +145,4 @@ @@ -143,4 +145,4 @@
143 </md-button> 145 </md-button>
144 </md-menu-item> 146 </md-menu-item>
145 </md-menu-content> 147 </md-menu-content>
146 -</md-menu>  
  148 +</md-menu>