fix: realign search collection/timeline legend/shortcut/bookmark css

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.2",
+    "arlas-web-components": "~27.0.3",
     "arlas-web-contributors": "~27.0.0",
-    "arlas-map": "~27.0.2",
+    "arlas-map": "~27.0.3",
     "cli-color": "^1.2.0",
     "core-js": "~3.26.1",
     "fetch-intercept": "^2.3.1",

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.2",
+    "arlas-web-components": "~27.0.3",
     "arlas-web-contributors": "~27.0.0",
-    "arlas-map": "~27.0.2",
+    "arlas-map": "~27.0.3",
     "cli-color": "^1.2.0",
     "fetch-intercept": "^2.3.1",
     "hopscotch": "0.3.1",

projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss

@@ -18,7 +18,7 @@
  */
 
 ::ng-deep.bookmark-manager .mdc-dialog__surface {
-  padding: 12px 24px;
+  padding: 24px 24px 12px 24px
 }
 
 .bookmark-table-items {

projects/arlas-toolkit/src/lib/components/filter-shortcut/filter-shortcut.component.scss

@@ -93,7 +93,7 @@ $border-color: #a1a1a1;
         ::ng-deep.powerbar__powerbar--top-group {
             height: 20px;
         }
-        ::ng-deep .powerbarTitle {
+        ::ng-deep .powerbars--title {
             display: none;
         }
         ::ng-deep.powerbars__powerbar {

projects/arlas-toolkit/src/lib/components/search/search-dialog.component.html

@@ -23,7 +23,7 @@
     </div>
     <ul class="autocomplete" *ngIf="searchContributors.length === 1">
         <li *ngFor="let search of filteredSearch | async" class="search-option"
-            (click)="clickItemSearch(search.key_as_string)">
+            (click)="clickItemSearch(search.key_as_string)" [matTooltip]="search.key_as_string" matTooltipPosition="after">
             <span class="key">{{ search.key_as_string }}</span>
             <span class="count">{{ search.count }}</span>
         </li>
@@ -37,12 +37,12 @@
 
     <ul class="autocomplete" *ngIf="searchContributors.length > 1">
         <li *ngFor="let search of filteredSearch | async" class="search-option"
-            (click)="clickItemSearch(search.key_as_string)">
+            (click)="clickItemSearch(search.key_as_string)" [matTooltip]="search.key_as_string" matTooltipPosition="after">
             <span class="key">{{ search.key_as_string }}</span>
             <div class="flex-span collections-count" >
             <div *ngFor="let s of search.collections" class="flex-span">
                 <span class="flex-span">
-                    <mat-icon [matTooltip]="s.collection | getCollectionDisplayName | translate" 
+                    <mat-icon [matTooltip]="s.collection | getCollectionDisplayName | translate"
                     [style.color]="s.color"
                         class="chip-collection">fiber_manual_record</mat-icon>
                     <span class="count">{{ s.count }}</span>

projects/arlas-toolkit/src/lib/components/search/search-dialog.component.scss

@@ -49,6 +49,7 @@
     display: flex;
     flex-direction: column;
     padding: 4px;
+    overflow-x: clip;
 
     .arlas-search-container {
         display: flex;
@@ -78,6 +79,9 @@
         }
 
         .close {
+            padding: 0;
+            --mdc-icon-button-state-layer-size: 24px;
+
             .icon {
                 font-size: 18px;
                 height: 18px;
@@ -111,11 +115,13 @@
 
             span {
                 padding: 0 4px;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
             .count {
                 color: #5a5555;
                 position: relative;
-                top: 10px;
+                top: 5px;
             }
         }
     }
@@ -127,33 +133,32 @@
     box-shadow: none;
 }
 
-::ng-deep .settings-list .mat-menu-content {
-    display: flex;
-    flex-direction: column;
-    margin: 5px;
-    padding: 2px;
-    font-size: smaller;
-}
-
-
-
-::ng-deep .settings-list .mat-checkbox .mat-checkbox-frame {
-    transform: scale(0.8);
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 3px;
-}
-
-::ng-deep .settings-list .mat-checkbox-checked .mat-checkbox-background {
-    transform: scale(0.8);
-    background-color: transparent;
-}
-
-::ng-deep .settings-list .mat-checkbox-inner-container {
-    margin-right: 0px;
-
-}
+::ng-deep .settings-list {
+    .mat-mdc-menu-content {
+        display: flex;
+        flex-direction: column;
+        margin: 5px;
+        padding: 2px;
+        font-size: 12px;
+
+        .mat-mdc-checkbox .mdc-checkbox {
+            --mdc-checkbox-state-layer-size: 18px;
+            --mdc-checkbox-selected-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-focus-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-hover-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-pressed-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-checkmark-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-unselected-focus-icon-color: var(--arlas-search-checkbox-color, grey);
+            --mdc-checkbox-selected-focus-state-layer-color: var(--arlas-search-checkbox-color, grey);
+            transform: scale(0.8);
+
+            &__ripple {
+                display: none;
+            }
 
-::ng-deep .settings-list mat-checkbox .mat-checkbox-checkmark-path {
-    stroke: grey !important;
+            &__background {
+                background-color: transparent !important;
+            }
+        }
+    }
 }

projects/arlas-toolkit/src/lib/components/timeline/timeline/timeline.component.scss

@@ -48,7 +48,7 @@ $large-icon-size: 48px;
 }
 
 .arlas-timeline--legend-collection {
-  font-size: 0.9em;
+  font-size: 15px;
   white-space: nowrap;
 }
 

projects/arlas-toolkit/src/lib/services/error/error.service.ts

@@ -27,6 +27,8 @@ import { AuthorisationError } from '../../tools/errors/authorisation-error';
 import { BackendError } from '../../tools/errors/backend-error';
 import { SettingsError } from '../../tools/errors/settings-error';
 import { ArlasCollaborativesearchService } from '../collaborative-search/arlas.collaborative-search.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
@@ -38,7 +40,9 @@ export class ErrorService {
   public constructor(
     private readonly dialog: MatDialog,
     private readonly settingsService: ArlasSettingsService,
-    private readonly arlasCollaborationService: ArlasCollaborativesearchService
+    private readonly arlasCollaborationService: ArlasCollaborativesearchService,
+    private readonly snackBar: MatSnackBar,
+    private readonly translate: TranslateService
   ) { }
 
   public emitAuthorisationError(error: AuthorisationError, forceAction = true) {
@@ -77,15 +81,19 @@ export class ErrorService {
     }
   }
 
-  public emitBackendError(status: number, message: string, service: string) {
-    if (!this.dialog.openDialogs || this.dialog.openDialogs.length === 0) {
-      this.dialog.open(DeniedAccessDialogComponent, {
-        disableClose: true, data: {
-          error: new BackendError(status, message, this.settingsService.getArlasHubUrl(), service),
-          forceAction: true
-        },
-        panelClass: 'arlas-error-dialog'
-      });
+  public emitBackendError(status: number, message: string, service: string, mode: 'snackbar' | 'dialog' = 'dialog') {
+    if (mode === 'dialog') {
+      if (!this.dialog.openDialogs || this.dialog.openDialogs.length === 0) {
+        this.dialog.open(DeniedAccessDialogComponent, {
+          disableClose: true, data: {
+            error: new BackendError(status, message, this.settingsService.getArlasHubUrl(), service),
+            forceAction: true
+          },
+          panelClass: 'arlas-error-dialog'
+        });
+      }
+    } else if (mode === 'snackbar') {
+      this.snackBar.open(message, this.translate.instant('Close'), { panelClass: 'arlas-error-snackbar' });
     }
   }
 

projects/arlas-toolkit/src/lib/services/interceptor/fetch-interceptor.service.ts

@@ -91,7 +91,7 @@ export class FetchInterceptorService {
             } else if (code === 404) {
               message = marker('The requested data does not exist.');
             }
-            this.errorService.emitBackendError(code, message, marker('ARLAS-server'));
+            this.errorService.emitBackendError(code, message, marker('ARLAS-server'), 'snackbar');
           }
           return response;
         },

projects/arlas-toolkit/src/lib/toolkit.component.css → projects/arlas-toolkit/src/lib/toolkit.component.scss

@@ -16,3 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+::ng-deep .arlas-error-snackbar {
+    --mdc-snackbar-supporting-text-color: white;
+    --mat-snack-bar-button-color: white;
+    --mdc-snackbar-container-color: rgb(212, 17, 17);
+}

projects/arlas-toolkit/src/lib/toolkit.component.ts

@@ -32,7 +32,7 @@ import { ErrorService } from './services/error/error.service';
   selector: 'arlas-tool-root',
   templateUrl: './toolkit.component.html',
   providers: [Location],
-  styleUrls: ['./toolkit.component.css']
+  styleUrls: ['./toolkit.component.scss']
 })
 export class ToolkitComponent implements AfterViewInit, OnInit, OnDestroy {