Merge pull request #864 from gisaia/feature/fixList

Fix: display icon on hover
gisaia · Sep 12, 2024 · 02d0405 · 02d0405
2 parents d4406e4 + 5d5f944
commit 02d0405
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 99 deletions.
diff --git a/...as-components/src/lib/components/results/result-grid-tile/result-grid-tile.component.html b/...as-components/src/lib/components/results/result-grid-tile/result-grid-tile.component.html
@@ -13,6 +13,7 @@
           {{action.label | translate}}
         </button>
       </div>
+      <mat-icon class="resultlist__md-grid-tile__selected--icon" *ngIf="displayInfoIcon">info_outline</mat-icon>
     </div>
     <div class="resultgrid__title-highlight-{{gridTile?.ishighLight}}">
       <span *ngIf="gridTile?.color" matTooltip="{{gridTile?.tooltip}}" class="tablet" [style.background-color]="gridTile?.color"></span>

diff --git a/...as-components/src/lib/components/results/result-grid-tile/result-grid-tile.component.scss b/...as-components/src/lib/components/results/result-grid-tile/result-grid-tile.component.scss
@@ -170,3 +170,21 @@ $img-proportion: 85%;
   width: 100%;
   background-color: black;
 }
+
+.resultlist__md-grid-tile {
+  margin-top: 5px;
+
+  &__selected--icon{
+    position: absolute;
+    z-index: 1;
+    top: 15px;
+    color: white;
+    background-color: transparent;
+    opacity: 50%;
+    font-size: 72px;
+    height: 72px !important;
+    width: 72px !important;
+    pointer-events: auto;
+    cursor: default;
+  }
+}
diff --git a/...rlas-components/src/lib/components/results/result-grid-tile/result-grid-tile.component.ts b/...rlas-components/src/lib/components/results/result-grid-tile/result-grid-tile.component.ts
@@ -80,6 +80,12 @@ export class ResultGridTileComponent extends ItemComponent implements OnInit {
   */
   @Input() public idFieldName: string;
 
+  /**
+  * @Input
+  * @description Display or not big full info icon on the grid.
+  */
+  @Input() public  displayInfoIcon = false;
+
   /**
    * @Output
    * @description Emits the event of applying the specified action on the specified item.

diff --git a/projects/arlas-components/src/lib/components/results/result-item/result-item.component.html b/projects/arlas-components/src/lib/components/results/result-item/result-item.component.html
@@ -17,12 +17,12 @@
       </label>
       <ng-template #labelModeIsDefined>
         <label *ngIf="cellBackgroundStyle === CellBackgroundStyleEnum.filled && column.useColorService" class="resultitem__cell--label resultitem__cell--label__filled"
-          [style.background-color]="colors[rowItem?.itemData.get(column.fieldName)]['color']" 
-          [style.color]="colors[rowItem?.itemData.get(column.fieldName)]['textColor']">
+          [style.background-color]="!!colors[rowItem?.itemData.get(column.fieldName)] ? colors[rowItem?.itemData.get(column.fieldName)]['color'] : 'transparent'" 
+          [style.color]="!!colors[rowItem?.itemData.get(column.fieldName)] ?  colors[rowItem?.itemData.get(column.fieldName)]['textColor'] : 'black'">
           {{rowItem?.itemData.get(column.fieldName) | formatNumber:NUMBER_FORMAT_CHAR}}{{column.dataType}}
         </label>
         <label *ngIf="cellBackgroundStyle === CellBackgroundStyleEnum.outlined && column.useColorService && !!rowItem?.itemData.get(column.fieldName) && rowItem?.itemData.get(column.fieldName) !== ''" class="resultitem__cell--label resultitem__cell--label__outlined"
-          [style.border-color]="colors[rowItem?.itemData.get(column.fieldName)]['color']"  >
+          [style.border-color]="!!colors[rowItem?.itemData.get(column.fieldName)] ? colors[rowItem?.itemData.get(column.fieldName)]['color'] : 'black'"  >
           {{rowItem?.itemData.get(column.fieldName) | formatNumber:NUMBER_FORMAT_CHAR}}{{column.dataType}}
         </label>
       </ng-template>