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

UI: Layout improvements/fixes

Browse Source
This commit is contained in:
Igor Kulikov 2017-03-09 14:57:16 +02:00
parent 9668b8a231
commit 696cb33156
8 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/package.json
View File

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

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

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

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

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

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

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

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

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

5
ui/src/app/dashboard/aliases-device-select.scss
View File

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

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

@ -49,7 +49,7 @@
</md-button> </md-button>
<tb-user-menu ng-show="forceFullscreen" display-user-info="true"> <tb-user-menu ng-show="forceFullscreen" display-user-info="true">
</tb-user-menu> </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-timewindow>
<tb-aliases-device-select ng-show="!vm.isEdit" <tb-aliases-device-select ng-show="!vm.isEdit"
tooltip-direction="bottom" tooltip-direction="bottom"

2
ui/src/app/layout/home.tpl.html
View File

@ -41,7 +41,7 @@
<div flex layout="column" tabIndex="-1" role="main"> <div flex layout="column" tabIndex="-1" role="main">
<md-toolbar class="md-whiteframe-z1 tb-primary-toolbar" ng-class="{'md-hue-1': vm.displaySearchMode()}"> <md-toolbar class="md-whiteframe-z1 tb-primary-toolbar" ng-class="{'md-hue-1': vm.displaySearchMode()}">
<div layout="row" flex class="md-toolbar-tools"> <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()}"> 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-icon aria-label="{{ 'home.menu' | translate }}" class="material-icons">menu</md-icon>
</md-button> </md-button>