[PM-1541] Adjust the dialogs max-width (#5036)

This commit is contained in:
Oscar Hinton 2023-04-25 16:45:35 +02:00 committed by GitHub
parent 85277aa2f8
commit 76673ebe8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 9 deletions

View File

@ -1,5 +1,5 @@
<form [formGroup]="formGroup" [bitSubmit]="submit"> <form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog [disablePadding]="!loading"> <bit-dialog [disablePadding]="!loading" dialogSize="large">
<span bitDialogTitle> <span bitDialogTitle>
{{ title }} {{ title }}
<span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{ <span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{

View File

@ -1,5 +1,5 @@
<form [formGroup]="formGroup" [bitSubmit]="submit"> <form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog dialogSize="default"> <bit-dialog dialogSize="large">
<ng-container bitDialogTitle>{{ title | i18n }}</ng-container> <ng-container bitDialogTitle>{{ title | i18n }}</ng-container>
<div bitDialogContent class="tw-relative"> <div bitDialogContent class="tw-relative">
<div <div

View File

@ -1,4 +1,4 @@
<bit-dialog> <bit-dialog dialogSize="large">
<span bitDialogTitle> <span bitDialogTitle>
{{ "importError" | i18n }} {{ "importError" | i18n }}
</span> </span>
@ -13,7 +13,9 @@
</ng-container> </ng-container>
<ng-template body> <ng-template body>
<tr bitRow *ngFor="let line of errorLines"> <tr bitRow *ngFor="let line of errorLines">
<td bitCell class="tw-break-all">[{{ line.id }}] [{{ line.type }}] {{ line.key }}</td> <td bitCell class="tw-whitespace-nowrap">
[{{ line.id }}] [{{ line.type }}] {{ line.key }}
</td>
<td bitCell>{{ line.errorMessage }}</td> <td bitCell>{{ line.errorMessage }}</td>
</tr> </tr>
</ng-template> </ng-template>

View File

@ -1,6 +1,6 @@
<div <div
class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
[ngClass]="width" [ngClass]="width"
class="tw-flex tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
@fadeIn @fadeIn
> >
<div <div

View File

@ -19,18 +19,22 @@ export class DialogComponent {
return this._disablePadding; return this._disablePadding;
} }
@HostBinding("class") classes = ["tw-flex", "tw-flex-col", "tw-py-4", "tw-max-h-screen"]; @HostBinding("class") get classes() {
return ["tw-flex", "tw-flex-col", "tw-max-h-screen", "tw-w-screen", "tw-p-4"].concat(
this.width
);
}
get width() { get width() {
switch (this.dialogSize) { switch (this.dialogSize) {
case "small": { case "small": {
return "tw-w-96"; return "tw-max-w-sm";
} }
case "large": { case "large": {
return "tw-w-75vw"; return "tw-max-w-3xl";
} }
default: { default: {
return "tw-w-50vw"; return "tw-max-w-xl";
} }
} }
} }