Improvement dialog and component style

This commit is contained in:
Vladyslav_Prykhodko 2020-04-03 21:14:39 +03:00
parent fca2dd6213
commit 56bb0f6071
24 changed files with 105 additions and 118 deletions

View File

@ -379,7 +379,7 @@ spring:
database-platform: "${SPRING_JPA_DATABASE_PLATFORM:org.hibernate.dialect.PostgreSQLDialect}"
datasource:
driverClassName: "${SPRING_DRIVER_CLASS_NAME:org.postgresql.Driver}"
url: "${SPRING_DATASOURCE_URL:jdbc:postgresql://localhost:5432/thingsboard}"
url: "${SPRING_DATASOURCE_URL:jdbc:postgresql://localhost:5432/thingsboard_angular}"
username: "${SPRING_DATASOURCE_USERNAME:postgres}"
password: "${SPRING_DATASOURCE_PASSWORD:postgres}"
hikari:

View File

@ -18,7 +18,7 @@
<section [formGroup]="parentForm">
<mat-form-field class="mat-block">
<mat-label translate>contact.country</mat-label>
<mat-select matInput formControlName="country">
<mat-select formControlName="country">
<mat-option *ngFor="let country of countries" [value]="country">
{{ country }}
</mat-option>

View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';

View File

@ -16,11 +16,11 @@
-->
<form (ngSubmit)="add()" style="min-width: 400px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar color="primary">
<h2 translate>{{ translations.add }}</h2>
<span fxFlex></span>
<div [tb-help]="resources.helpLinkId"></div>
<button mat-button mat-icon-button
<button mat-icon-button
(click)="cancel()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
@ -32,15 +32,13 @@
<div mat-dialog-content>
<tb-anchor #entityDetailsForm></tb-anchor>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<button mat-button mat-raised-button color="primary"
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
{{ 'action.add' | translate }}
</button>
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
cdkFocusInitial
[disabled]="(isLoading$ | async)"

View File

