UI: Layout improvements/fixes

ui/package.json

@@ -35,12 +35,12 @@
     "angular-sanitize": "1.5.8",
     "angular-storage": "0.0.15",
     "angular-touch": "1.5.8",
-    "angular-translate": "^2.12.1",
-    "angular-translate-handler-log": "^2.12.1",
-    "angular-translate-interpolation-messageformat": "^2.12.1",
-    "angular-translate-loader-static-files": "^2.12.1",
-    "angular-translate-storage-cookie": "^2.12.1",
-    "angular-translate-storage-local": "^2.12.1",
+    "angular-translate": "2.13.1",
+    "angular-translate-handler-log": "2.13.1",
+    "angular-translate-interpolation-messageformat": "2.13.1",
+    "angular-translate-loader-static-files": "2.13.1",
+    "angular-translate-storage-cookie": "2.13.1",
+    "angular-translate-storage-local": "2.13.1",
     "angular-ui-ace": "^0.2.3",
     "angular-ui-router": "^0.3.1",
     "angular-websocket": "^2.0.1",

ui/src/app/components/timewindow.directive.js

@@ -66,6 +66,12 @@ function Timewindow($compile, $templateCache, $filter, $mdPanel, $document, $mdM
 
         scope.aggregation = angular.isDefined(attrs.aggregation);
 
+        scope.isToolbar = angular.isDefined(attrs.isToolbar);
+
+        scope.hideLabel = function() {
+            return scope.isToolbar && !$mdMedia('gt-sm');
+        }
+
         var translationPending = false;
 
         $translate.onReady(function() {

ui/src/app/components/timewindow.tpl.html

@@ -22,7 +22,7 @@
         </md-tooltip>
         <ng-md-icon aria-label="{{ 'timewindow.date-range' | translate }}" icon="query_builder"></ng-md-icon>
     </md-button>
-    <span ng-click="openEditMode($event)">
+    <span ng-hide="hideLabel()" ng-click="openEditMode($event)">
         <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'timewindow.edit' | translate }}
         </md-tooltip>

ui/src/app/dashboard/aliases-device-select-button.tpl.html

@@ -23,7 +23,7 @@
         </md-tooltip>
         <md-icon aria-label="{{ 'dashboard.select-devices' | translate }}" class="material-icons">devices_other</md-icon>
     </md-button>
-    <span ng-click="openEditMode($event)">
+    <span hide-xs hide-sm ng-click="openEditMode($event)">
         <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'dashboard.select-devices' | translate }}
         </md-tooltip>

ui/src/app/dashboard/aliases-device-select.directive.js

@@ -27,7 +27,7 @@ import aliasesDeviceSelectPanelTemplate from './aliases-device-select-panel.tpl.
 
 /* eslint-disable angular/angularelement */
 /*@ngInject*/
-export default function AliasesDeviceSelectDirective($compile, $templateCache, types, $mdPanel, $document, $translate) {
+export default function AliasesDeviceSelectDirective($compile, $templateCache, $mdMedia, types, $mdPanel, $document, $translate) {
 
     var linker = function (scope, element, attrs, ngModelCtrl) {
 
@@ -51,7 +51,7 @@ export default function AliasesDeviceSelectDirective($compile, $templateCache, t
                 return;
             }
             var position;
-            var panelHeight = 250;
+            var panelHeight = $mdMedia('min-height: 350px') ? 250 : 150;
             var panelWidth = 300;
             var offset = element[0].getBoundingClientRect();
             var bottomY = offset.bottom - $(window).scrollTop(); //eslint-disable-line
@@ -64,7 +64,7 @@ export default function AliasesDeviceSelectDirective($compile, $templateCache, t
                 yPosition = $mdPanel.yPosition.BELOW;
             }
             if (leftX + panelWidth > $( window ).width()) { //eslint-disable-line
-                xPosition = $mdPanel.xPosition.ALIGN_END;
+                xPosition = $mdPanel.xPosition.CENTER;
             } else {
                 xPosition = $mdPanel.xPosition.ALIGN_START;
             }

ui/src/app/dashboard/aliases-device-select.scss

@@ -21,7 +21,10 @@
 }
 
 .tb-aliases-device-select-panel {
-  max-height: 250px;
+  max-height: 150px;
+  @media (min-height: 350px) {
+    max-height: 250px;
+  }
   min-width: 300px;
   background: white;
   border-radius: 4px;

ui/src/app/dashboard/dashboard.tpl.html

@@ -49,7 +49,7 @@
                     </md-button>
                     <tb-user-menu ng-show="forceFullscreen" display-user-info="true">
                     </tb-user-menu>
-                    <tb-timewindow direction="left" tooltip-direction="bottom" aggregation ng-model="vm.dashboardConfiguration.timewindow">
+                    <tb-timewindow is-toolbar direction="left" tooltip-direction="bottom" aggregation ng-model="vm.dashboardConfiguration.timewindow">
                     </tb-timewindow>
                     <tb-aliases-device-select ng-show="!vm.isEdit"
                                               tooltip-direction="bottom"

ui/src/app/layout/home.tpl.html

@@ -41,7 +41,7 @@
   <div flex layout="column" tabIndex="-1" role="main">
     <md-toolbar class="md-whiteframe-z1 tb-primary-toolbar" ng-class="{'md-hue-1': vm.displaySearchMode()}">
     	<div layout="row" flex class="md-toolbar-tools">
-		      <md-button id="main" hide-gt-sm
+		      <md-button id="main" hide-gt-sm ng-show="!forceFullscreen"
 		      		class="md-icon-button" ng-click="vm.openSidenav()" aria-label="{{ 'home.menu' | translate }}" ng-class="{'tb-invisible': vm.displaySearchMode()}">
 		      		<md-icon aria-label="{{ 'home.menu' | translate }}" class="material-icons">menu</md-icon>
 		      </md-button>