Merge pull request #911 from gisaia/fix/search

fix: improve dialog layout
gisaia · Feb 17, 2025 · 51b3f11 · 51b3f11
2 parents f19e56f + 191b9bb
commit 51b3f11
Show file tree

Hide file tree

Showing 24 changed files with 98 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,9 +47,9 @@
     "arlas-permissions-api": "27.0.0",
     "arlas-persistence-api": "27.0.0",
     "arlas-tagger-api": "27.0.0",
-    "arlas-web-components": "~27.0.1",
+    "arlas-web-components": "~27.0.2",
     "arlas-web-contributors": "~27.0.0",
-    "arlas-map": "~27.0.1",
+    "arlas-map": "~27.0.2",
     "cli-color": "^1.2.0",
     "core-js": "~3.26.1",
     "fetch-intercept": "^2.3.1",

diff --git a/projects/arlas-toolkit/package.json b/projects/arlas-toolkit/package.json
@@ -45,9 +45,9 @@
     "arlas-permissions-api": "27.0.0",
     "arlas-persistence-api": "27.0.0",
     "arlas-tagger-api": "27.0.0",
-    "arlas-web-components": "~27.0.1",
+    "arlas-web-components": "~27.0.2",
     "arlas-web-contributors": "~27.0.0",
-    "arlas-map": "~27.0.1",
+    "arlas-map": "~27.0.2",
     "cli-color": "^1.2.0",
     "fetch-intercept": "^2.3.1",
     "hopscotch": "0.3.1",

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-menu/bookmark-menu.component.ts b/projects/arlas-toolkit/src/lib/components/bookmark-menu/bookmark-menu.component.ts
@@ -92,7 +92,7 @@ export class BookmarkMenuComponent implements OnInit, OnDestroy {
 
   public openDialogAdd() {
     if (!this.addBookmarkDisabled) {
-      this.dialog.open(BookmarkAddDialogComponent, { data: { name: null } });
+      this.dialog.open(BookmarkAddDialogComponent, { data: { name: null }, id: 'add-bookmark-dialog' });
     }
   }
 
@@ -104,7 +104,4 @@ export class BookmarkMenuComponent implements OnInit, OnDestroy {
     this._onDestroy$.next(true);
     this._onDestroy$.complete();
   }
-
-
-
 }
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
@@ -17,19 +17,21 @@
  * under the License.
  */
 
-// TODO: To override globally
-::ng-deep.mdc-dialog__surface {
-  padding: 24px;
+ ::ng-deep #add-bookmark-dialog .mat-mdc-dialog-surface {
+  padding: 12px 24px;
 }
 
 .bookmark__add {
   padding: 0;
 
   &--title {
-    margin: 0 0 20px;
     padding: 0;
 
-    .mdc-dialog__title::before {
+    --mdc-dialog-subhead-weight: 700;
+    --mdc-dialog-subhead-tracking: 0;
+    --mdc-dialog-subhead-size: 20px;
+
+    .mat-mdc-dialog-title::before {
       height: 0;
       display: block;
     }

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,14 @@
  * under the License.
  */
 
+::ng-deep.bookmark-manager .mdc-dialog__surface {
+  padding: 12px 24px;
+}
+
 .bookmark-table-items {
   max-height: 60vh;
   overflow-y: auto;
-  padding-top: 24px;
+  min-width: unset;
 
   .mat-column-checked {
     flex: 0 0 50px;

diff --git a/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.ts b/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.ts
@@ -140,7 +140,7 @@ export class BookmarkComponent {
   }
 
   public combine() {
-    const dialogRef = this.dialog.open(BookmarkAddDialogComponent, { data: { name: null } });
+    const dialogRef = this.dialog.open(BookmarkAddDialogComponent, { data: { name: null }, id: 'add-bookmark-dialog' });
     dialogRef.afterClosed().subscribe(bookmarkName => {
       if (bookmarkName) {
         this.bookmarkService.createCombineBookmark(bookmarkName, new Set(this.itemsCheck));
@@ -156,7 +156,7 @@ export class BookmarkComponent {
   }
 
   public updateBookMarkName(id, name){
-    const dialogRef = this.dialog.open(BookmarkAddDialogComponent, { data: { name: name } });
+    const dialogRef = this.dialog.open(BookmarkAddDialogComponent, { data: { name: name }, id: 'add-bookmark-dialog' });
     dialogRef.afterClosed().subscribe(bookmarkName => {
       if (bookmarkName) {
         this.bookmarkService.updateBookmarkName(bookmarkName, id);

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/search/search-dialog.component.scss b/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.scss
@@ -17,16 +17,19 @@
  * under the License.
  */
 
-$search-height: 30px;
-$search-width: 400px;
-
 @mixin search-text {
     font-size: 14px;
     padding: 6px 4px;
 }
 
 .flex-span {
-    display: flex
+    display: flex;
+    align-items: center;
+
+    ::ng-deep.mat-mdc-icon-button.mat-mdc-button-base {
+        padding: 0;
+        --mdc-icon-button-state-layer-size: 24px;
+    }
 }
 
 .scale-down {
@@ -40,30 +43,20 @@ $search-width: 400px;
 }
 
 .search-dialog {
-    // Search width + padding width
-    width: calc($search-width + 8px);
+    --arlas-search-width: 400px;
+    --arlas-search-height: 30px;
+
     display: flex;
     flex-direction: column;
-    padding: 0 4px;
+    padding: 4px;
 
     .arlas-search-container {
-        ::ng-deep .mat-icon-button {
-            width: 24px;
-            height: 24px;
-            line-height: 22px;
-        }
-
-        .mat-icon-button ::ng-deep .mat-button-focus-overlay {
-            display: none;
-        }
-
-        min-width: 150px;
         display: flex;
         align-items: center;
         border: 2px solid #0969da;
         border-radius: 4px;
-        height: $search-height;
-        width: $search-width;
+        height: var(--arlas-search-height);
+        width: var(--arlas-search-width);
 
         .search {
             margin: 2px 4px 0;
@@ -96,6 +89,7 @@ $search-width: 400px;
     .autocomplete {
         margin: 4px 2px;
         padding: 0;
+        width: var(--arlas-search-width);
 
         li:last {
             padding-bottom: 0;
@@ -127,12 +121,7 @@ $search-width: 400px;
     }
 }
 
-::ng-deep #arlas-search-dialog .mat-mdc-dialog-content {
-    padding: 0;
-    margin: -8px -16px;
-}
-
-::ng-deep.mat-mdc-dialog-container {
+::ng-deep #arlas-search-dialog .mat-mdc-dialog-container {
     border: 1px solid #a1a1a1;
     border-radius: 8px !important;
     box-shadow: none;

diff --git a/projects/arlas-toolkit/src/lib/components/search/search.component.ts b/projects/arlas-toolkit/src/lib/components/search/search.component.ts
@@ -142,7 +142,9 @@ export class SearchComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   public ngOnDestroy(): void {
-    this.retrieveSearchValueSubs.forEach(r => r.unsubscribe());
+    if (this.retrieveSearchValueSubs) {
+      this.retrieveSearchValueSubs.forEach(r => r.unsubscribe());
+    }
   }
 
   public search(value: string) {

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) {