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

UI: improvement for VC popover

Browse Source
This commit is contained in:
fe-dev 2022-07-13 14:11:09 +03:00
parent 1c6c0e1f74
commit d54ddadd49
10 changed files with 294 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
View File

@ -15,8 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<section style="min-width: 600px;">
<section *ngIf="!versionCreateResult$"> <section *ngIf="!versionCreateResult$">
<mat-toolbar> <mat-toolbar>
<h2>{{ 'version-control.create-entities-version' | translate }}</h2> <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
<span fxFlex></span> <span fxFlex></span>
@ -40,7 +40,7 @@
{{ 'version-control.version-name-required' | translate }} {{ 'version-control.version-name-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block" style="margin-bottom: 16px;"> <mat-form-field fxFlex class="mat-block" style="margin-bottom: 24px;">
<mat-label translate>version-control.default-sync-strategy</mat-label> <mat-label translate>version-control.default-sync-strategy</mat-label>
<mat-select required formControlName="syncStrategy"> <mat-select required formControlName="syncStrategy">
<mat-option *ngFor="let strategy of syncStrategies" [value]="strategy"> <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
@ -69,8 +69,8 @@
{{ 'action.create' | translate }} {{ 'action.create' | translate }}
</button> </button>
</div> </div>
</section> </section>
<section *ngIf="versionCreateResult$"> <section *ngIf="versionCreateResult$">
<section *ngIf="resultMessage"> <section *ngIf="resultMessage">
<div class="mat-title vc-result-message" [innerHtml]="resultMessage"></div> <div class="mat-title vc-result-message" [innerHtml]="resultMessage"></div>
</section> </section>
@ -90,5 +90,4 @@
</div> </div>
</section> </section>
</ng-template> </ng-template>
</section>
</section> </section>

9
ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
View File

@ -15,8 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<section [ngStyle]="versionLoadResult$ ? {minWidth: '500px'} : {minWidth: '600px'}">
<section *ngIf="!versionLoadResult$"> <section *ngIf="!versionLoadResult$">
<mat-toolbar> <mat-toolbar>
<h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2> <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
<span fxFlex></span> <span fxFlex></span>
@ -47,8 +47,8 @@
{{ 'action.restore' | translate }} {{ 'action.restore' | translate }}
</button> </button>
</div> </div>
</section> </section>
<section *ngIf="versionLoadResult$"> <section *ngIf="versionLoadResult$">
<div *ngIf="(versionLoadResult$ | async)?.done && !entityTypeLoadResults?.length && !errorMessage" class="mat-title vc-result-message"> <div *ngIf="(versionLoadResult$ | async)?.done && !entityTypeLoadResults?.length && !errorMessage" class="mat-title vc-result-message">
{{ 'version-control.no-entities-restored' | translate }} {{ 'version-control.no-entities-restored' | translate }}
</div> </div>
@ -70,5 +70,4 @@
</div> </div>
</section> </section>
</ng-template> </ng-template>
</section>
</section> </section>

8
ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
View File

@ -43,7 +43,7 @@
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div fxLayout="row" fxLayoutGap="16px"> <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-entity-type-select <tb-entity-type-select
showLabel showLabel
formControlName="entityType" formControlName="entityType"
@ -51,7 +51,7 @@
[filterAllowedEntityTypes]="false" [filterAllowedEntityTypes]="false"
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
</tb-entity-type-select> </tb-entity-type-select>
<div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
<mat-form-field fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>version-control.sync-strategy</mat-label> <mat-label translate>version-control.sync-strategy</mat-label>
<mat-select formControlName="syncStrategy"> <mat-select formControlName="syncStrategy">
@ -76,8 +76,8 @@
</div> </div>
</div> </div>
</div> </div>
<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center" <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
formGroupName="config" style="min-height: 76px;"> formGroupName="config" ngStyle.gt-xs="min-height: 60px;">
<mat-slide-toggle formControlName="allEntities"> <mat-slide-toggle formControlName="allEntities">
{{ 'version-control.all-entities' | translate }} {{ 'version-control.all-entities' | translate }}
</mat-slide-toggle> </mat-slide-toggle>

5
ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
View File

@ -43,15 +43,16 @@
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div fxLayout="row" fxLayoutGap="32px"> <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
<tb-entity-type-select <tb-entity-type-select
fxFlex
showLabel showLabel
formControlName="entityType" formControlName="entityType"
required required
[filterAllowedEntityTypes]="false" [filterAllowedEntityTypes]="false"
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
</tb-entity-type-select> </tb-entity-type-select>
<div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config"> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
<div fxFlex fxLayout="column" fxLayoutGap="8px"> <div fxFlex fxLayout="column" fxLayoutGap="8px">
<mat-checkbox #removeOtherEntitiesCheckbox <mat-checkbox #removeOtherEntitiesCheckbox
formControlName="removeOtherEntities" formControlName="removeOtherEntities"

9
ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
View File

@ -15,8 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<section style="min-width: 300px;">
<section *ngIf="!versionCreateResult$"> <section *ngIf="!versionCreateResult$">
<mat-toolbar> <mat-toolbar>
<h2>{{ 'version-control.create-entity-version' | translate }}</h2> <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
<span fxFlex></span> <span fxFlex></span>
@ -65,8 +65,8 @@
{{ 'action.create' | translate }} {{ 'action.create' | translate }}
</button> </button>
</div> </div>
</section> </section>
<section *ngIf="versionCreateResult$"> <section *ngIf="versionCreateResult$">
<section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress"> <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
<section *ngIf="resultMessage"> <section *ngIf="resultMessage">
<div class="mat-title vc-result-message">{{ resultMessage }}</div> <div class="mat-title vc-result-message">{{ resultMessage }}</div>
@ -88,5 +88,4 @@
</div> </div>
</section> </section>
</ng-template> </ng-template>
</section>
</section> </section>

1
ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
View File

@ -41,6 +41,7 @@
<mat-divider vertical></mat-divider> <mat-divider vertical></mat-divider>
<button mat-stroked-button color="primary" <button mat-stroked-button color="primary"
#restoreVersionButton #restoreVersionButton
style="min-width: 150px"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
(click)="toggleRestoreEntityVersion($event, restoreVersionButton)"> (click)="toggleRestoreEntityVersion($event, restoreVersionButton)">
<mat-icon>restore</mat-icon> <mat-icon>restore</mat-icon>

6
ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss
View File

@ -46,9 +46,15 @@
height: 40px; height: 40px;
margin-right: 16px; margin-right: 16px;
margin-left: 16px; margin-left: 16px;
@media #{$mat-xs} {
margin-right: 8px;
margin-left: 8px;
}
} }
.diff-count { .diff-count {
font-size: 16px; font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
.version-title { .version-title {

17
ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
View File

@ -15,8 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<section [ngStyle]="entityDataInfo ? {minWidth: '300px'} : {}">
<section *ngIf="!versionLoadResult$"> <section *ngIf="!versionLoadResult$">
<mat-toolbar *ngIf="entityDataInfo"> <mat-toolbar *ngIf="entityDataInfo">
<h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2> <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
<span fxFlex></span> <span fxFlex></span>
@ -27,14 +27,14 @@
<mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner> <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
<form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;"> <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column"> <div fxFlex fxLayout="column" fxLayoutGap="16px">
<mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;"> <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials">
{{ 'version-control.load-credentials' | translate }} {{ 'version-control.load-credentials' | translate }}
</mat-checkbox> </mat-checkbox>
<mat-checkbox *ngIf="entityDataInfo.hasAttributes" formControlName="loadAttributes" style="margin-bottom: 16px;"> <mat-checkbox *ngIf="entityDataInfo.hasAttributes" formControlName="loadAttributes">
{{ 'version-control.load-attributes' | translate }} {{ 'version-control.load-attributes' | translate }}
</mat-checkbox> </mat-checkbox>
<mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations" style="margin-bottom: 16px;"> <mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations">
{{ 'version-control.load-relations' | translate }} {{ 'version-control.load-relations' | translate }}
</mat-checkbox> </mat-checkbox>
</div> </div>
@ -54,8 +54,8 @@
{{ 'action.restore' | translate }} {{ 'action.restore' | translate }}
</button> </button>
</div> </div>
</section> </section>
<section *ngIf="versionLoadResult$"> <section *ngIf="versionLoadResult$">
<section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress"> <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
<section *ngIf="errorMessage"> <section *ngIf="errorMessage">
<div class="mat-title vc-result-message error" [innerHTML]="errorMessage"></div> <div class="mat-title vc-result-message error" [innerHTML]="errorMessage"></div>
@ -77,5 +77,4 @@
</div> </div>
</section> </section>
</ng-template> </ng-template>
</section>
</section> </section>

16
ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
View File

@ -217,7 +217,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
} }
} }
} }
}, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false); },
{maxHeight: '100vh', height: '100%', padding: '10px'},
{width: '400px', minWidth: '100%', maxWidth: '100%'}, {}, false);
createVersionPopover.tbComponentRef.instance.popoverComponent = createVersionPopover; createVersionPopover.tbComponentRef.instance.popoverComponent = createVersionPopover;
} }
} }
@ -244,7 +246,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
} }
} }
} }
}, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false); },
{maxHeight: '90vh', height: '100%', padding: '10px'},
{width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover; complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
} }
} }
@ -292,7 +296,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
this.versionRestored.emit(); this.versionRestored.emit();
} }
} }
}, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false); },
{maxHeight: '100vh', height: '100%', padding: '10px'},
{width: '400px', minWidth: '100%', maxWidth: '100%'}, {}, false);
restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover; restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover;
} }
} }
@ -313,7 +319,9 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
onClose: (result: VersionLoadResult | null) => { onClose: (result: VersionLoadResult | null) => {
restoreEntitiesVersionPopover.hide(); restoreEntitiesVersionPopover.hide();
} }
}, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false); },
{maxHeight: '80vh', height: '100%', padding: '10px'},
{width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover; restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
} }
} }

3
ui-ngx/src/app/shared/components/entity/entity-type-select.component.scss
View File

@ -14,6 +14,9 @@
* limitations under the License. * limitations under the License.
*/ */
:host { :host {
.mat-form-field {
width: 100%;
}
} }
:host ::ng-deep { :host ::ng-deep {