fix: add padding to dialogs

gisaia · Feb 14, 2025 · bf0d59d · bf0d59d
1 parent d78eb9c
commit bf0d59d
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 13 deletions.
diff --git a/projects/arlas-toolkit/src/lib/components/aias/aias-process.scss b/projects/arlas-toolkit/src/lib/components/aias/aias-process.scss
@@ -100,3 +100,7 @@ $default-spacing: 10px;
 ::ng-deep .mdc-dialog__title::before {
   display: none !important;
 }
+
+::ng-deep.arlas-aias-dialog .mdc-dialog__surface {
+  padding: 12px 24px;
+}
diff --git a/projects/arlas-toolkit/src/lib/components/bookmark/bookmark-add-dialog.component.scss b/projects/arlas-toolkit/src/lib/components/bookmark/bookmark-add-dialog.component.scss
@@ -18,7 +18,7 @@
  */
 
  ::ng-deep #add-bookmark-dialog .mat-mdc-dialog-surface {
-  padding: 12px;
+  padding: 12px 24px;
 }
 
 .bookmark__add {

diff --git a/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss b/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss
@@ -17,10 +17,13 @@
  * under the License.
  */
 
+::ng-deep.bookmark-manager .mdc-dialog__surface {
+  padding: 12px 24px;
+}
+
 .bookmark-table-items {
   max-height: 60vh;
   overflow-y: auto;
-  padding: 24px;
   min-width: unset;
 
   .mat-column-checked {

diff --git a/...arlas-toolkit/src/lib/components/denied-access-dialog/denied-access-dialog.component.scss b/...arlas-toolkit/src/lib/components/denied-access-dialog/denied-access-dialog.component.scss
@@ -27,6 +27,10 @@ $default-font-size: 16px;
 $success-color: #18853c;
 $error-color: #ce3d38;
 
+::ng-deep.arlas-error-dialog .mdc-dialog__surface {
+    padding: 12px 24px;
+}
+
 .title {
     font-size: $default-font-size;
     font-weight: bold;

diff --git a/.../permissions-creator/permissions-creator-dialog/permissions-creator-dialog.component.scss b/.../permissions-creator/permissions-creator-dialog/permissions-creator-dialog.component.scss
@@ -27,6 +27,10 @@ $default-font-size: 16px;
 $success-color: #18853c;
 $error-color: #ce3d38;
 
+::ng-deep.arlas-permission-dialog .mdc-dialog__surface {
+    padding: 0 15px;
+}
+
 .title {
     font-size: $default-font-size;
     font-weight: bold;

diff --git a/...s/arlas-toolkit/src/lib/components/permissions-creator/permissions-creator.component.scss b/...s/arlas-toolkit/src/lib/components/permissions-creator/permissions-creator.component.scss
@@ -25,4 +25,4 @@ $border-color: #a1a1a1;
     padding: 0 $sm-margin !important;
     height: $permission-button-height;
     border-color: $border-color !important;
-}
+}
diff --git a/...cts/arlas-toolkit/src/lib/components/permissions-creator/permissions-creator.component.ts b/...cts/arlas-toolkit/src/lib/components/permissions-creator/permissions-creator.component.ts
@@ -81,7 +81,8 @@ export class PermissionsCreatorComponent implements OnInit, OnDestroy {
       // - open a dialog for description
       this.createPermissionDialog.open(PermissionsCreatorDialogComponent, {
         data: permissionData,
-        disableClose: true
+        disableClose: true,
+        panelClass: 'arlas-permission-dialog'
       });
     } else {
       this.show = false;

diff --git a/projects/arlas-toolkit/src/lib/components/reconnect-dialog/reconnect-dialog.component.css b/projects/arlas-toolkit/src/lib/components/reconnect-dialog/reconnect-dialog.component.css
@@ -16,3 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+::ng-deep.reconnect-dialog-panel.mdc-dialog__surface {
+    padding: 12px 24px;
+}
diff --git a/projects/arlas-toolkit/src/lib/components/tag/tag-dialog.component.css b/projects/arlas-toolkit/src/lib/components/tag/tag-dialog.component.css
@@ -20,3 +20,7 @@
 .tag-progress{
   margin: 5px 0;
 }
+
+::ng-deep.arlas-tag-dialog .mdc-dialog__surface {
+  padding: 0 15px;
+}
diff --git a/projects/arlas-toolkit/src/lib/components/tag/tag-management-dialog.component.css b/projects/arlas-toolkit/src/lib/components/tag/tag-management-dialog.component.css
@@ -65,3 +65,7 @@
 .inactive-tag .mat-mdc-cell{
   color : #cccccc;
 }
+
+::ng-deep.arlas-tag-dialog .mdc-dialog__surface {
+  padding: 0 15px;
+}
diff --git a/projects/arlas-toolkit/src/lib/components/tag/tag.component.ts b/projects/arlas-toolkit/src/lib/components/tag/tag.component.ts
@@ -62,12 +62,12 @@ export class TagComponent {
   ) { }
 
   public openDialog() {
-    this.dialogRef = this.dialog.open(TagDialogComponent, { data: null });
+    this.dialogRef = this.dialog.open(TagDialogComponent, { data: null, panelClass: 'arlas-tag-dialog' });
     this.dialogRef.componentInstance.tagEvent.subscribe(value => this.tagEvent.next(value));
   }
 
   public openManagement() {
-    this.dialogManagementRef = this.dialog.open(TagManagementDialogComponent, { data: null });
+    this.dialogManagementRef = this.dialog.open(TagManagementDialogComponent, { data: null, panelClass: 'arlas-tag-dialog' });
   }
 
   public removeProgress(itemId) {

diff --git a/projects/arlas-toolkit/src/lib/components/top-menu/about/about-dialog.component.css b/projects/arlas-toolkit/src/lib/components/top-menu/about/about-dialog.component.css
@@ -16,3 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+::ng-deep.arlas-about-dialog .mdc-dialog__surface {
+    padding: 12px 24px;
+}
diff --git a/projects/arlas-toolkit/src/lib/components/top-menu/about/about.component.ts b/projects/arlas-toolkit/src/lib/components/top-menu/about/about.component.ts
@@ -55,7 +55,7 @@ export class AboutComponent {
   public constructor(public dialog: MatDialog) { }
 
   public openDialog() {
-    this.dialogRef = this.dialog.open(AboutDialogComponent);
+    this.dialogRef = this.dialog.open(AboutDialogComponent, { panelClass: 'arlas-about-dialog' });
     this.dialogRef.componentInstance.pathToMd = this.pathToMd;
     this.dialogRef.componentInstance.extraTextData = this.extraTextData;
   }

diff --git a/projects/arlas-toolkit/src/lib/components/top-menu/top-menu.component.scss b/projects/arlas-toolkit/src/lib/components/top-menu/top-menu.component.scss
@@ -67,4 +67,9 @@ $avatar-color: #999;
             color: white;
         }
     }
+}
+
+::ng-deep.change-dialog .mdc-dialog__surface,
+::ng-deep.arlas-user-info-dialog .mdc-dialog__surface {
+    padding: 12px 24px;
 }
diff --git a/projects/arlas-toolkit/src/lib/components/top-menu/top-menu.component.ts b/projects/arlas-toolkit/src/lib/components/top-menu/top-menu.component.ts
@@ -168,7 +168,7 @@ export class TopMenuComponent implements OnInit {
   }
 
   public getUserInfos() {
-    this.dialog.open(UserInfosComponent);
+    this.dialog.open(UserInfosComponent, { panelClass: 'arlas-user-info-dialog' });
   }
 
   public getInitials(name) {

diff --git a/projects/arlas-toolkit/src/lib/services/error/error.service.ts b/projects/arlas-toolkit/src/lib/services/error/error.service.ts
@@ -47,7 +47,8 @@ export class ErrorService {
         disableClose: true, data: {
           error,
           forceAction
-        }
+        },
+        panelClass: 'arlas-error-dialog'
       });
     }
   }
