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

gisaia · Feb 19, 2025 · 9455c32 · 9455c32
1 parent 29f42b3
commit 9455c32
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/projects/arlas-toolkit/src/lib/components/bookmark/bookmark.component.scss b/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 {

diff --git a/projects/arlas-toolkit/src/lib/components/filter-shortcut/filter-shortcut.component.scss b/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 {

diff --git a/projects/arlas-toolkit/src/lib/components/search/search-dialog.component.html b/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>

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
@@ -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;
+            }
+        }
+    }
 }
diff --git a/projects/arlas-toolkit/src/lib/components/timeline/timeline/timeline.component.scss b/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;
 }