1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00

[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">
<bit-dialog [disablePadding]="!loading">
<bit-dialog [disablePadding]="!loading" dialogSize="large">
<span bitDialogTitle>
{{ title }}
<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">
<bit-dialog dialogSize="default">
<bit-dialog dialogSize="large">
<ng-container bitDialogTitle>{{ title | i18n }}</ng-container>
<div bitDialogContent class="tw-relative">
<div

View File

@ -1,4 +1,4 @@
<bit-dialog>
<bit-dialog dialogSize="large">
<span bitDialogTitle>
{{ "importError" | i18n }}
</span>
@ -13,7 +13,9 @@
</ng-container>
<ng-template body>
<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>
</tr>
</ng-template>

View File

@ -1,6 +1,6 @@
<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"
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
>
<div

View File

@ -19,18 +19,22 @@ export class DialogComponent {
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() {
switch (this.dialogSize) {
case "small": {
return "tw-w-96";
return "tw-max-w-sm";
}
case "large": {
return "tw-w-75vw";
return "tw-max-w-3xl";
}
default: {
return "tw-w-50vw";
return "tw-max-w-xl";
}
}
}