UI: Minor fixes

Igor Kulikov
1 parent 795a99bb
Showing 4 changed files with 23 additions and 18 deletions
ui/src/app/components/expand-fullscreen.directive.js
ui/src/app/components/timewindow.directive.js
ui/src/app/components/timewindow.tpl.html
ui/src/app/dashboard/dashboard.tpl.html
--- a/ui/src/app/components/expand-fullscreen.directive.js
View file @6c33dc9
+++ b/ui/src/app/components/expand-fullscreen.directive.js
View file @6c33dc9
@@ -106,7 +106,9 @@ function ExpandFullscreen($compile, $document) {
             buttonSize = attrs.expandButtonSize;
         }
-        var html = '<md-tooltip md-direction="{{expanded ? \'bottom\' : \'top\'}}">' +
+        var tooltipDirection = angular.isDefined(attrs.expandTooltipDirection) ? attrs.expandTooltipDirection : 'top';
+
+        var html = '<md-tooltip md-direction="{{expanded ? \'bottom\' : \'' + tooltipDirection + '\'}}">' +
             '{{(expanded ? \'fullscreen.exit\' : \'fullscreen.expand\') | translate}}' +
             '</md-tooltip>' +
             '<ng-md-icon ' + (buttonSize ? 'size="'+ buttonSize +'" ' : '') + 'icon="{{expanded ? \'fullscreen_exit\' : \'fullscreen\'}}" ' +
@@ -115,13 +117,16 @@ function ExpandFullscreen($compile, $document) {
         if (expandButton) {
             expandButton = angular.element(expandButton);
-            expandButton.attr('md-ink-ripple', 'false');
-            expandButton.append(html);
-
-            $compile(expandButton.contents())(scope);
+            if (scope.hideExpandButton()) {
+                expandButton.remove();
+            } else {
+                expandButton.attr('md-ink-ripple', 'false');
+                expandButton.append(html);
-            expandButton.on("click", scope.toggleExpand);
+                $compile(expandButton.contents())(scope);
+                expandButton.on("click", scope.toggleExpand);
+            }
         } else if (!scope.hideExpandButton()) {
             var button = angular.element('<md-button class="tb-fullscreen-button-style tb-fullscreen-button-pos md-icon-button" ' +
                 'md-ink-ripple="false" ng-click="toggleExpand($event)">' +
--- a/ui/src/app/components/timewindow.directive.js
View file @6c33dc9
+++ b/ui/src/app/components/timewindow.directive.js
View file @6c33dc9
@@ -79,7 +79,8 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
         if (scope.asButton) {
             template = $templateCache.get(timewindowButtonTemplate);
         } else {
-            scope.direction = scope.direction || 'left';
+            scope.direction = angular.isDefined(attrs.direction) ? attrs.direction : 'left';
+            scope.tooltipDirection = angular.isDefined(attrs.tooltipDirection) ? attrs.tooltipDirection : 'top';
             template = $templateCache.get(timewindowTemplate);
         }
         element.html(template);
@@ -235,7 +236,6 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
         require: "^ngModel",
         scope: {
             asButton: '=asButton',
-            direction: '=?',
             disabled:'=ngDisabled'
         },
         link: linker
--- a/ui/src/app/components/timewindow.tpl.html
View file @6c33dc9
+++ b/ui/src/app/components/timewindow.tpl.html
View file @6c33dc9
@@ -17,19 +17,19 @@
 -->
 <section layout='row' layout-align="start center" ng-style="{minHeight: '32px', padding: '0 6px'}">
     <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="top">
+        <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>
     <span ng-click="openEditMode($event)">
-        <md-tooltip md-direction="top">
+        <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'timewindow.edit' | translate }}
         </md-tooltip>
         {{model.displayValue}}
     </span>
     <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="top">
+        <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>
--- a/ui/src/app/dashboard/dashboard.tpl.html
View file @6c33dc9
+++ b/ui/src/app/dashboard/dashboard.tpl.html
View file @6c33dc9
@@ -16,8 +16,8 @@
 -->
 <md-content flex tb-expand-fullscreen="vm.widgetEditMode || vm.iframeMode" expand-button-id="dashboard-expand-button"
-            hide-expand-button="vm.widgetEditMode || vm.iframeMode"
-        ng-style="{'background-color': vm.dashboard.configuration.gridSettings.backgroundColor,
+            hide-expand-button="vm.widgetEditMode || vm.iframeMode" expand-tooltip-direction="bottom"
+            ng-style="{'background-color': vm.dashboard.configuration.gridSettings.backgroundColor,
                     'background-image': 'url('+vm.dashboard.configuration.gridSettings.backgroundImageUrl+')',
                     'background-repeat': 'no-repeat',
                     'background-attachment': 'scroll',
@@ -29,7 +29,7 @@
                         md-direction="left">
             <md-fab-trigger class="align-with-text">
                 <md-button aria-label="menu" class="md-fab md-primary" ng-click="vm.openToolbar()">
-                    <md-tooltip ng-show="!vm.toolbarOpened" md-direction="top">
+                    <md-tooltip ng-show="!vm.toolbarOpened" md-direction="bottom">
                         {{ 'dashboard.open-toolbar' | translate }}
                     </md-tooltip>
                     <md-icon aria-label="dashboard-toolbar" class="material-icons">more_horiz</md-icon>
@@ -38,7 +38,7 @@
             <md-toolbar>
                 <md-fab-actions class="md-toolbar-tools">
                     <md-button ng-show="!vm.isEdit" aria-label="close-toolbar" class="md-icon-button close-action" ng-click="vm.closeToolbar()">
-                        <md-tooltip md-direction="top">
+                        <md-tooltip md-direction="bottom">
                             {{ 'dashboard.close-toolbar' | translate }}
                         </md-tooltip>
                         <md-icon aria-label="close-toolbar" class="material-icons">arrow_forward</md-icon>
@@ -47,18 +47,18 @@
                                aria-label="{{ 'fullscreen.fullscreen' | translate }}"
                                class="md-icon-button">
                     </md-button>
-                    <tb-timewindow direction="left" aggregation ng-model="vm.dashboardConfiguration.timewindow">
+                    <tb-timewindow direction="left" tooltip-direction="bottom" aggregation ng-model="vm.dashboardConfiguration.timewindow">
                     </tb-timewindow>
                     <md-button ng-show="vm.isEdit" aria-label="{{ 'device.aliases' | translate }}" class="md-icon-button"
                                ng-click="vm.openDeviceAliases($event)">
-                        <md-tooltip md-direction="top">
+                        <md-tooltip md-direction="bottom">
                             {{ 'device.aliases' | translate }}
                         </md-tooltip>
                         <md-icon aria-label="{{ 'device.aliases' | translate }}" class="material-icons">devices_other</md-icon>
                     </md-button>
                     <md-button ng-show="vm.isEdit" aria-label="{{ 'dashboard.settings' | translate }}" class="md-icon-button"
                                ng-click="vm.openDashboardSettings($event)">
-                        <md-tooltip md-direction="top">
+                        <md-tooltip md-direction="bottom">
                             {{ 'dashboard.settings' | translate }}
                         </md-tooltip>
                         <md-icon aria-label="{{ 'dashboard.settings' | translate }}" class="material-icons">settings</md-icon>