@ -13,5 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
:host {
:host ::ng-deep .mat-padding{
padding: 0;
}

View File

@ -14,20 +14,19 @@
/// limitations under the License.
///
import {Component, ComponentFactoryResolver, Inject, OnInit, SkipSelf, ViewChild} from '@angular/core';
import { Component, ComponentFactoryResolver, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import {PageComponent} from '@shared/components/page.component';
import {Store} from '@ngrx/store';
import {AppState} from '@core/core.state';
import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
import {EntityTypeResource, EntityTypeTranslation} from '@shared/models/entity-type.models';
import {BaseData, HasId} from '@shared/models/base-data';
import {EntityId} from '@shared/models/id/entity-id';
import {TbAnchorComponent} from '@shared/components/tb-anchor.component';
import {EntityComponent} from './entity.component';
import {EntityTableConfig} from '@home/models/entity/entities-table-config.models';
import {AddEntityDialogData} from '@home/models/entity/entity-component.models';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
import { BaseData, HasId } from '@shared/models/base-data';
import { EntityId } from '@shared/models/id/entity-id';
import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
import { EntityComponent } from './entity.component';
import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
import { AddEntityDialogData } from '@home/models/entity/entity-component.models';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';

View File

@ -16,7 +16,7 @@
-->
<form #addEntitiesToCustomerForm="ngForm" [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar color="primary">
<h2>{{ assignToCustomerTitle | translate }}</h2>
<span fxFlex></span>
<button mat-button mat-icon-button
@ -39,16 +39,14 @@
</tb-entity-list>
</fieldset>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<button mat-button mat-raised-button color="primary"
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || addEntitiesToCustomerForm.invalid
|| !addEntitiesToCustomerForm.dirty">
{{ 'action.assign' | translate }}
</button>
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial>

View File

@ -14,19 +14,18 @@
/// limitations under the License.
///
import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import {PageComponent} from '@shared/components/page.component';
import {Store} from '@ngrx/store';
import {AppState} from '@core/core.state';
import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {DeviceService} from '@core/http/device.service';
import {EntityType} from '@shared/models/entity-type.models';
import {forkJoin, Observable} from 'rxjs';
import {AssetService} from '@core/http/asset.service';
import {EntityViewService} from '@core/http/entity-view.service';
import {DashboardService} from '@core/http/dashboard.service';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { DeviceService } from '@core/http/device.service';
import { EntityType } from '@shared/models/entity-type.models';
import { forkJoin, Observable } from 'rxjs';
import { AssetService } from '@core/http/asset.service';
import { EntityViewService } from '@core/http/entity-view.service';
import { DashboardService } from '@core/http/dashboard.service';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';

View File

@ -16,7 +16,7 @@
-->
<form #assignToCustomerForm="ngForm" [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar color="primary">
<h2>{{ assignToCustomerTitle | translate }}</h2>
<span fxFlex></span>
<button mat-button mat-icon-button
@ -30,7 +30,7 @@
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content>
<fieldset [disabled]="isLoading$ | async">
<span>{{ assignToCustomerText | translate }}</span>
<div style="padding-bottom: 0.5em;">{{ assignToCustomerText | translate }}</div>
<tb-entity-autocomplete
formControlName="customerId"
required
@ -38,16 +38,14 @@
</tb-entity-autocomplete>
</fieldset>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<button mat-button mat-raised-button color="primary"
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || assignToCustomerForm.invalid
|| !assignToCustomerForm.dirty">
{{ 'action.assign' | translate }}
</button>
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial>

View File

@ -14,19 +14,18 @@
/// limitations under the License.
///
import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import {PageComponent} from '@shared/components/page.component';
import {Store} from '@ngrx/store';
import {AppState} from '@core/core.state';
import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {DeviceService} from '@core/http/device.service';
import {EntityId} from '@shared/models/id/entity-id';
import {EntityType} from '@shared/models/entity-type.models';
import {forkJoin, Observable} from 'rxjs';
import {AssetService} from '@core/http/asset.service';
import {EntityViewService} from '@core/http/entity-view.service';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { DeviceService } from '@core/http/device.service';
import { EntityId } from '@shared/models/id/entity-id';
import { EntityType } from '@shared/models/entity-type.models';
import { forkJoin, Observable } from 'rxjs';
import { AssetService } from '@core/http/asset.service';
import { EntityViewService } from '@core/http/entity-view.service';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';

View File

@ -17,8 +17,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@app/shared/shared.module';
import {AssignToCustomerDialogComponent} from '@modules/home/dialogs/assign-to-customer-dialog.component';
import {AddEntitiesToCustomerDialogComponent} from '@modules/home/dialogs/add-entities-to-customer-dialog.component';
import { AssignToCustomerDialogComponent } from '@modules/home/dialogs/assign-to-customer-dialog.component';
import { AddEntitiesToCustomerDialogComponent } from '@modules/home/dialogs/add-entities-to-customer-dialog.component';
import { HomeDialogsService } from './home-dialogs.service';
@NgModule({

View File

@ -15,8 +15,6 @@
///
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '@core/auth/auth.service';
import { MatDialog } from '@angular/material/dialog';
import { EntityType } from '@shared/models/entity-type.models';
import { Observable } from 'rxjs';
@ -38,7 +36,6 @@ export class HomeDialogsService {
return this.openImportDialogCSV(entityType, 'device.import', 'device.device-file');
case EntityType.ASSET:
return this.openImportDialogCSV(entityType, 'asset.import', 'asset.asset-file');
break;
}
}

View File

@ -146,7 +146,7 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
configureColumns(assetScope: string): Array<EntityTableColumn<AssetInfo>> {
const columns: Array<EntityTableColumn<AssetInfo>> = [
new DateEntityTableColumn<AssetInfo>('createdTime', 'asset.created-time', this.datePipe, '150px'),
new DateEntityTableColumn<AssetInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
new EntityTableColumn<AssetInfo>('name', 'asset.name', '25%'),
new EntityTableColumn<AssetInfo>('type', 'asset.asset-type', '25%'),
new EntityTableColumn<DeviceInfo>('label', 'asset.label', '25%'),

View File

@ -15,11 +15,11 @@
limitations under the License.
-->
<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()">
<mat-toolbar fxLayout="row" color="primary">
<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()" style="min-width: 350px;">
<mat-toolbar color="primary">
<h2 translate>device.device-credentials</h2>
<span fxFlex></span>
<button mat-button mat-icon-button
<button mat-icon-button
(click)="cancel()"
type="button">
<mat-icon class="material-icons">close</mat-icon>
@ -32,7 +32,7 @@
<fieldset [disabled]="(isLoading$ | async) || isReadOnly">
<mat-form-field class="mat-block">
<mat-label translate>device.credentials-type</mat-label>
<mat-select matInput formControlName="credentialsType"
<mat-select formControlName="credentialsType"
(ngModelChange)="credentialsTypeChanged()">
<mat-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
{{ credentialTypeNamesMap.get(deviceCredentialsType[credentialsType]) }}
@ -60,16 +60,14 @@
</mat-form-field>
</fieldset>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<button *ngIf="!isReadOnly" mat-button mat-raised-button color="primary"
<div mat-dialog-actions fxLayoutAlign="end center">
<button *ngIf="!isReadOnly" mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || deviceCredentialsForm.invalid
|| !deviceCredentialsForm.dirty">
{{ 'action.save' | translate }}
</button>
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
[disabled]="(isLoading$ | async)"
(click)="cancel()" cdkFocusInitial>

View File

@ -14,18 +14,14 @@
/// limitations under the License.
///
import {Component, OnInit, SkipSelf, Inject} from '@angular/core';
import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { PageComponent } from '@shared/components/page.component';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '@core/auth/auth.service';
import {DeviceService} from '@core/http/device.service';
import {DeviceCredentials, DeviceCredentialsType, credentialTypeNames} from '@shared/models/device.models';
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { DeviceService } from '@core/http/device.service';
import { credentialTypeNames, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';

View File

@ -16,7 +16,7 @@
-->
<form (ngSubmit)="add()" style="width: 600px;">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar color="primary">
<h2 translate>user.add</h2>
<span fxFlex></span>
<div [tb-help]="'user'"></div>
@ -33,22 +33,20 @@
<tb-user></tb-user>
<mat-form-field class="mat-block">
<mat-label translate>user.activation-method</mat-label>
<mat-select matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
<mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
<mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod">
{{ activationMethodTranslations.get(activationMethodEnum[activationMethod]) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<button mat-button mat-raised-button color="primary"
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-raised-button color="primary"
type="submit"
[disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
{{ 'action.add' | translate }}
</button>
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
cdkFocusInitial
[disabled]="(isLoading$ | async)"

View File

@ -0,0 +1,19 @@
/**
* Copyright © 2016-2020 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.
*/
:host ::ng-deep .mat-padding{
padding: 0;
}

View File

@ -16,7 +16,6 @@
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { NgForm } from '@angular/forms';
@ -30,7 +29,7 @@ import {
ActivationLinkDialogComponent,
ActivationLinkDialogData
} from '@modules/home/pages/user/activation-link-dialog.component';
import {TenantId} from '@app/shared/models/id/tenant-id';
import { TenantId } from '@app/shared/models/id/tenant-id';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';
@ -42,7 +41,8 @@ export interface AddUserDialogData {
@Component({
selector: 'tb-add-user-dialog',
templateUrl: './add-user-dialog.component.html'
templateUrl: './add-user-dialog.component.html',
styleUrls: ['./add-user-dialog.component.scss']
})
export class AddUserDialogComponent extends DialogComponent<AddUserDialogComponent, User> implements OnInit {

View File

@ -16,8 +16,7 @@
-->
<h2 mat-dialog-title>{{data.title}}</h2>
<div mat-dialog-content [innerHTML]="data.message">
</div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<div mat-dialog-content [innerHTML]="data.message"></div>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
</div>

View File

@ -16,9 +16,8 @@
-->
<h2 mat-dialog-title>{{data.title}}</h2>
<div mat-dialog-content [innerHTML]="data.message">
</div>
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<div mat-dialog-content [innerHTML]="data.message"></div>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
<button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
</div>

View File

@ -17,7 +17,7 @@
-->
<mat-form-field [formGroup]="subTypeFormGroup" class="mat-block">
<mat-label *ngIf="showLabel">{{ entitySubtypeTitle | translate }}</mat-label>
<mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" matInput formControlName="subType">
<mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
<mat-option *ngFor="let subType of subTypesOptions | async" [value]="subType">
{{ displaySubTypeFn(subType) }}
</mat-option>

View File

@ -14,7 +14,5 @@
* limitations under the License.
*/
:host {
mat-select.tb-entity-subtype-select {
min-width: 200px;
}
}

View File

@ -14,26 +14,18 @@
/// limitations under the License.
///
import {AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild, OnDestroy} from '@angular/core';
import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
import {Observable, of, throwError, Subscription, Subject} from 'rxjs';
import {PageLink} from '@shared/models/page/page-link';
import {Direction} from '@shared/models/page/sort-order';
import {filter, map, mergeMap, publishReplay, refCount, startWith, tap, publish} from 'rxjs/operators';
import {PageData, emptyPageData} from '@shared/models/page/page-data';
import {DashboardInfo} from '@app/shared/models/dashboard.models';
import {DashboardId} from '@app/shared/models/id/dashboard-id';
import {DashboardService} from '@core/http/dashboard.service';
import {Store} from '@ngrx/store';
import {AppState} from '@app/core/core.state';
import {getCurrentAuthUser} from '@app/core/auth/auth.selectors';
import {Authority} from '@shared/models/authority.enum';
import {TranslateService} from '@ngx-translate/core';
import {DeviceService} from '@core/http/device.service';
import {EntitySubtype, EntityType} from '@app/shared/models/entity-type.models';
import {BroadcastService} from '@app/core/services/broadcast.service';
import {AssetService} from '@core/http/asset.service';
import {EntityViewService} from '@core/http/entity-view.service';
import { AfterViewInit, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Observable, Subject, Subscription, throwError } from 'rxjs';
import { map, mergeMap, publishReplay, refCount, startWith, tap } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { TranslateService } from '@ngx-translate/core';
import { DeviceService } from '@core/http/device.service';
import { EntitySubtype, EntityType } from '@app/shared/models/entity-type.models';
import { BroadcastService } from '@app/core/services/broadcast.service';
import { AssetService } from '@core/http/asset.service';
import { EntityViewService } from '@core/http/entity-view.service';
@Component({
selector: 'tb-entity-subtype-select',

View File

@ -247,7 +247,6 @@
"no-asset-types-matching": "No asset types matching '{{entitySubtype}}' were found.",
"asset-type-list-empty": "No asset types selected.",
"asset-types": "Asset types",
"created-time": "Created time",
"name": "Name",
"name-required": "Name is required.",
"description": "Description",