Dashboard toolbar improvements.

ui/src/app/alarm/alarm-details-dialog.tpl.html

@@ -74,8 +74,8 @@
                     <input ng-model="vm.alarmStatus" readonly>
                 </md-input-container>
             </div>
-            <div ng-if="vm.displayDetails" class="md-caption" style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>alarm.details</div>
+            <div ng-show="vm.displayDetails" class="md-caption" style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>alarm.details</div>
-            <div ng-if="vm.displayDetails" flex class="tb-alarm-details-panel" layout="column">
+            <div ng-show="vm.displayDetails" flex class="tb-alarm-details-panel" layout="column">
                 <div flex id="tb-alarm-details" readonly
                      ui-ace="vm.alarmDetailsOptions"
                      ng-model="vm.alarmDetails">

ui/src/app/components/dashboard-select-panel.controller.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright © 2016-2017 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*@ngInject*/
+export default function DashboardSelectPanelController(mdPanelRef, $scope, $filter, dashboards, dashboardId, onDashboardSelected) {
+
+    var vm = this;
+    vm._mdPanelRef = mdPanelRef;
+    vm.dashboards = dashboards;
+    vm.dashboardId = dashboardId;
+
+    vm.dashboardSelected = dashboardSelected;
+
+    function dashboardSelected(dashboardId) {
+        if (onDashboardSelected) {
+            onDashboardSelected(dashboardId);
+        }
+    }
+}

ui/src/app/components/dashboard-select-panel.tpl.html

@@ -0,0 +1,31 @@
+<!--
+
+    Copyright © 2016-2017 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<md-content flex layout="column">
+    <section flex layout="column">
+        <md-content flex class="md-padding" layout="column">
+            <md-input-container flex>
+                <label>{{ 'dashboard.select-dashboard' | translate }}</label>
+                <md-select ng-model="vm.dashboardId" ng-change="vm.dashboardSelected(vm.dashboardId)">
+                    <md-option ng-repeat="dashboard in vm.dashboards" ng-value="dashboard.id.id">
+                        {{dashboard.title}}
+                    </md-option>
+                </md-select>
+            </md-input-container>
+        </md-content>
+    </section>
+</md-content>

ui/src/app/components/dashboard-select.directive.js

@@ -21,16 +21,20 @@ import thingsboardApiUser from '../api/user.service';
 /* eslint-disable import/no-unresolved, import/default */
 
 import dashboardSelectTemplate from './dashboard-select.tpl.html';
+import dashboardSelectPanelTemplate from './dashboard-select-panel.tpl.html';
 
 /* eslint-enable import/no-unresolved, import/default */
 
+import DashboardSelectPanelController from './dashboard-select-panel.controller';
+
 
 export default angular.module('thingsboard.directives.dashboardSelect', [thingsboardApiDashboard, thingsboardApiUser])
     .directive('tbDashboardSelect', DashboardSelect)
+    .controller('DashboardSelectPanelController', DashboardSelectPanelController)
     .name;
 
 /*@ngInject*/
