tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Improve complex version control popups layout.

pull/6987/head
Igor Kulikov 4 years ago
parent
53381636e3
commit
156fa3f0d2
8 changed files with 244 additions and 311 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
  2. 16
      ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
  3. 188
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
  4. 2
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
  5. 162
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
  6. 63
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
  7. 2
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
  8. 60
      ui-ngx/src/app/modules/home/components/vc/entity-types-version.component.scss

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

@ -16,7 +16,7 @@
--> -->
<section *ngIf="!versionCreateResult$"> <section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;">
<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>
@ -24,38 +24,36 @@
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate" <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async"> *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<form [formGroup]="createVersionFormGroup" style="padding-top: 16px;"> <form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
<fieldset [disabled]="isLoading$ | async"> <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
<div fxFlex fxLayout="column"> <tb-branch-autocomplete
<tb-branch-autocomplete fxFlex
fxFlex required
required formControlName="branch">
formControlName="branch"> </tb-branch-autocomplete>
</tb-branch-autocomplete> <mat-form-field fxFlex class="mat-block">
<mat-form-field class="mat-block" fxFlex> <mat-label translate>version-control.version-name</mat-label>
<mat-label translate>version-control.version-name</mat-label> <input required matInput formControlName="versionName">
<input required matInput formControlName="versionName"> <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
<mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') || createVersionFormGroup.get('versionName').hasError('pattern')">
createVersionFormGroup.get('versionName').hasError('pattern')"> {{ 'version-control.version-name-required' | translate }}
{{ 'version-control.version-name-required' | translate }} </mat-error>
</mat-error> </mat-form-field>
</mat-form-field> </div>
<mat-form-field fxFlex class="mat-block" style="margin-bottom: 24px;"> <mat-form-field 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">
{{syncStrategyTranslations.get(strategy) | translate}} {{syncStrategyTranslations.get(strategy) | translate}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint> <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
</mat-form-field> </mat-form-field>
<tb-entity-types-version-create <tb-entity-types-version-create
formControlName="entityTypes"> formControlName="entityTypes">
</tb-entity-types-version-create> </tb-entity-types-version-create>
</div>
</fieldset>
</form> </form>
<div fxLayoutAlign="end center" fxLayoutGap="8px"> <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

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

@ -16,7 +16,7 @@
--> -->
<section *ngIf="!versionLoadResult$"> <section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;">
<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>
@ -24,16 +24,12 @@
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate" <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async"> *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<form [formGroup]="loadVersionFormGroup" style="padding-top: 16px;"> <form [formGroup]="loadVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
<fieldset [disabled]="isLoading$ | async"> <tb-entity-types-version-load
<div fxFlex fxLayout="column"> formControlName="entityTypes">
<tb-entity-types-version-load </tb-entity-types-version-load>
formControlName="entityTypes">
</tb-entity-types-version-load>
</div>
</fieldset>
</form> </form>
<div fxLayoutAlign="end center" fxLayoutGap="8px"> <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

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

@ -15,102 +15,100 @@
limitations under the License. limitations under the License.
--> -->
<section class="entity-types-version-create" [formGroup]="entityTypesVersionCreateFormGroup" fxLayout="column"> <fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group" fxLayout="column">
<fieldset class="fields-group"> <legend class="group-title" translate>version-control.entities-to-export</legend>
<legend class="group-title" translate>version-control.entities-to-export</legend> <div fxLayout="column" style="flex: 1; overflow: auto;">
<div fxLayout="column"> <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; let $index = index; last as isLast;"
let $index = index; last as isLast;" fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false"> <mat-expansion-panel-header>
<mat-expansion-panel-header> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <mat-panel-title>
<mat-panel-title> <div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
<div>{{ entityTypeText(entityTypeFormGroup) }}</div> </div>
</div> </mat-panel-title>
</mat-panel-title> <span fxFlex></span>
<span fxFlex></span> <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" type="button"
type="button" (click)="removeEntityType($index)"
(click)="removeEntityType($index)" matTooltip="{{ 'action.remove' | translate }}"
matTooltip="{{ 'action.remove' | translate }}" matTooltipPosition="above">
matTooltipPosition="above"> <mat-icon>delete</mat-icon>
<mat-icon>delete</mat-icon> </button>
</button> </div>
</div> </mat-expansion-panel-header>
</mat-expansion-panel-header> <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" fxLayout.xs="column" fxLayoutGap.gt-xs="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" required
required [filterAllowedEntityTypes]="false"
[filterAllowedEntityTypes]="false" [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> </tb-entity-type-select>
</tb-entity-type-select> <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="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"> <mat-option [value]="'default'">
<mat-option [value]="'default'"> {{ 'version-control.default' | translate }}
{{ 'version-control.default' | translate }} </mat-option>
</mat-option> <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
<mat-option *ngFor="let strategy of syncStrategies" [value]="strategy"> {{syncStrategyTranslations.get(strategy) | translate}}
{{syncStrategyTranslations.get(strategy) | translate}} </mat-option>
</mat-option> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> <div fxFlex fxLayout="column" fxLayoutGap="8px">
<div fxFlex fxLayout="column" fxLayoutGap="8px"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials"> {{ 'version-control.export-credentials' | translate }}
{{ 'version-control.export-credentials' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="saveAttributes">
<mat-checkbox formControlName="saveAttributes"> {{ 'version-control.export-attributes' | translate }}
{{ 'version-control.export-attributes' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="saveRelations">
<mat-checkbox formControlName="saveRelations"> {{ 'version-control.export-relations' | translate }}
{{ 'version-control.export-relations' | translate }} </mat-checkbox>
</mat-checkbox>
</div>
</div> </div>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
<mat-slide-toggle formControlName="allEntities">
{{ 'version-control.all-entities' | translate }}
</mat-slide-toggle>
<tb-entity-list
fxFlex
[fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
[entityType]="entityTypeFormGroup.get('entityType').value"
required
formControlName="entityIds">
</tb-entity-list>
</div>
</div> </div>
</mat-expansion-panel> <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
</div> formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
<div *ngIf="!entityTypesFormGroupArray().length"> <mat-slide-toggle formControlName="allEntities">
<span translate fxLayoutAlign="center center" {{ 'version-control.all-entities' | translate }}
class="tb-prompt">version-control.no-entities-to-export-prompt</span> </mat-slide-toggle>
</div> <tb-entity-list
<div style="padding-top: 16px;" fxLayout="row"> fxFlex
<button mat-raised-button color="primary" [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
type="button" [entityType]="entityTypeFormGroup.get('entityType').value"
[disabled]="!addEnabled()" required
(click)="addEntityType()"> formControlName="entityIds">
<span translate>version-control.add-entity-type</span> </tb-entity-list>
</button> </div>
<span fxFlex></span> </div>
<button mat-raised-button color="primary" </mat-expansion-panel>
type="button" </div>
[disabled]="!entityTypesFormGroupArray().length" <div *ngIf="!entityTypesFormGroupArray().length">
(click)="removeAll()"> <span translate fxLayoutAlign="center center"
<span translate>version-control.remove-all</span> class="tb-prompt">version-control.no-entities-to-export-prompt</span>
</button>
</div>
</div> </div>
</fieldset> </div>
</section> <div style="padding-top: 16px;" fxLayout="row">
<button mat-raised-button color="primary"
type="button"
[disabled]="!addEnabled()"
(click)="addEntityType()">
<span translate>version-control.add-entity-type</span>
</button>
<span fxFlex></span>
<button mat-raised-button color="primary"
type="button"
[disabled]="!entityTypesFormGroupArray().length"
(click)="removeAll()">
<span translate>version-control.remove-all</span>
</button>
</div>
</fieldset>

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

@ -43,7 +43,7 @@ import { isDefinedAndNotNull } from '@core/utils';
@Component({ @Component({
selector: 'tb-entity-types-version-create', selector: 'tb-entity-types-version-create',
templateUrl: './entity-types-version-create.component.html', templateUrl: './entity-types-version-create.component.html',
styleUrls: ['./entity-types-version-create.component.scss'], styleUrls: ['./entity-types-version.component.scss'],
providers: [ providers: [
{ {
provide: NG_VALUE_ACCESSOR, provide: NG_VALUE_ACCESSOR,

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

@ -15,89 +15,87 @@
limitations under the License. limitations under the License.
--> -->
<section class="entity-types-version-load" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column"> <fieldset class="fields-group" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column">
<fieldset class="fields-group"> <legend class="group-title" translate>version-control.entities-to-restore</legend>
<legend class="group-title" translate>version-control.entities-to-restore</legend> <div fxLayout="column" style="flex: 1; overflow: auto;">
<div fxLayout="column"> <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; let $index = index; last as isLast;"
let $index = index; last as isLast;" fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false"> <mat-expansion-panel-header>
<mat-expansion-panel-header> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <mat-panel-title>
<mat-panel-title> <div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
<div>{{ entityTypeText(entityTypeFormGroup) }}</div> </div>
</div> </mat-panel-title>
</mat-panel-title> <span fxFlex></span>
<span fxFlex></span> <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" type="button"
type="button" (click)="removeEntityType($index)"
(click)="removeEntityType($index)" matTooltip="{{ 'action.remove' | translate }}"
matTooltip="{{ 'action.remove' | translate }}" matTooltipPosition="above">
matTooltipPosition="above"> <mat-icon>delete</mat-icon>
<mat-icon>delete</mat-icon> </button>
</button> </div>
</div> </mat-expansion-panel-header>
</mat-expansion-panel-header> <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" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px"> <tb-entity-type-select
<tb-entity-type-select fxFlex
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" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" 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" (click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)">
(click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)"> {{ 'version-control.remove-other-entities' | translate }}
{{ 'version-control.remove-other-entities' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="findExistingEntityByName">
<mat-checkbox formControlName="findExistingEntityByName"> {{ 'version-control.find-existing-entity-by-name' | translate }}
{{ 'version-control.find-existing-entity-by-name' | translate }} </mat-checkbox>
</mat-checkbox> </div>
</div> <div fxFlex fxLayout="column" fxLayoutGap="8px">
<div fxFlex fxLayout="column" fxLayoutGap="8px"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials"> {{ 'version-control.load-credentials' | translate }}
{{ 'version-control.load-credentials' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="loadAttributes">
<mat-checkbox formControlName="loadAttributes"> {{ 'version-control.load-attributes' | translate }}
{{ 'version-control.load-attributes' | translate }} </mat-checkbox>
</mat-checkbox> <mat-checkbox formControlName="loadRelations">
<mat-checkbox formControlName="loadRelations"> {{ 'version-control.load-relations' | translate }}
{{ 'version-control.load-relations' | translate }} </mat-checkbox>
</mat-checkbox>
</div>
</div> </div>
</div> </div>
</div> </div>
</mat-expansion-panel> </div>
</div> </mat-expansion-panel>
<div *ngIf="!entityTypesFormGroupArray().length"> </div>
<span translate fxLayoutAlign="center center" <div *ngIf="!entityTypesFormGroupArray().length">
class="tb-prompt">version-control.no-entities-to-restore-prompt</span> <span translate fxLayoutAlign="center center"
</div> class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
<div style="padding-top: 16px;" fxLayout="row">
<button mat-raised-button color="primary"
type="button"
[disabled]="!addEnabled()"
(click)="addEntityType()">
<span translate>version-control.add-entity-type</span>
</button>
<span fxFlex></span>
<button mat-raised-button color="primary"
type="button"
[disabled]="!entityTypesFormGroupArray().length"
(click)="removeAll()">
<span translate>version-control.remove-all</span>
</button>
</div>
</div> </div>
</fieldset> </div>
</section> <div style="padding-top: 16px;" fxLayout="row">
<button mat-raised-button color="primary"
type="button"
[disabled]="!addEnabled()"
(click)="addEntityType()">
<span translate>version-control.add-entity-type</span>
</button>
<span fxFlex></span>
<button mat-raised-button color="primary"
type="button"
[disabled]="!entityTypesFormGroupArray().length"
(click)="removeAll()">
<span translate>version-control.remove-all</span>
</button>
</div>
</fieldset>

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

@ -1,63 +0,0 @@
/**
* Copyright © 2016-2022 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 {
.entity-types-version-load {
.fields-group {
padding: 0 16px 8px;
margin-bottom: 10px;
border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px;
legend {
color: rgba(0, 0, 0, .7);
width: fit-content;
}
legend + * {
display: block;
margin-top: 16px;
}
}
.tb-prompt {
margin: 30px 0;
}
mat-expansion-panel.entity-type-config {
box-shadow: none;
border: 1px groove rgba(0, 0, 0, .25);
.mat-expansion-panel-header {
padding: 0 24px 0 8px;
height: 48px;
}
.entity-type-config-content {
padding: 0 8px 8px;
}
}
}
}
:host ::ng-deep {
.mat-expansion-panel.entity-type-config {
.mat-expansion-panel-body {
padding: 0;
}
&.load .mat-expansion-panel-content {
height: 0;
visibility: hidden;
}
}
}

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

@ -41,7 +41,7 @@ import { RemoveOtherEntitiesConfirmComponent } from '@home/components/vc/remove-
@Component({ @Component({
selector: 'tb-entity-types-version-load', selector: 'tb-entity-types-version-load',
templateUrl: './entity-types-version-load.component.html', templateUrl: './entity-types-version-load.component.html',
styleUrls: ['./entity-types-version-load.component.scss'], styleUrls: ['./entity-types-version.component.scss'],
providers: [ providers: [
{ {
provide: NG_VALUE_ACCESSOR, provide: NG_VALUE_ACCESSOR,

60
ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss → ui-ngx/src/app/modules/home/components/vc/entity-types-version.component.scss
View File

@ -13,39 +13,45 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
:host {
.entity-types-version-create {
.fields-group {
padding: 0 16px 8px;
margin-bottom: 10px;
border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px;
legend { @import '../../../../../scss/constants';
color: rgba(0, 0, 0, .7);
width: fit-content; :host {
} min-height: 200px;
min-width: 300px;
@media #{$mat-gt-xs} {
min-width: 550px;
}
.fields-group {
height: 100%;
padding: 0 16px 8px;
border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px;
legend + * { legend {
display: block; color: rgba(0, 0, 0, .7);
margin-top: 16px; width: fit-content;
}
} }
.tb-prompt { legend + * {
margin: 30px 0; display: block;
margin-top: 16px;
} }
}
.tb-prompt {
margin: 30px 0;
}
mat-expansion-panel.entity-type-config { mat-expansion-panel.entity-type-config {
box-shadow: none; box-shadow: none;
border: 1px groove rgba(0, 0, 0, .25); border: 1px groove rgba(0, 0, 0, .25);
.mat-expansion-panel-header { .mat-expansion-panel-header {
padding: 0 24px 0 8px; padding: 0 24px 0 8px;
height: 48px; height: 48px;
} }
.entity-type-config-content { .entity-type-config-content {
padding: 0 8px 8px; padding: 0 8px 8px;
}
} }
} }
} }
Write Preview
Loading…
Cancel
Save