简柏林 / 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 24
25 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 36 padding-top: 5px;
31 37 padding-left: 5px;
32 38 overflow: hidden;
  39 + text-overflow: ellipsis;
33 40
34 41 tb-timewindow {
35 42 font-size: 14px;
... ... @@ -38,9 +45,6 @@ div.tb-widget {
38 45 }
39 46
40 47 .tb-widget-actions {
41   - position: absolute;
42   - top: 8px;
43   - right: 8px;
44 48 z-index: 19;
45 49 margin: 0;
46 50
... ...
... ... @@ -44,66 +44,68 @@
44 44 ng-click="vm.widgetClicked($event, widget)"
45 45 tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
46 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 109 </div>
108 110 <div flex layout="column" class="tb-widget-content">
109 111 <div flex tb-widget
... ... @@ -143,4 +145,4 @@
143 145 </md-button>
144 146 </md-menu-item>
145 147 </md-menu-content>
146   -</md-menu>
\ No newline at end of file
  148 +</md-menu>
... ...