-function DashboardSelect($compile, $templateCache, $q, types, dashboardService, userService) {
+function DashboardSelect($compile, $templateCache, $q, $mdMedia, $mdPanel, $document, types, dashboardService, userService) {
 
     var linker = function (scope, element, attrs, ngModelCtrl) {
         var template = $templateCache.get(dashboardSelectTemplate);
@@ -74,6 +78,59 @@ function DashboardSelect($compile, $templateCache, $q, types, dashboardService,
             scope.updateView();
         });
 
+        scope.openDashboardSelectPanel = function (event) {
+            if (scope.disabled) {
+                return;
+            }
+            var position;
+            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
+            var leftX = offset.left - $(window).scrollLeft(); //eslint-disable-line
+            var yPosition;
+            var xPosition;
+            if (bottomY + panelHeight > $( window ).height()) { //eslint-disable-line
+                yPosition = $mdPanel.yPosition.ABOVE;
+            } else {
+                yPosition = $mdPanel.yPosition.BELOW;
+            }
+            if (leftX + panelWidth > $( window ).width()) { //eslint-disable-line
+                xPosition = $mdPanel.xPosition.CENTER;
+            } else {
+                xPosition = $mdPanel.xPosition.ALIGN_START;
+            }
+            position = $mdPanel.newPanelPosition()
+                .relativeTo(element)
+                .addPanelPosition(xPosition, yPosition);
+            var config = {
+                attachTo: angular.element($document[0].body),
+                controller: 'DashboardSelectPanelController',
+                controllerAs: 'vm',
+                templateUrl: dashboardSelectPanelTemplate,
+                panelClass: 'tb-dashboard-select-panel',
+                position: position,
+                fullscreen: false,
+                locals: {
+                    dashboards: scope.dashboards,
+                    dashboardId: scope.dashboardId,
+                    onDashboardSelected: (dashboardId) => {
+                        if (scope.panelRef) {
+                            scope.panelRef.close();
+                        }
+                        scope.dashboardId = dashboardId;
+                    }
+                },
+                openFrom: event,
+                clickOutsideToClose: true,
+                escapeToClose: true,
+                focusOnOpen: false
+            };
+            $mdPanel.open(config).then(function(result) {
+                scope.panelRef = result;
+            });
+        }
+
         $compile(element.contents())(scope);
     }
 

ui/src/app/components/dashboard-select.scss

@@ -14,8 +14,48 @@
  * limitations under the License.
  */
 
+@import '../../scss/constants';
+
 tb-dashboard-select {
+  min-width: 52px;
   md-select {
     pointer-events: all;
+    max-width: 300px;
+  }
+}
+
+.tb-dashboard-select {
+  min-height: 32px;
+  span {
+    pointer-events: all;
+    cursor: pointer;
+  }
+}
+
+.md-panel {
+  &.tb-dashboard-select-panel {
+    position: absolute;
+  }
+}
+
+.tb-dashboard-select-panel {
+  max-height: 150px;
+  @media (min-height: 350px) {
+    max-height: 250px;
+  }
+  max-width: 320px;
+  @media (min-width: $layout-breakpoint-xs) {
+    max-width: 100%;
+  }
+  min-width: 300px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
+  0 13px 19px 2px rgba(0, 0, 0, 0.14),
+  0 5px 24px 4px rgba(0, 0, 0, 0.12);
+  overflow-x: hidden;
+  overflow-y: auto;
+  md-content {
+    background-color: #fff;
   }
 }

ui/src/app/components/dashboard-select.tpl.html

@@ -16,7 +16,8 @@
 
 -->
 
-<md-select ng-required="tbRequired"
+<md-select hide-xs hide-sm hide-md
+           ng-required="tbRequired"
            ng-disabled="disabled"
            ng-model="dashboardId"
            aria-label="{{ 'dashboard.dashboard' | translate }}">
@@ -24,3 +25,11 @@
         {{dashboard.title}}
     </md-option>
 </md-select>
+<section hide-gt-md class="tb-dashboard-select">
+    <md-button class="md-icon-button" aria-label="{{ 'dashboard.select-dashboard' | translate }}" ng-click="openDashboardSelectPanel($event)">
+        <md-tooltip md-direction="{{tooltipDirection}}">
+            {{ 'dashboard.select-dashboard' | translate }}
+        </md-tooltip>
+        <md-icon aria-label="{{ 'dashboard.select-dashboard' | translate }}" class="material-icons">dashboards</md-icon>
+    </md-button>
+</section>

ui/src/app/components/datasource-entity.scss

@@ -31,12 +31,12 @@
 }
 
 tb-datasource-entity {
-  @media (min-width: $layout-breakpoint-gt-sm) {
+  @media (min-width: $layout-breakpoint-sm) {
     padding-left: 4px;
     padding-right: 4px;
   }
   tb-entity-alias-select {
-    @media (min-width: $layout-breakpoint-gt-sm) {
+    @media (min-width: $layout-breakpoint-sm) {
       width: 200px;
       max-width: 200px;
     }

ui/src/app/components/datasource-func.scss

@@ -16,7 +16,7 @@
 @import '../../scss/constants';
 
 .tb-datasource-func {
-  @media (min-width: $layout-breakpoint-gt-sm) {
+  @media (min-width: $layout-breakpoint-sm) {
     padding-left: 8px;
   }
 

ui/src/app/components/details-sidenav.scss

@@ -45,10 +45,10 @@ md-sidenav.tb-sidenav-details {
   width: 100% !important;
   max-width: 100% !important;
   z-index: 59 !important;
-  @media (min-width: $layout-breakpoint-gt-sm) {
+  @media (min-width: $layout-breakpoint-sm) {
     width: 80% !important;
   }
-  @media (min-width: $layout-breakpoint-gt-md) {
+  @media (min-width: $layout-breakpoint-md) {
     width: 65% !important;
   }
   @media (min-width: $layout-breakpoint-lg) {

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

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

ui/src/app/components/timewindow.scss

@@ -59,8 +59,16 @@
 }
 
 tb-timewindow {
-  span {
+  min-width: 52px;
-    pointer-events: all;
+  section.tb-timewindow {
-    cursor: pointer;
+    min-height: 32px;
+    padding: 0 6px;
+    span {
+      pointer-events: all;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section layout='row' layout-align="start center" ng-style="{minHeight: '32px', padding: '0 6px'}">
+<section class="tb-timewindow" layout='row' layout-align="start center">
     <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}}">
             {{ 'timewindow.edit' | translate }}

ui/src/app/components/widget/widget-config.tpl.html

@@ -65,7 +65,7 @@
                     <v-pane-header>
                         <div layout="column">
                             <div>{{ 'widget-config.datasources' | translate }}</div>
-                            <div class="md-caption" style="color: rgba(0,0,0,0.57);" ng-if="typeParameters.maxDatasources != -1"
+                            <div class="md-caption" style="color: rgba(0,0,0,0.57);" ng-if="typeParameters.maxDatasources > -1"
                                  translate="widget-config.maximum-datasources"
                                  translate-values="{count: typeParameters.maxDatasources}"
                                  translate-interpolation="messageformat"

ui/src/app/dashboard/dashboard-toolbar.scss

@@ -17,6 +17,12 @@
 @import "~compass-sass-mixins/lib/compass";
 @import '../../scss/constants';
 
+$toolbar-height: 50px;
+$fullscreen-toolbar-height: 64px;
+$mobile-toolbar-height: 80px;
+$half-mobile-toolbar-height: 40px;
+$mobile-toolbar-height-total: 84px;
+
 tb-dashboard-toolbar {
   md-fab-toolbar {
     &.md-is-open {
@@ -68,35 +74,69 @@ tb-dashboard-toolbar {
         }
       }
       .md-fab-toolbar-wrapper {
-        height: 64px;
+        height: $mobile-toolbar-height-total;
+        @media (min-width: $layout-breakpoint-sm) {
+          height: $fullscreen-toolbar-height;
+        }
         md-toolbar {
-          min-height: 64px;
+          min-height: $mobile-toolbar-height;
-          height: 64px;
+          height: $mobile-toolbar-height;
+          @media (min-width: $layout-breakpoint-sm) {
+            min-height: $fullscreen-toolbar-height;
+            height: $fullscreen-toolbar-height;
+          }
         }
       }
     }
     .md-fab-toolbar-wrapper {
-      height: 50px;
+      height: $mobile-toolbar-height-total;
+      @media (min-width: $layout-breakpoint-sm) {
+        height: $toolbar-height;
+      }
       md-toolbar {
-        min-height: 50px;
+        min-height: $mobile-toolbar-height;
-        height: 50px;
+        height: $mobile-toolbar-height;
+        @media (min-width: $layout-breakpoint-sm) {
+          min-height: $toolbar-height;
+          height: $toolbar-height;
+        }
         md-fab-actions {
           font-size: 16px;
           margin-top: 0px;
+          @media (max-width: $layout-breakpoint-sm) {
+            height: $mobile-toolbar-height;
+            max-height: $mobile-toolbar-height;
+          }
           .close-action {
             margin-right: -18px;
           }
           .md-fab-action-item {
             width: 100%;
-            height: 46px;
+            height: $mobile-toolbar-height;
-            .tb-dashboard-action-panels {
+            @media (min-width: $layout-breakpoint-sm) {
               height: 46px;
-              flex-direction: row-reverse;
+            }
-              .tb-dashboard-action-panel {
+            .tb-dashboard-action-panels {
+              height: $mobile-toolbar-height;
+              @media (min-width: $layout-breakpoint-sm) {
                 height: 46px;
+              }
+              flex-direction: column-reverse;
+              @media (min-width: $layout-breakpoint-sm) {
+                flex-direction: row-reverse;
+              }
+              .tb-dashboard-action-panel {
+                min-width: 0px;
+                height: $half-mobile-toolbar-height;
+                @media (min-width: $layout-breakpoint-sm) {
+                  height: 46px;
+                }
                 flex-direction: row-reverse;
                 div {
-                  height: 46px;
+                  height: $half-mobile-toolbar-height;
+                  @media (min-width: $layout-breakpoint-sm) {
+                    height: 46px;
+                  }
                 }
                 md-select {
                   pointer-events: all;
@@ -104,6 +144,14 @@ tb-dashboard-toolbar {
                 tb-states-component {
                   pointer-events: all;
                 }
+                button.md-icon-button {
+                  min-width: 40px;
+                  @media (max-width: $layout-breakpoint-sm) {
+                    min-width: 28px;
+                    margin: 0px;
+                    padding: 2px;
+                  }
+                }
               }
             }
           }

ui/src/app/dashboard/dashboard.scss

@@ -17,6 +17,10 @@
 @import "~compass-sass-mixins/lib/compass";
 @import '../../scss/constants';
 
+$toolbar-height: 50px;
+$fullscreen-toolbar-height: 64px;
+$mobile-toolbar-height: 84px;
+
 section.tb-dashboard-title {
   position: absolute;
   top: 0;
@@ -44,10 +48,10 @@ div.tb-shrinked {
 
 tb-details-sidenav.tb-widget-details-sidenav {
   md-sidenav.tb-sidenav-details {
-    @media (min-width: $layout-breakpoint-gt-sm) {
+    @media (min-width: $layout-breakpoint-sm) {
       width: 85% !important;
     }
-    @media (min-width: $layout-breakpoint-gt-md) {
+    @media (min-width: $layout-breakpoint-md) {
       width: 75% !important;
     }
     @media (min-width: $layout-breakpoint-lg) {
@@ -64,7 +68,7 @@ section.tb-dashboard-toolbar {
   position: absolute;
   top: 0px;
   left: 0px;
-  z-index: 3;
+  z-index: 13;
   pointer-events: none;
   &.tb-dashboard-toolbar-opened {
     right: 0px;
@@ -79,10 +83,16 @@ section.tb-dashboard-toolbar {
 .tb-dashboard-container {
    &.tb-dashboard-toolbar-opened {
      &.is-fullscreen {
-       margin-top: 64px;
+       margin-top: $mobile-toolbar-height;
+       @media (min-width: $layout-breakpoint-sm) {
+         margin-top: $fullscreen-toolbar-height;
+       }
      }
      &:not(.is-fullscreen) {
-       margin-top: 50px;
+       margin-top: $mobile-toolbar-height;
+       @media (min-width: $layout-breakpoint-sm) {
+         margin-top: $toolbar-height;
+       }
        @include transition(margin-top .3s cubic-bezier(.55,0,.55,.2));
      }
    }

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

@@ -21,14 +21,16 @@
              ng-class="{ 'tb-dashboard-toolbar-opened': vm.toolbarOpened, 'tb-dashboard-toolbar-closed': !vm.toolbarOpened }">
         <tb-dashboard-toolbar ng-show="!vm.widgetEditMode" force-fullscreen="forceFullscreen"
                               toolbar-opened="vm.toolbarOpened" on-trigger-click="vm.openToolbar()">
-            <div class="tb-dashboard-action-panels" flex layout="row" layout-align="start center">
+            <div class="tb-dashboard-action-panels" layout-gt-sm="row" layout-align-gt-sm="space-between center" layout="column" layout-align="center stretch">
-                <div class="tb-dashboard-action-panel" flex="50" layout="row" layout-align="start center">
+                <div class="tb-dashboard-action-panel" flex-md="30" layout="row" layout-align-gt-sm="start center" layout-align="space-between center">
                     <md-button ng-show="vm.showCloseToolbar()" aria-label="close-toolbar" class="md-icon-button close-action" ng-click="vm.closeToolbar()">
                         <md-tooltip md-direction="bottom">
                             {{ 'dashboard.close-toolbar' | translate }}
                         </md-tooltip>
                         <md-icon aria-label="close-toolbar" class="material-icons">arrow_forward</md-icon>
                     </md-button>
+                    <tb-user-menu ng-if="!vm.isPublicUser() && forceFullscreen" hide-xs hide-sm display-user-info="true">
+                    </tb-user-menu>
                     <md-button ng-show="vm.showRightLayoutSwitch()" aria-label="switch-layouts" class="md-icon-button" ng-click="vm.toggleLayouts()">
                         <ng-md-icon icon="{{vm.isRightLayoutOpened ? 'arrow_back' : 'menu'}}" options='{"easing": "circ-in-out", "duration": 375, "rotation": "none"}'></ng-md-icon>
                         <md-tooltip md-direction="bottom">
@@ -39,8 +41,6 @@
                                aria-label="{{ 'fullscreen.fullscreen' | translate }}"
                                class="md-icon-button">
                     </md-button>
-                    <tb-user-menu ng-if="!vm.isPublicUser() && forceFullscreen" display-user-info="true">
-                    </tb-user-menu>
                     <md-button ng-show="vm.isEdit || vm.displayExport()"
                                aria-label="{{ 'action.export' | translate }}" class="md-icon-button"
                                ng-click="vm.exportDashboard($event)">
@@ -79,8 +79,10 @@
                                            customer-id="vm.currentCustomerId">
                     </tb-dashboard-select>
                 </div>
-                <div class="tb-dashboard-action-panel" flex="50" layout="row" layout-align="end center">
+                <div class="tb-dashboard-action-panel" flex-md="70" layout="row" layout-align-gt-sm="end center" layout-align="space-between center">
-                    <div layout="row" layout-align="start center" ng-show="vm.isEdit">
+                    <tb-user-menu ng-if="!vm.isPublicUser() && forceFullscreen" hide-gt-sm display-user-info="true">
+                    </tb-user-menu>
+                    <div flex-xs flex-sm layout="row" layout-align-gt-sm="start center" layout-align="space-between center" ng-show="vm.isEdit">
                         <md-button aria-label="{{ 'dashboard.manage-states' | translate }}" class="md-icon-button"
                                    ng-click="vm.manageDashboardStates($event)">
                             <md-tooltip md-direction="bottom">
@@ -96,14 +98,12 @@
                             <md-icon aria-label="{{ 'layout.manage' | translate }}" class="material-icons">view_compact</md-icon>
                         </md-button>
                     </div>
-                    <div layout="row" layout-align="start center">
+                    <tb-states-component flex-xs flex-sm ng-if="vm.isEdit" states-controller-id="'default'"
-                        <tb-states-component ng-if="vm.isEdit" states-controller-id="'default'"
+                                         dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
-                                             dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
+                    </tb-states-component>
-                        </tb-states-component>
+                    <tb-states-component flex-xs flex-sm ng-if="!vm.isEdit" states-controller-id="vm.dashboardConfiguration.settings.stateControllerId"
-                        <tb-states-component ng-if="!vm.isEdit" states-controller-id="vm.dashboardConfiguration.settings.stateControllerId"
+                                         dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
-                                             dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
+                    </tb-states-component>
-                        </tb-states-component>
-                    </div>
                  </div>
             </div>
         </tb-dashboard-toolbar>
@@ -146,7 +146,7 @@
                         ng-style="{minWidth: vm.rightLayoutWidth(),
                                    maxWidth: vm.rightLayoutWidth(),
                                    height: vm.rightLayoutHeight(),
-                                   zIndex: 1}"
+                                   zIndex: 12}"
                         md-component-id="right-dashboard-layout"
                         aria-label="Right dashboard layout"
                         md-is-open="vm.rightLayoutOpened"

ui/src/app/dashboard/states/default-state-controller.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import './default-state-controller.scss';
+
 /*@ngInject*/
 export default function DefaultStateController($scope, $timeout, $location, $state,
                                                $stateParams, utils, types, dashboardUtils, preservedState) {

ui/src/app/dashboard/states/default-state-controller.scss

@@ -0,0 +1,19 @@
+/**
+ * Copyright © 2016-2017 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+md-select.default-state-controller {
+  margin: 0px;
+}

ui/src/app/dashboard/states/default-state-controller.tpl.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<md-select ng-show="vm.displayStateSelection()" aria-label="{{ 'dashboard.state' | translate }}" ng-model="vm.stateObject[0].id">
+<md-select class="default-state-controller" ng-show="vm.displayStateSelection()" aria-label="{{ 'dashboard.state' | translate }}" ng-model="vm.stateObject[0].id">
     <md-option ng-repeat="(stateId, state) in vm.states" ng-value="stateId">
         {{vm.getStateName(stateId, state)}}
     </md-option>

ui/src/app/dashboard/states/entity-state-controller.scss

@@ -14,19 +14,33 @@
  * limitations under the License.
  */
 
+@import '../../../scss/constants';
+
+tb-states-component {
+    min-width: 0px;
+}
+
 .entity-state-controller {
     .state-divider {
-        font-size: 28px;
+        font-size: 18px;
         padding-left: 15px;
         padding-right: 15px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: none;
     }
     .state-entry {
-        font-size: 22px;
+        font-size: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         outline: none;
     }
     md-select {
+        margin: 0px;
         .md-text {
-            font-size: 22px;
+            font-size: 18px;
             font-weight: bold;
         }
     }

ui/src/app/dashboard/states/entity-state-controller.tpl.html

@@ -15,15 +15,13 @@
     limitations under the License.
 
 -->
-<div class="entity-state-controller">
+<div class="entity-state-controller" layout="row" layout-align="start center">
     <div ng-if="!vm.dashboardCtrl.isMobile || vm.stateObject.length===1" layout="row" layout-align="start center">
-        <div layout="row" layout-align="start center" ng-repeat="state in vm.stateObject track by $index">
+        <span ng-repeat="state in vm.stateObject track by $index" class='state-entry' ng-style="{fontWeight: $last ? 'bold' : 'normal',
-            <span class='state-divider' ng-if="$index"> > </span>
+                         cursor: $last ? 'default' : 'pointer'}" ng-click="vm.navigatePrevState($index)">
-            <span class='state-entry' ng-style="{fontWeight: $last ? 'bold' : 'normal',
+            {{vm.getStateName($index)}}
-                             cursor: $last ? 'default' : 'pointer'}" ng-click="vm.navigatePrevState($index)">
+            <span class='state-divider' ng-hide="$last"> > </span>
-                {{vm.getStateName($index)}}
+        </span>
-            </span>
-        </div>
     </div>
     <md-select ng-if="vm.dashboardCtrl.isMobile && vm.stateObject.length > 1" aria-label="{{ 'dashboard.state' | translate }}" ng-model="vm.selectedStateIndex">
         <md-option ng-repeat="state in vm.stateObject track by $index" ng-value="$index">

ui/src/app/entity/alias/aliases-entity-select-button.tpl.html

@@ -16,14 +16,14 @@
 
 -->
 
-<section class="tb-aliases-entity-select" layout='row' layout-align="start center" ng-style="{minHeight: '32px', padding: '0 6px'}">
+<section class="tb-aliases-entity-select" layout='row' layout-align="start center">
     <md-button class="md-icon-button" aria-label="{{ 'entity.select-entities' | translate }}" ng-click="openEditMode($event)">
         <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'entity.select-entities' | translate }}
         </md-tooltip>
         <md-icon aria-label="{{ 'entity.select-entities' | translate }}" class="material-icons">devices_other</md-icon>
     </md-button>
-    <span hide-xs hide-sm ng-click="openEditMode($event)">
+    <span hide-xs hide-sm hide-md ng-click="openEditMode($event)">
         <md-tooltip md-direction="{{tooltipDirection}}">
             {{ 'entity.select-entities' | translate }}
         </md-tooltip>

ui/src/app/entity/alias/aliases-entity-select.scss

@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+@import '../../../scss/constants';
+
+tb-aliases-entity-select {
+  min-width: 52px;
+}
+
 .md-panel {
   &.tb-aliases-entity-select-panel {
     position: absolute;
@@ -38,9 +44,18 @@
   }
 }
 
-.tb-aliases-entity-select {
+section.tb-aliases-entity-select {
+  min-height: 32px;
+  padding: 0 6px;
+  @media (max-width: $layout-breakpoint-sm) {
+    padding: 0px;
+  }
   span {
+    max-width: 200px;
     pointer-events: all;
     cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

ui/src/app/layout/user-menu.tpl.html

@@ -16,7 +16,7 @@
 
 -->
 <section layout="row">
-    <div hide-xs hide-sm ng-show="vm.displayUserInfo" class="tb-user-info" layout="row">
+    <div hide-xs hide-sm hide-md ng-show="vm.displayUserInfo" class="tb-user-info" layout="row">
         <md-icon aria-label="{{ 'home.avatar' | translate }}" class="material-icons tb-mini-avatar">account_circle</md-icon>
         <div layout="column">
             <span class="tb-user-display-name">{{vm.userDisplayName()}}</span>

ui/src/app/user/user-fieldset.scss

@@ -21,10 +21,10 @@
     padding-bottom: 8px;
   }
   tb-dashboard-autocomplete {
-    @media (min-width: $layout-breakpoint-gt-sm) {
+    @media (min-width: $layout-breakpoint-sm) {
       padding-right: 12px;
     }
-    @media (max-width: $layout-breakpoint-gt-sm) {
+    @media (max-width: $layout-breakpoint-sm) {
       padding-bottom: 12px;
     }
   }

ui/src/scss/constants.scss

@@ -37,9 +37,3 @@ $layout-breakpoint-sm: 960px !default;
 $layout-breakpoint-md: 1280px !default;
 $layout-breakpoint-xmd: 1600px !default;
 $layout-breakpoint-lg: 1920px !default;
-
-$layout-breakpoint-gt-xs: 601px !default;
-$layout-breakpoint-gt-sm: 961px !default;
-$layout-breakpoint-gt-md: 1281px !default;
-$layout-breakpoint-gt-xmd: 1601px !default;
-$layout-breakpoint-gt-lg: 1921px !default;

ui/src/scss/main.scss

@@ -549,7 +549,7 @@ section.tb-footer-buttons {
   position: fixed;
   right: 20px;
   bottom: 20px;
-  z-index: 2;
+  z-index: 13;
   pointer-events: none;
 }