UI: Fixed responsive create/restore complex version

This commit is contained in:
Vladyslav_Prykhodko 2022-07-18 16:56:03 +03:00
parent 58e418578c
commit a60ecd1372
7 changed files with 97 additions and 87 deletions

View File

@ -22,7 +22,8 @@
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-panel-title>
@ -40,7 +41,6 @@
</button>
</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
@ -90,7 +90,6 @@
</tb-entity-list>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</div>
<div *ngIf="!entityTypesFormGroupArray().length">

View File

@ -55,5 +55,9 @@
.mat-expansion-panel-body {
padding: 0;
}
&.load .mat-expansion-panel-content {
height: 0;
visibility: hidden;
}
}
}

View File

@ -74,6 +74,8 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
entityTypes = EntityType;
loading = true;
constructor(protected store: Store<AppState>,
private translate: TranslateService,
private fb: FormBuilder) {

View File

@ -22,7 +22,8 @@
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-panel-title>
@ -40,7 +41,6 @@
</button>
</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
@ -77,7 +77,6 @@
</div>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</div>
<div *ngIf="!entityTypesFormGroupArray().length">

View File

@ -55,5 +55,9 @@
.mat-expansion-panel-body {
padding: 0;
}
&.load .mat-expansion-panel-content {
height: 0;
visibility: hidden;
}
}
}

View File

@ -68,6 +68,8 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On
entityTypes = EntityType;
loading = true;
constructor(protected store: Store<AppState>,
private translate: TranslateService,
private popoverService: TbPopoverService,

View File

@ -248,7 +248,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
},
{maxHeight: '90vh', height: '100%', padding: '10px'},
{width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
{}, {}, false);
complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
}
}
@ -321,7 +321,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
}
},
{maxHeight: '80vh', height: '100%', padding: '10px'},
{width: '600px', minWidth: '100%', maxWidth: '100%'}, {}, false);
{}, {}, false);
restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
}
}