dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard toolbar improvements.

Browse Source
This commit is contained in:
Igor Kulikov 2017-10-13 19:48:02 +03:00
parent 9157adcaea
commit 9734f45ec8
27 changed files with 349 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/app/alarm/alarm-details-dialog.tpl.html
View File

@ -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-if="vm.displayDetails" flex class="tb-alarm-details-panel" layout="column">
<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-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">

32
ui/src/app/components/dashboard-select-panel.controller.js Normal file
View File

@ -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);
}
}
}

31
ui/src/app/components/dashboard-select-panel.tpl.html Normal file
View File

@ -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>

59
ui/src/app/components/dashboard-select.directive.js
View File

@ -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);
}

40
ui/src/app/components/dashboard-select.scss
View File

@ -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;
}
}

11
ui/src/app/components/dashboard-select.tpl.html
View File

@ -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>

4
ui/src/app/components/datasource-entity.scss
View File

@ -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;
}

2
ui/src/app/components/datasource-func.scss
View File

@ -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;
}

4
ui/src/app/components/details-sidenav.scss
View File

@ -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) {

2
ui/src/app/components/timewindow.directive.js
View File

@ -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;

14
ui/src/app/components/timewindow.scss
View File

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

2
ui/src/app/components/timewindow.tpl.html
View File

@ -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 }}

2
ui/src/app/components/widget/widget-config.tpl.html
View File

@ -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"

70
ui/src/app/dashboard/dashboard-toolbar.scss
View File

@ -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;
height: 64px;
min-height: $mobile-toolbar-height;
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;
height: 50px;
min-height: $mobile-toolbar-height;
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;
.tb-dashboard-action-panels {
height: $mobile-toolbar-height;
@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;
}
}
}
}
}

20
ui/src/app/dashboard/dashboard.scss
View File

@ -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));
}
}

30
ui/src/app/dashboard/dashboard.tpl.html
View File

@ -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-panel" flex="50" 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-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 layout="row" layout-align="start center" ng-show="vm.isEdit">
<div class="tb-dashboard-action-panel" flex-md="70" layout="row" layout-align-gt-sm="end center" layout-align="space-between center">
<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 ng-if="vm.isEdit" states-controller-id="'default'"
dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
</tb-states-component>
<tb-states-component ng-if="!vm.isEdit" states-controller-id="vm.dashboardConfiguration.settings.stateControllerId"
dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
</tb-states-component>
</div>
<tb-states-component flex-xs flex-sm ng-if="vm.isEdit" states-controller-id="'default'"
dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
</tb-states-component>
<tb-states-component flex-xs flex-sm ng-if="!vm.isEdit" states-controller-id="vm.dashboardConfiguration.settings.stateControllerId"
dashboard-ctrl="vm" states="vm.dashboardConfiguration.states">
</tb-states-component>
</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"

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

@ -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) {

19
ui/src/app/dashboard/states/default-state-controller.scss Normal file
View File

@ -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;
}

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

@ -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>

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

@ -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;
}
}

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

@ -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 class='state-divider' ng-if="$index"> > </span>
<span class='state-entry' ng-style="{fontWeight: $last ? 'bold' : 'normal',
cursor: $last ? 'default' : 'pointer'}" ng-click="vm.navigatePrevState($index)">
{{vm.getStateName($index)}}
</span>
</div>
<span ng-repeat="state in vm.stateObject track by $index" class='state-entry' ng-style="{fontWeight: $last ? 'bold' : 'normal',
cursor: $last ? 'default' : 'pointer'}" ng-click="vm.navigatePrevState($index)">
{{vm.getStateName($index)}}
<span class='state-divider' ng-hide="$last"> > </span>
</span>
</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">

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

@ -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>

17
ui/src/app/entity/alias/aliases-entity-select.scss
View File

@ -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;
}
}

2
ui/src/app/layout/user-menu.tpl.html
View File

@ -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>

4
ui/src/app/user/user-fieldset.scss
View File

@ -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;
}
}

6
ui/src/scss/constants.scss
View File

@ -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;

2
ui/src/scss/main.scss
View File

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