@@ -58,7 +59,8 @@ export class ErrorService {
         disableClose: true, data: {
           error: new BackendError(502, '', this.settingsService.getArlasHubUrl(),  service),
           forceAction: true
-        }
+        },
+        panelClass: 'arlas-error-dialog'
       });
     }
   }
@@ -69,7 +71,8 @@ export class ErrorService {
         disableClose: true, data: {
           error: new SettingsError(),
           forceAction: true
-        }
+        },
+        panelClass: 'arlas-error-dialog'
       });
     }
   }
@@ -80,7 +83,8 @@ export class ErrorService {
         disableClose: true, data: {
           error: new BackendError(status, message, this.settingsService.getArlasHubUrl(), service),
           forceAction: true
-        }
+        },
+        panelClass: 'arlas-error-dialog'
       });
     }
   }

diff --git a/projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts b/projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts
@@ -105,6 +105,9 @@ export class FetchInterceptorService {
   }
 
   public interceptInvalidConfig(dahsboardDeniedData: DeniedAccessData) {
-    this.dialog.open(DeniedAccessDialogComponent, { disableClose: true, data: dahsboardDeniedData });
+    this.dialog.open(DeniedAccessDialogComponent, {
+      disableClose: true, data: dahsboardDeniedData,
+      panelClass: 'arlas-error-dialog'
+    });
   }
 }