Update Dialog panel class

Author: alexcibotari

src/app/features/admin/spaces/spaces.component.ts

@@ -56,7 +56,7 @@ export class SpacesComponent implements OnInit {
   openAddDialog(): void {
     this.dialog
       .open<SpaceDialogComponent, SpaceDialogModel, SpaceDialogModel>(SpaceDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           name: '',
         },
@@ -80,7 +80,7 @@ export class SpacesComponent implements OnInit {
   openEditDialog(element: Space): void {
     this.dialog
       .open<SpaceDialogComponent, SpaceDialogModel, SpaceDialogModel>(SpaceDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           name: element.name,
         },

src/app/features/admin/users/users.component.ts

@@ -75,7 +75,7 @@ export class UsersComponent implements OnInit {
   inviteDialog(): void {
     this.dialog
       .open<UserInviteDialogComponent, void, UserInviteDialogResponse>(UserInviteDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(
@@ -95,7 +95,7 @@ export class UsersComponent implements OnInit {
   editDialog(element: User): void {
     this.dialog
       .open<UserDialogComponent, UserDialogModel, UserDialogModel>(UserDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           role: element.role,
           permissions: element.permissions,

src/app/features/features.component.ts

@@ -168,10 +168,7 @@ export class FeaturesComponent implements OnInit {
 
   showReleases() {
     this.dialog.open<ReleasesDialogComponent, ReleasesDialogModel, void>(ReleasesDialogComponent, {
-      minWidth: '900px',
-      width: 'calc(100vw - 160px)',
-      maxWidth: '1280px',
-      maxHeight: 'calc(100vh - 80px)',
+      panelClass: 'xl',
       data: {
         version: this.version,
         releases: this.releases,

src/app/features/me/me.component.ts

@@ -29,7 +29,7 @@ export class MeComponent {
   openEditDialog(): void {
     this.dialog
       .open<MeDialogComponent, MeDialogModel, MeDialogModel>(MeDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           displayName: this.userStore.displayName() || undefined,
           photoURL: this.userStore.photoURL() || undefined,
@@ -57,7 +57,7 @@ export class MeComponent {
   openUpdateEmailDialog(): void {
     this.dialog
       .open<MeEmailDialogComponent, void, MeEmailDialogModel>(MeEmailDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(
@@ -78,7 +78,7 @@ export class MeComponent {
   openUpdatePasswordDialog(): void {
     this.dialog
       .open<MePasswordDialogComponent, void, MePasswordDialogModel>(MePasswordDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(

src/app/features/spaces/assets/assets.component.ts

@@ -123,7 +123,7 @@ export class AssetsComponent implements OnInit {
   openAddFolderDialog(): void {
     this.dialog
       .open<AddFolderDialogComponent, AddFolderDialogModel, AssetFolderCreate>(AddFolderDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           reservedNames: this.assets.map(it => it.name),
         },
@@ -157,7 +157,7 @@ export class AssetsComponent implements OnInit {
     event.stopImmediatePropagation();
     this.dialog
       .open<EditFolderDialogComponent, EditFolderDialogModel, AssetFolderUpdate>(EditFolderDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           reservedNames: this.assets.map(it => it.name),
           asset: ObjectUtils.clone(element),
@@ -186,7 +186,7 @@ export class AssetsComponent implements OnInit {
     event.stopImmediatePropagation();
     this.dialog
       .open<EditFileDialogComponent, EditFileDialogModel, AssetFileUpdate>(EditFileDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           reservedNames: this.assets.map(it => it.name),
           asset: ObjectUtils.clone(element),
@@ -254,7 +254,7 @@ export class AssetsComponent implements OnInit {
     event.stopImmediatePropagation();
     this.dialog
       .open<MoveDialogComponent, MoveDialogModel, MoveDialogReturn>(MoveDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           spaceId: this.spaceId(),
         },
@@ -342,7 +342,7 @@ export class AssetsComponent implements OnInit {
   openImportDialog() {
     this.dialog
       .open<ImportDialogComponent, void, ImportDialogReturn>(ImportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(
@@ -368,7 +368,7 @@ export class AssetsComponent implements OnInit {
   openExportDialog() {
     this.dialog
       .open<ExportDialogComponent, ExportDialogModel, ExportDialogReturn>(ExportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           spaceId: this.spaceId(),
         },

src/app/features/spaces/contents/contents.component.ts

@@ -107,7 +107,7 @@ export class ContentsComponent {
   openAddDocumentDialog(): void {
     this.dialog
       .open<AddDocumentDialogComponent, AddDocumentDialogModel, ContentDocumentCreate>(AddDocumentDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           schemas: this.schemas,
           reservedNames: this.contents.map(it => it.name),
@@ -132,7 +132,7 @@ export class ContentsComponent {
   openAddFolderDialog(): void {
     this.dialog
       .open<AddFolderDialogComponent, AddFolderDialogModel, ContentFolderCreate>(AddFolderDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           reservedNames: this.contents.map(it => it.name),
           reservedSlugs: this.contents.map(it => it.slug),
@@ -159,7 +159,7 @@ export class ContentsComponent {
     event.stopImmediatePropagation();
     this.dialog
       .open<EditDialogComponent, EditDialogModel, ContentUpdate>(EditDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           content: ObjectUtils.clone(element),
           reservedNames: this.contents.map(it => it.name),
@@ -227,7 +227,7 @@ export class ContentsComponent {
     event.stopImmediatePropagation();
     this.dialog
       .open<MoveDialogComponent, MoveDialogModel, MoveDialogReturn>(MoveDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           spaceId: this.spaceId(),
         },
@@ -345,7 +345,7 @@ export class ContentsComponent {
   openImportDialog() {
     this.dialog
       .open<ImportDialogComponent, void, ImportDialogReturn>(ImportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(
@@ -371,7 +371,7 @@ export class ContentsComponent {
   openExportDialog() {
     this.dialog
       .open<ExportDialogComponent, ExportDialogModel, ExportDialogReturn>(ExportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           spaceId: this.spaceId(),
         },

src/app/features/spaces/contents/shared/asset-select/asset-select.component.ts

@@ -55,10 +55,7 @@ export class AssetSelectComponent implements OnInit {
   openAssetSelectDialog(): void {
     this.dialog
       .open<AssetsSelectDialogComponent, AssetsSelectDialogModel, Asset[] | undefined>(AssetsSelectDialogComponent, {
-        minWidth: '900px',
-        width: 'calc(100vw - 160px)',
-        maxWidth: '1280px',
-        maxHeight: 'calc(100vh - 80px)',
+        panelClass: 'xl',
         data: {
           spaceId: this.space().id,
           multiple: false,

src/app/features/spaces/contents/shared/assets-select/assets-select.component.ts

@@ -64,10 +64,7 @@ export class AssetsSelectComponent implements OnInit {
   openAssetSelectDialog(): void {
     this.dialog
       .open<AssetsSelectDialogComponent, AssetsSelectDialogModel, AssetFile[] | undefined>(AssetsSelectDialogComponent, {
-        minWidth: '900px',
-        width: 'calc(100vw - 160px)',
-        maxWidth: '1280px',
-        maxHeight: 'calc(100vh - 80px)',
+        panelClass: 'xl',
         data: {
           spaceId: this.space().id,
           multiple: true,

src/app/features/spaces/contents/shared/reference-select/reference-select.component.ts

@@ -55,10 +55,7 @@ export class ReferenceSelectComponent implements OnInit {
   openReferenceSelectDialog(): void {
     this.dialog
       .open<ReferencesSelectDialogComponent, ReferencesSelectDialogModel, ContentDocument[] | undefined>(ReferencesSelectDialogComponent, {
-        minWidth: '900px',
-        width: 'calc(100vw - 160px)',
-        maxWidth: '1280px',
-        maxHeight: 'calc(100vh - 80px)',
+        panelClass: 'xl',
         data: {
           spaceId: this.space().id,
           multiple: false,

src/app/features/spaces/contents/shared/references-select/references-select.component.ts

@@ -60,10 +60,7 @@ export class ReferencesSelectComponent implements OnInit {
   openReferenceSelectDialog(): void {
     this.dialog
       .open<ReferencesSelectDialogComponent, ReferencesSelectDialogModel, ContentDocument[] | undefined>(ReferencesSelectDialogComponent, {
-        minWidth: '900px',
-        width: 'calc(100vw - 160px)',
-        maxWidth: '1280px',
-        maxHeight: 'calc(100vh - 80px)',
+        panelClass: 'xl',
         data: {
           spaceId: this.space().id,
           multiple: true,

src/app/features/spaces/schemas/schemas.component.ts

@@ -133,7 +133,7 @@ export class SchemasComponent implements OnInit {
   openAddDialog(): void {
     this.dialog
       .open<AddDialogComponent, AddDialogModel, SchemaCreate>(AddDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           reservedIds: this.schemaIds(),
         },
@@ -159,7 +159,7 @@ export class SchemasComponent implements OnInit {
     event.stopImmediatePropagation();
     this.dialog
       .open<EditIdDialogComponent, EditIdDialogModel, string>(EditIdDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           id: element.id,
           reservedIds: this.schemaIds(),
@@ -218,7 +218,7 @@ export class SchemasComponent implements OnInit {
   openImportDialog() {
     this.dialog
       .open<ImportDialogComponent, void, ImportDialogReturn>(ImportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(
@@ -243,7 +243,7 @@ export class SchemasComponent implements OnInit {
   openExportDialog() {
     this.dialog
       .open<ExportDialogComponent, void, ExportDialogReturn>(ExportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(

src/app/features/spaces/settings/locales/locales.component.ts

@@ -58,7 +58,7 @@ export class LocalesComponent {
     const { id, locales } = this.spaceStore.selectedSpace()!;
     this.dialog
       .open<LocaleDialogComponent, Locale[], LocaleDialogModel>(LocaleDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: locales,
       })
       .afterClosed()

src/app/features/spaces/settings/tokens/tokens.component.ts

@@ -59,7 +59,7 @@ export class TokensComponent {
     const spaceId = this.spaceStore.selectedSpaceId();
     this.dialog
       .open<TokenDialogComponent, never, TokenDialogModel>(TokenDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
       })
       .afterClosed()
       .pipe(

src/app/features/spaces/translations/translations.component.ts

@@ -179,7 +179,7 @@ export class TranslationsComponent implements OnInit {
   openAddDialog(): void {
     this.dialog
       .open<AddDialogComponent, AddDialogModel, AddDialogReturnModel>(AddDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           reservedIds: this.translationIds(),
         },
@@ -213,7 +213,7 @@ export class TranslationsComponent implements OnInit {
   openEditIdDialog(translation: Translation): void {
     this.dialog
       .open<EditIdDialogComponent, EditIdDialogModel, string>(EditIdDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           id: translation.id,
           reservedIds: this.translationIds(),
@@ -240,7 +240,7 @@ export class TranslationsComponent implements OnInit {
   openEditDialog(translation: Translation): void {
     this.dialog
       .open<EditDialogComponent, Translation, EditDialogModel>(EditDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: ObjectUtils.clone(translation),
       })
       .afterClosed()
@@ -290,7 +290,7 @@ export class TranslationsComponent implements OnInit {
   openImportDialog(locales: Locale[]): void {
     this.dialog
       .open<ImportDialogComponent, ImportDialogModel, ImportDialogReturn>(ImportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           locales: locales,
         },
@@ -325,7 +325,7 @@ export class TranslationsComponent implements OnInit {
   openExportDialog(locales: Locale[]): void {
     this.dialog
       .open<ExportDialogComponent, ExportDialogModel, ExportDialogReturn>(ExportDialogComponent, {
-        width: '500px',
+        panelClass: 'sm',
         data: {
           locales: locales,
         },

src/styles.scss

@@ -11,6 +11,7 @@
 @import 'styles/layout';
 @import 'styles/markdown';
 @import 'styles/mat-card';
+@import 'styles/mat-dialog';
 @import 'styles/mat-grid-list';
 @import 'styles/mat-list';
 @import 'styles/mat-menu';

src/styles/_mat-dialog.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+
+@import './styles-variables';
+
+.cdk-overlay-pane.mat-mdc-dialog-panel {
+  &.sm {
+    min-width: 500px;
+    width: calc(100vw - 160px);
+    max-width: 640px;
+    max-height: calc(100vh - 80px);
+  }
+  &.xl {
+    min-width: 900px;
+    width: calc(100vw - 160px);
+    max-width: 1280px;
+    max-height: calc(100vh - 80px);
+  }
+  &.full-screen {
+
+  }
+}