简柏林 / thingskit · Commits

Commit 2ca4b78cf9db67888bdcfd3ecb25286c4248ef67

Authored by Vladyslav_Prykhodko
1 parent 56bb0f60

Improvement view on mobile device

Inline Side-by-side
Showing 24 changed files with 102 additions and 106 deletions
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<mat-toolbar fxLayout="row" color="primary"> 18 +<mat-toolbar color="primary">
19 <h2 translate>audit-log.audit-log-details</h2> 19 <h2 translate>audit-log.audit-log-details</h2>
20 <span fxFlex></span> 20 <span fxFlex></span>
21 <button mat-button mat-icon-button 21 <button mat-button mat-icon-button
@@ -33,10 +33,8 @@ @@ -33,10 +33,8 @@
33 <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details"> 33 <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
34 </div> 34 </div>
35 </div> 35 </div>
36 -<div mat-dialog-actions fxLayout="row">  
37 - <span fxFlex></span> 36 +<div mat-dialog-actions fxLayoutAlign="end center">
38 <button mat-button color="primary" 37 <button mat-button color="primary"
39 - style="margin-right: 20px;"  
40 type="button" 38 type="button"
41 [disabled]="(isLoading$ | async)" 39 [disabled]="(isLoading$ | async)"
42 [mat-dialog-close]="false" cdkFocusInitial> 40 [mat-dialog-close]="false" cdkFocusInitial>
@@ -33,7 +33,7 @@ @@ -33,7 +33,7 @@
33 </mat-drawer> 33 </mat-drawer>
34 <mat-drawer-content> 34 <mat-drawer-content>
35 <div class="mat-padding tb-entity-table tb-absolute-fill"> 35 <div class="mat-padding tb-entity-table tb-absolute-fill">
36 - <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content"> 36 + <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
37 <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()"> 37 <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
38 <div class="mat-toolbar-tools"> 38 <div class="mat-toolbar-tools">
39 <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span> 39 <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
@@ -41,10 +41,9 @@ @@ -41,10 +41,9 @@
41 <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow" 41 <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
42 (ngModelChange)="onTimewindowChange()" 42 (ngModelChange)="onTimewindowChange()"
43 asButton historyOnly></tb-timewindow> 43 asButton historyOnly></tb-timewindow>
44 - <span fxFlex *ngIf="!entitiesTableConfig.headerComponent ||  
45 - entitiesTableConfig.useTimePageLink"></span> 44 + <span fxFlex *ngIf="!entitiesTableConfig.headerComponent || entitiesTableConfig.useTimePageLink"></span>
46 <div [fxShow]="addEnabled()"> 45 <div [fxShow]="addEnabled()">
47 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" 46 + <button mat-icon-button [disabled]="isLoading$ | async"
48 *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions" 47 *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
49 (click)="addEntity($event)" 48 (click)="addEntity($event)"
50 matTooltip="{{ translations.add | translate }}" 49 matTooltip="{{ translations.add | translate }}"
@@ -52,7 +51,7 @@ @@ -52,7 +51,7 @@
52 <mat-icon>add</mat-icon> 51 <mat-icon>add</mat-icon>
53 </button> 52 </button>
54 <ng-template #addActions> 53 <ng-template #addActions>
55 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" 54 + <button mat-icon-button [disabled]="isLoading$ | async"
56 *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu" 55 *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
57 [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()" 56 [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
58 (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)" 57 (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@@ -61,7 +60,7 @@ @@ -61,7 +60,7 @@
61 <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon> 60 <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
62 </button> 61 </button>
63 <ng-template #addActionsMenu> 62 <ng-template #addActionsMenu>
64 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" 63 + <button mat-icon-button [disabled]="isLoading$ | async"
65 matTooltip="{{ translations.add | translate }}" 64 matTooltip="{{ translations.add | translate }}"
66 matTooltipPosition="above" 65 matTooltipPosition="above"
67 [matMenuTriggerFor]="addActionsMenu"> 66 [matMenuTriggerFor]="addActionsMenu">
@@ -79,20 +78,20 @@ @@ -79,20 +78,20 @@
79 </ng-template> 78 </ng-template>
80 </ng-template> 79 </ng-template>
81 </div> 80 </div>
82 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" 81 + <button mat-icon-button [disabled]="isLoading$ | async"
83 [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors" 82 [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
84 matTooltip="{{ actionDescriptor.name }}" 83 matTooltip="{{ actionDescriptor.name }}"
85 matTooltipPosition="above" 84 matTooltipPosition="above"
86 (click)="actionDescriptor.onAction($event)"> 85 (click)="actionDescriptor.onAction($event)">
87 <mat-icon>{{actionDescriptor.icon}}</mat-icon> 86 <mat-icon>{{actionDescriptor.icon}}</mat-icon>
88 </button> 87 </button>
89 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()" 88 + <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
90 matTooltip="{{ 'action.refresh' | translate }}" 89 matTooltip="{{ 'action.refresh' | translate }}"
91 matTooltipPosition="above"> 90 matTooltipPosition="above">
92 <mat-icon>refresh</mat-icon> 91 <mat-icon>refresh</mat-icon>
93 </button> 92 </button>
94 <button *ngIf="entitiesTableConfig.searchEnabled" 93 <button *ngIf="entitiesTableConfig.searchEnabled"
95 - mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()" 94 + mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
96 matTooltip="{{ translations.search | translate }}" 95 matTooltip="{{ translations.search | translate }}"
97 matTooltipPosition="above"> 96 matTooltipPosition="above">
98 <mat-icon>search</mat-icon> 97 <mat-icon>search</mat-icon>
@@ -101,7 +100,7 @@ @@ -101,7 +100,7 @@
101 </mat-toolbar> 100 </mat-toolbar>
102 <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()"> 101 <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
103 <div class="mat-toolbar-tools"> 102 <div class="mat-toolbar-tools">
104 - <button mat-button mat-icon-button 103 + <button mat-icon-button
105 matTooltip="{{ translations.search | translate }}" 104 matTooltip="{{ translations.search | translate }}"
106 matTooltipPosition="above"> 105 matTooltipPosition="above">
107 <mat-icon>search</mat-icon> 106 <mat-icon>search</mat-icon>
@@ -112,7 +111,7 @@ @@ -112,7 +111,7 @@
112 [(ngModel)]="pageLink.textSearch" 111 [(ngModel)]="pageLink.textSearch"
113 placeholder="{{ translations.search | translate }}"/> 112 placeholder="{{ translations.search | translate }}"/>
114 </mat-form-field> 113 </mat-form-field>
115 - <button mat-button mat-icon-button (click)="exitFilterMode()" 114 + <button mat-icon-button (click)="exitFilterMode()"
116 matTooltip="{{ 'action.close' | translate }}" 115 matTooltip="{{ 'action.close' | translate }}"
117 matTooltipPosition="above"> 116 matTooltipPosition="above">
118 <mat-icon>close</mat-icon> 117 <mat-icon>close</mat-icon>
@@ -125,7 +124,7 @@ @@ -125,7 +124,7 @@
125 {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }} 124 {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
126 </span> 125 </span>
127 <span fxFlex></span> 126 <span fxFlex></span>
128 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" 127 + <button mat-icon-button [disabled]="isLoading$ | async"
129 [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors" 128 [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
130 matTooltip="{{ actionDescriptor.name }}" 129 matTooltip="{{ actionDescriptor.name }}"
131 matTooltipPosition="above" 130 matTooltipPosition="above"
@@ -167,7 +166,7 @@ @@ -167,7 +166,7 @@
167 <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell> 166 <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
168 <mat-cell *matCellDef="let entity; let row = index" 167 <mat-cell *matCellDef="let entity; let row = index"
169 [ngStyle]="cellStyle(entity, column, row)"> 168 [ngStyle]="cellStyle(entity, column, row)">
170 - <button mat-button mat-icon-button [disabled]="isLoading$ | async" 169 + <button mat-icon-button [disabled]="isLoading$ | async"
171 [fxShow]="column.actionDescriptor.isEnabled(entity)" 170 [fxShow]="column.actionDescriptor.isEnabled(entity)"
172 matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}" 171 matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
173 matTooltipPosition="above" 172 matTooltipPosition="above"
@@ -14,12 +14,12 @@ @@ -14,12 +14,12 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import {NgModule} from '@angular/core';  
18 -import {RouterModule, Routes} from '@angular/router'; 17 +import { NgModule } from '@angular/core';
  18 +import { RouterModule, Routes } from '@angular/router';
19 19
20 -import {EntitiesTableComponent} from '../../components/entity/entities-table.component';  
21 -import {Authority} from '@shared/models/authority.enum';  
22 -import {AssetsTableConfigResolver} from './assets-table-config.resolver'; 20 +import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
  21 +import { Authority } from '@shared/models/authority.enum';
  22 +import { AssetsTableConfigResolver } from './assets-table-config.resolver';
23 23
24 const routes: Routes = [ 24 const routes: Routes = [
25 { 25 {
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'makePublic')" 21 (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 [fxShow]="!hideDelete() && !isEdit"> 40 [fxShow]="!hideDelete() && !isEdit">
41 {{'asset.delete' | translate }} 41 {{'asset.delete' | translate }}
42 </button> 42 </button>
43 - <div fxLayout="row"> 43 + <div fxLayout="row" fxLayout.xs="column">
44 <button mat-raised-button 44 <button mat-raised-button
45 ngxClipboard 45 ngxClipboard
46 (cbOnSuccess)="onAssetIdCopied($event)" 46 (cbOnSuccess)="onAssetIdCopied($event)"
@@ -14,16 +14,16 @@ @@ -14,16 +14,16 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import {Component} from '@angular/core';  
18 -import {Store} from '@ngrx/store';  
19 -import {AppState} from '@core/core.state';  
20 -import {EntityComponent} from '../../components/entity/entity.component';  
21 -import {FormBuilder, FormGroup, Validators} from '@angular/forms';  
22 -import {EntityType} from '@shared/models/entity-type.models';  
23 -import {NULL_UUID} from '@shared/models/id/has-uuid';  
24 -import {ActionNotificationShow} from '@core/notification/notification.actions';  
25 -import {TranslateService} from '@ngx-translate/core';  
26 -import {AssetInfo} from '@app/shared/models/asset.models'; 17 +import { Component } from '@angular/core';
  18 +import { Store } from '@ngrx/store';
  19 +import { AppState } from '@core/core.state';
  20 +import { EntityComponent } from '../../components/entity/entity.component';
  21 +import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  22 +import { EntityType } from '@shared/models/entity-type.models';
  23 +import { NULL_UUID } from '@shared/models/id/has-uuid';
  24 +import { ActionNotificationShow } from '@core/notification/notification.actions';
  25 +import { TranslateService } from '@ngx-translate/core';
  26 +import { AssetInfo } from '@app/shared/models/asset.models';
27 27
28 @Component({ 28 @Component({
29 selector: 'tb-asset', 29 selector: 'tb-asset',
@@ -14,14 +14,14 @@ @@ -14,14 +14,14 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import {NgModule} from '@angular/core';  
18 -import {CommonModule} from '@angular/common';  
19 -import {SharedModule} from '@shared/shared.module';  
20 -import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';  
21 -import {AssetComponent} from './asset.component';  
22 -import {AssetTableHeaderComponent} from './asset-table-header.component';  
23 -import {AssetRoutingModule} from './asset-routing.module';  
24 -import {HomeComponentsModule} from '@modules/home/components/home-components.module'; 17 +import { NgModule } from '@angular/core';
  18 +import { CommonModule } from '@angular/common';
  19 +import { SharedModule } from '@shared/shared.module';
  20 +import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
  21 +import { AssetComponent } from './asset.component';
  22 +import { AssetTableHeaderComponent } from './asset-table-header.component';
  23 +import { AssetRoutingModule } from './asset-routing.module';
  24 +import { HomeComponentsModule } from '@modules/home/components/home-components.module';
25 import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component'; 25 import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component';
26 26
27 @NgModule({ 27 @NgModule({
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'manageUsers')" 21 (click)="onEntityAction($event, 'manageUsers')"
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
46 [fxShow]="!hideDelete() && !isEdit && !isPublic"> 46 [fxShow]="!hideDelete() && !isEdit && !isPublic">
47 {{'customer.delete' | translate }} 47 {{'customer.delete' | translate }}
48 </button> 48 </button>
49 - <div fxLayout="row"> 49 + <div fxLayout="row" fxLayout.xs="column">
50 <button mat-raised-button 50 <button mat-raised-button
51 ngxClipboard 51 ngxClipboard
52 (cbOnSuccess)="onCustomerIdCopied($event)" 52 (cbOnSuccess)="onCustomerIdCopied($event)"
@@ -19,10 +19,9 @@ import { Store } from '@ngrx/store'; @@ -19,10 +19,9 @@ import { Store } from '@ngrx/store';
19 import { AppState } from '@core/core.state'; 19 import { AppState } from '@core/core.state';
20 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 20 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
21 import { Customer } from '@shared/models/customer.model'; 21 import { Customer } from '@shared/models/customer.model';
22 -import {Tenant} from '@app/shared/models/tenant.model';  
23 -import {ActionNotificationShow} from '@app/core/notification/notification.actions';  
24 -import {TranslateService} from '@ngx-translate/core';  
25 -import {ContactBasedComponent} from '../../components/entity/contact-based.component'; 22 +import { ActionNotificationShow } from '@app/core/notification/notification.actions';
  23 +import { TranslateService } from '@ngx-translate/core';
  24 +import { ContactBasedComponent } from '../../components/entity/contact-based.component';
26 25
27 @Component({ 26 @Component({
28 selector: 'tb-customer', 27 selector: 'tb-customer',
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'open')" 21 (click)="onEntityAction($event, 'open')"
@@ -14,21 +14,20 @@ @@ -14,21 +14,20 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import {Component} from '@angular/core';  
18 -import {Store} from '@ngrx/store';  
19 -import {AppState} from '@core/core.state';  
20 -import {EntityComponent} from '../../components/entity/entity.component';  
21 -import {FormBuilder, FormGroup, Validators} from '@angular/forms';  
22 -import {ActionNotificationShow} from '@core/notification/notification.actions';  
23 -import {TranslateService} from '@ngx-translate/core'; 17 +import { Component } from '@angular/core';
  18 +import { Store } from '@ngrx/store';
  19 +import { AppState } from '@core/core.state';
  20 +import { EntityComponent } from '../../components/entity/entity.component';
  21 +import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  22 +import { ActionNotificationShow } from '@core/notification/notification.actions';
  23 +import { TranslateService } from '@ngx-translate/core';
24 import { 24 import {
25 Dashboard, 25 Dashboard,
26 - isPublicDashboard,  
27 getDashboardAssignedCustomersText, 26 getDashboardAssignedCustomersText,
28 isCurrentPublicDashboardCustomer, 27 isCurrentPublicDashboardCustomer,
29 - DashboardInfo 28 + isPublicDashboard
30 } from '@shared/models/dashboard.models'; 29 } from '@shared/models/dashboard.models';
31 -import {DashboardService} from '@core/http/dashboard.service'; 30 +import { DashboardService } from '@core/http/dashboard.service';
32 31
33 @Component({ 32 @Component({
34 selector: 'tb-dashboard-form', 33 selector: 'tb-dashboard-form',
@@ -18,7 +18,6 @@ import { Component } from '@angular/core'; @@ -18,7 +18,6 @@ import { Component } from '@angular/core';
18 import { Store } from '@ngrx/store'; 18 import { Store } from '@ngrx/store';
19 import { AppState } from '@core/core.state'; 19 import { AppState } from '@core/core.state';
20 import { DeviceInfo } from '@shared/models/device.models'; 20 import { DeviceInfo } from '@shared/models/device.models';
21 -import { EntityType } from '@shared/models/entity-type.models';  
22 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component'; 21 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
23 22
24 @Component({ 23 @Component({
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'makePublic')" 21 (click)="onEntityAction($event, 'makePublic')"
@@ -40,13 +40,13 @@ @@ -40,13 +40,13 @@
40 [fxShow]="!isEdit"> 40 [fxShow]="!isEdit">
41 {{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }} 41 {{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
42 </button> 42 </button>
43 - <button mat-raised-button color="primary" 43 + <button mat-raised-button color="primary" fxFlex.xs
44 [disabled]="(isLoading$ | async)" 44 [disabled]="(isLoading$ | async)"
45 (click)="onEntityAction($event, 'delete')" 45 (click)="onEntityAction($event, 'delete')"
46 [fxShow]="!hideDelete() && !isEdit"> 46 [fxShow]="!hideDelete() && !isEdit">
47 {{'device.delete' | translate }} 47 {{'device.delete' | translate }}
48 </button> 48 </button>
49 - <div fxLayout="row"> 49 + <div fxLayout="row" fxLayout.xs="column">
50 <button mat-raised-button 50 <button mat-raised-button
51 ngxClipboard 51 ngxClipboard
52 (cbOnSuccess)="onDeviceIdCopied($event)" 52 (cbOnSuccess)="onDeviceIdCopied($event)"
@@ -14,22 +14,18 @@ @@ -14,22 +14,18 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import { Component, OnInit } from '@angular/core';  
18 -import { select, Store } from '@ngrx/store'; 17 +import { Component } from '@angular/core';
  18 +import { Store } from '@ngrx/store';
19 import { AppState } from '@core/core.state'; 19 import { AppState } from '@core/core.state';
20 import { EntityComponent } from '../../components/entity/entity.component'; 20 import { EntityComponent } from '../../components/entity/entity.component';
21 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 21 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
22 -import { User } from '@shared/models/user.model';  
23 -import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';  
24 -import { map } from 'rxjs/operators';  
25 -import { Authority } from '@shared/models/authority.enum';  
26 -import {DeviceInfo} from '@shared/models/device.models';  
27 -import {EntityType} from '@shared/models/entity-type.models';  
28 -import {NULL_UUID} from '@shared/models/id/has-uuid';  
29 -import {ActionNotificationShow} from '@core/notification/notification.actions';  
30 -import {TranslateService} from '@ngx-translate/core';  
31 -import {DeviceService} from '@core/http/device.service';  
32 -import {ClipboardService} from 'ngx-clipboard'; 22 +import { DeviceInfo } from '@shared/models/device.models';
  23 +import { EntityType } from '@shared/models/entity-type.models';
  24 +import { NULL_UUID } from '@shared/models/id/has-uuid';
  25 +import { ActionNotificationShow } from '@core/notification/notification.actions';
  26 +import { TranslateService } from '@ngx-translate/core';
  27 +import { DeviceService } from '@core/http/device.service';
  28 +import { ClipboardService } from 'ngx-clipboard';
33 29
34 @Component({ 30 @Component({
35 selector: 'tb-device', 31 selector: 'tb-device',
@@ -17,12 +17,12 @@ @@ -17,12 +17,12 @@
17 import { NgModule } from '@angular/core'; 17 import { NgModule } from '@angular/core';
18 import { CommonModule } from '@angular/common'; 18 import { CommonModule } from '@angular/common';
19 import { SharedModule } from '@shared/shared.module'; 19 import { SharedModule } from '@shared/shared.module';
20 -import {DeviceComponent} from '@modules/home/pages/device/device.component';  
21 -import {DeviceRoutingModule} from './device-routing.module';  
22 -import {DeviceTableHeaderComponent} from '@modules/home/pages/device/device-table-header.component';  
23 -import {DeviceCredentialsDialogComponent} from '@modules/home/pages/device/device-credentials-dialog.component';  
24 -import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';  
25 -import {HomeComponentsModule} from '@modules/home/components/home-components.module'; 20 +import { DeviceComponent } from '@modules/home/pages/device/device.component';
  21 +import { DeviceRoutingModule } from './device-routing.module';
  22 +import { DeviceTableHeaderComponent } from '@modules/home/pages/device/device-table-header.component';
  23 +import { DeviceCredentialsDialogComponent } from '@modules/home/pages/device/device-credentials-dialog.component';
  24 +import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
  25 +import { HomeComponentsModule } from '@modules/home/components/home-components.module';
26 import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component'; 26 import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component';
27 27
28 @NgModule({ 28 @NgModule({
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'makePublic')" 21 (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 [fxShow]="!hideDelete() && !isEdit"> 40 [fxShow]="!hideDelete() && !isEdit">
41 {{'entity-view.delete' | translate }} 41 {{'entity-view.delete' | translate }}
42 </button> 42 </button>
43 - <div fxLayout="row"> 43 + <div fxLayout="row" fxLayout.xs="column">
44 <button mat-raised-button 44 <button mat-raised-button
45 ngxClipboard 45 ngxClipboard
46 (cbOnSuccess)="onEntityViewIdCopied($event)" 46 (cbOnSuccess)="onEntityViewIdCopied($event)"
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 16
17 --> 17 -->
18 <form style="min-width: 400px;"> 18 <form style="min-width: 400px;">
19 - <mat-toolbar fxLayout="row" color="primary"> 19 + <mat-toolbar color="primary">
20 <h2 translate>user.activation-link</h2> 20 <h2 translate>user.activation-link</h2>
21 <span fxFlex></span> 21 <span fxFlex></span>
22 <button mat-button mat-icon-button 22 <button mat-button mat-icon-button
@@ -29,11 +29,11 @@ @@ -29,11 +29,11 @@
29 </mat-progress-bar> 29 </mat-progress-bar>
30 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> 30 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
31 <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent"> 31 <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
32 - <div class="mat-content mat-padding" fxLayout="column"> 32 + <div class="mat-content" fxLayout="column">
33 <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span> 33 <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
34 <div fxLayout="row" fxLayoutAlign="start center"> 34 <div fxLayout="row" fxLayoutAlign="start center">
35 <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre> 35 <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
36 - <button mat-button mat-icon-button 36 + <button mat-icon-button
37 color="primary" 37 color="primary"
38 ngxClipboard 38 ngxClipboard
39 cbContent="{{ activationLink }}" 39 cbContent="{{ activationLink }}"
@@ -45,10 +45,8 @@ @@ -45,10 +45,8 @@
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 - <div mat-dialog-actions fxLayout="row">  
49 - <span fxFlex></span> 48 + <div mat-dialog-actions fxLayoutAlign="end center">
50 <button mat-button color="primary" 49 <button mat-button color="primary"
51 - style="margin-right: 20px;"  
52 type="button" 50 type="button"
53 cdkFocusInitial 51 cdkFocusInitial
54 [disabled]="(isLoading$ | async)" 52 [disabled]="(isLoading$ | async)"
@@ -16,7 +16,6 @@ @@ -16,7 +16,6 @@
16 16
17 import { Component, Inject, OnInit } from '@angular/core'; 17 import { Component, Inject, OnInit } from '@angular/core';
18 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; 18 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
19 -import { PageComponent } from '@shared/components/page.component';  
20 import { Store } from '@ngrx/store'; 19 import { Store } from '@ngrx/store';
21 import { AppState } from '@core/core.state'; 20 import { AppState } from '@core/core.state';
22 import { TranslateService } from '@ngx-translate/core'; 21 import { TranslateService } from '@ngx-translate/core';
@@ -15,12 +15,12 @@ @@ -15,12 +15,12 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<form (ngSubmit)="add()" style="width: 600px;"> 18 +<form (ngSubmit)="add()" style="min-width: 450px;">
19 <mat-toolbar color="primary"> 19 <mat-toolbar color="primary">
20 <h2 translate>user.add</h2> 20 <h2 translate>user.add</h2>
21 <span fxFlex></span> 21 <span fxFlex></span>
22 <div [tb-help]="'user'"></div> 22 <div [tb-help]="'user'"></div>
23 - <button mat-button mat-icon-button 23 + <button mat-icon-button
24 (click)="cancel()" 24 (click)="cancel()"
25 type="button"> 25 type="button">
26 <mat-icon class="material-icons">close</mat-icon> 26 <mat-icon class="material-icons">close</mat-icon>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'disableAccount')" 21 (click)="onEntityAction($event, 'disableAccount')"
@@ -14,13 +14,13 @@ @@ -14,13 +14,13 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import { Component, OnInit } from '@angular/core'; 17 +import { Component } from '@angular/core';
18 import { select, Store } from '@ngrx/store'; 18 import { select, Store } from '@ngrx/store';
19 import { AppState } from '@core/core.state'; 19 import { AppState } from '@core/core.state';
20 import { EntityComponent } from '../../components/entity/entity.component'; 20 import { EntityComponent } from '../../components/entity/entity.component';
21 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 21 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
22 import { User } from '@shared/models/user.model'; 22 import { User } from '@shared/models/user.model';
23 -import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors'; 23 +import { selectAuth } from '@core/auth/auth.selectors';
24 import { map } from 'rxjs/operators'; 24 import { map } from 'rxjs/operators';
25 import { Authority } from '@shared/models/authority.enum'; 25 import { Authority } from '@shared/models/authority.enum';
26 import { isUndefined } from '@core/utils'; 26 import { isUndefined } from '@core/utils';
@@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component'; @@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component';
21 import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module'; 21 import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module';
22 import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component'; 22 import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component';
23 import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component'; 23 import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component';
24 -import {HomeComponentsModule} from '@modules/home/components/home-components.module'; 24 +import { HomeComponentsModule } from '@modules/home/components/home-components.module';
25 import { UserTabsComponent } from '@home/pages/user/user-tabs.component'; 25 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
26 26
27 @NgModule({ 27 @NgModule({
@@ -26,9 +26,9 @@ import { Observable } from 'rxjs'; @@ -26,9 +26,9 @@ import { Observable } from 'rxjs';
26 import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; 26 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
27 import { WidgetService } from '@core/http/widget.service'; 27 import { WidgetService } from '@core/http/widget.service';
28 import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component'; 28 import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
29 -import { map, share } from 'rxjs/operators'; 29 +import { map } from 'rxjs/operators';
30 import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models'; 30 import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
31 -import { Widget, widgetType, WidgetType } from '@app/shared/models/widget.models'; 31 +import { widgetType, WidgetType } from '@app/shared/models/widget.models';
32 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard'; 32 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
33 import { WidgetsData } from '@home/models/dashboard-component.models'; 33 import { WidgetsData } from '@home/models/dashboard-component.models';
34 import { NULL_UUID } from '@shared/models/id/has-uuid'; 34 import { NULL_UUID } from '@shared/models/id/has-uuid';
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 limitations under the License. 15 limitations under the License.
16 16
17 --> 17 -->
18 -<div class="tb-details-buttons"> 18 +<div class="tb-details-buttons" fxLayout.xs="column">
19 <button mat-raised-button color="primary" 19 <button mat-raised-button color="primary"
20 [disabled]="(isLoading$ | async)" 20 [disabled]="(isLoading$ | async)"
21 (click)="onEntityAction($event, 'open')" 21 (click)="onEntityAction($event, 'open')"
@@ -679,18 +679,18 @@ mat-label { @@ -679,18 +679,18 @@ mat-label {
679 } 679 }
680 680
681 .mat-toolbar-tools { 681 .mat-toolbar-tools {
682 - font-size: 20px; 682 + //font-size: 20px;
683 letter-spacing: .005em; 683 letter-spacing: .005em;
684 - box-sizing: border-box; 684 + //box-sizing: border-box;
685 font-weight: 400; 685 font-weight: 400;
686 display: flex; 686 display: flex;
687 align-items: center; 687 align-items: center;
688 flex-direction: row; 688 flex-direction: row;
689 width: 100%; 689 width: 100%;
690 - height: 64px;  
691 - max-height: 64px; 690 + //height: 64px;
  691 + //max-height: 64px;
692 padding: 0 16px; 692 padding: 0 16px;
693 - margin: 0; 693 + //margin: 0;
694 } 694 }
695 695
696 .mat-icon { 696 .mat-icon {
@@ -782,6 +782,11 @@ mat-label { @@ -782,6 +782,11 @@ mat-label {
782 782
783 .mat-toolbar { 783 .mat-toolbar {
784 line-height: normal; 784 line-height: normal;
  785 +
  786 + h1, h2, h3, h4, h5, h6 {
  787 + overflow: hidden;
  788 + text-overflow: ellipsis;
  789 + }
785 } 790 }
786 791
787 mat-toolbar *, mat-toolbar :after, mat-toolbar :before { 792 mat-toolbar *, mat-toolbar :after, mat-toolbar :before {
@@ -817,6 +822,9 @@ mat-label { @@ -817,6 +822,9 @@ mat-label {
817 .mat-dialog-actions { 822 .mat-dialog-actions {
818 margin-bottom: 0; 823 margin-bottom: 0;
819 padding: 8px 8px 8px 16px; 824 padding: 8px 8px 8px 16px;
  825 + button:last-of-type{
  826 + margin-right: 20px;
  827 + }
820 } 828 }
821 } 829 }
822 } 830 }
@@ -843,7 +851,7 @@ mat-label { @@ -843,7 +851,7 @@ mat-label {
843 } 851 }
844 852
845 .tb-fullscreen-dialog { 853 .tb-fullscreen-dialog {
846 - @media #{$mat-lt-md} { 854 + @media #{$mat-lt-sm} {
847 min-height: 100%; 855 min-height: 100%;
848 min-width: 100%; 856 min-width: 100%;
849 max-width: none !important; 857 max-width: none !important;
@@ -904,6 +912,7 @@ mat-label { @@ -904,6 +912,7 @@ mat-label {
904 display: flex; 912 display: flex;
905 height: calc(100% - 60px); 913 height: calc(100% - 60px);
906 text-transform: uppercase; 914 text-transform: uppercase;
  915 + text-align: center;
907 } 916 }
908 917
909 918