feat: improve display of grid items

gisaia · Oct 16, 2023 · e7dcd80 · e7dcd80
1 parent 18c4a0d
commit e7dcd80
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 43 deletions.
diff --git a/projects/arlas-components/src/lib/components/results/model/item.ts b/projects/arlas-components/src/lib/components/results/model/item.ts
@@ -99,6 +99,7 @@ export class Item {
   public position: number;
   /**
    * @description The material grid icon.
+   * @deprecated
    */
   public icon: string;
   /**

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
@@ -2,29 +2,21 @@
   <div class="resultgrid--container resultgrid--container-highlight-{{gridTile?.ishighLight}}" color="primary"[style.border-color]="gridTile?.color ? gridTile?.color : 'none'">
     <mat-icon *ngIf="gridTile?.isChecked && !gridTile?.isindeterminated" (click)="setSelectedItem()" class="primary resultgrid__icon_check mat-icon material-icons">check_box</mat-icon>
     <mat-icon *ngIf="!gridTile?.isChecked && !gridTile?.isindeterminated" (click)="setSelectedItem()" class="primary resultgrid__icon_check mat-icon material-icons">check_box_outline_blank</mat-icon>
-       <mat-icon *ngIf="gridTile?.isindeterminated" (click)="determinateItem()" class="primary resultgrid__icon_check mat-icon material-icons">indeterminate_check_box</mat-icon>
-      <div id="{{'grid-tile-' + gridTile?.identifier}}" (click)="setClickedOnItem()" (mouseover)="showCellTooltip()" #cellTooltip="matTooltip" matTooltip="{{SHOW_IMAGE | translate}}"  class="resultgrid__img {{gridTile?.iconCssClass}}">
-        <img [defaultImage]="options?.defautlImgUrl"  [lazyLoad]="gridTile?.urlThumbnail" 
-          [class.contain_thumbnail]="thumbnailFit === ThumbnailFitEnum.contain" [class.height_thumbnail]="thumbnailFit === ThumbnailFitEnum.height"
-          [class.width_thumbnail]="thumbnailFit === ThumbnailFitEnum.width">
-        <div *ngIf="options?.showActionsOnhover" class="grid_actions">
-          <button *ngFor="let action of gridTile?.actions" (mouseover)="hideCellTooltip($event)" (click)="triggerActionOnItem($event, action)" matTooltip="{{action.tooltip | translate}}"
-            class="resultitem-grid__actions {{action.id}}-onhover-action {{action.cssClass}}-onhover-action">
-            {{action.label | translate}}
-          </button>
-        </div>
+    <mat-icon *ngIf="gridTile?.isindeterminated" (click)="determinateItem()" class="primary resultgrid__icon_check mat-icon material-icons">indeterminate_check_box</mat-icon>
+    <div id="{{'grid-tile-' + gridTile?.identifier}}" (click)="setClickedOnItem()" (mouseover)="showCellTooltip()" #cellTooltip="matTooltip" matTooltip="{{SHOW_IMAGE | translate}}"  class="resultgrid__img {{gridTile?.iconCssClass}}">
+      <img [defaultImage]="options?.defautlImgUrl"  [lazyLoad]="gridTile?.urlThumbnail" 
+        [class.contain_thumbnail]="thumbnailFit === ThumbnailFitEnum.contain" [class.height_thumbnail]="thumbnailFit === ThumbnailFitEnum.height"
+        [class.width_thumbnail]="thumbnailFit === ThumbnailFitEnum.width">
+      <div *ngIf="options?.showActionsOnhover" class="grid_actions">
+        <button *ngFor="let action of gridTile?.actions" (mouseover)="hideCellTooltip($event)" (click)="triggerActionOnItem($event, action)" matTooltip="{{action.tooltip | translate}}"
+          class="resultitem-grid__actions {{action.id}}-onhover-action {{action.cssClass}}-onhover-action">
+          {{action.label | translate}}
+        </button>
       </div>
-      <div class="resultgrid__title-highlight-{{gridTile?.ishighLight}}">
-      <mat-icon *ngIf="gridTile?.color; else colorNotDefined" class="primary mat-icon material-icons resultgrid__icon_title"
-        [style.color]="gridTile?.color" matTooltip="{{gridTile?.tooltip}}">{{gridTile?.icon}}
-      </mat-icon>
-      <ng-template #colorNotDefined>
-        <mat-icon class="primary mat-icon material-icons resultgrid__icon_title  resultgrid__icon_title-{{gridTile?.iconCssClass}}"
-          matTooltip="{{gridTile?.tooltip}}">{{gridTile?.icon}}
-        </mat-icon>
-      </ng-template>
+    </div>
+    <div class="resultgrid__title-highlight-{{gridTile?.ishighLight}}">
+      <span *ngIf="gridTile?.color" class="tablet" [style.background-color]="gridTile?.color"></span>
       <span class="resultgrid__title  resultgrid__title-{{gridTile?.iconCssClass}}" > {{gridTile?.title}} </span>
     </div>
   </div>
-
 </div>
diff --git a/...-grid-tile/result-grid-tile.component.css → ...grid-tile/result-grid-tile.component.scss b/...-grid-tile/result-grid-tile.component.css → ...grid-tile/result-grid-tile.component.scss
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+$img-proportion: 85%;
+
 .resultgrid {
   width:100%;
   height:100%;
@@ -92,8 +94,9 @@
 
 .resultgrid__img /* @doc Sets the image style.*/
 {
+  box-sizing: border-box;
   display: flex;
-  height: 80%;
+  height: $img-proportion;
   width: 100%;
   padding: 2px;
   background-position: center center;
@@ -104,38 +107,40 @@
   background-color: #000;
 }
 
-.resultgrid__title-highlight- /* @doc Sets the grid title style.*/
-{
+.resultgrid__title-highlight- /* @doc Sets the grid title style.*/,
+.resultgrid__title-highlight-false,
+.resultgrid__title-highlight-true {
+  height: calc(100% - $img-proportion);
   color: #000;
   font-family: "Roboto", "Helvetica Neue", sans-serif;
-  font-size: 0.65em;
+  font-size: 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 5px;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .tablet {
+    height: 100%;
+    max-height: 20px;
+    aspect-ratio: 1;
+    // Very high value to have a round result
+    border-radius: 100px;
+    margin-right: 2px;
+  }
+
+  .resultgrid__title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
 .resultgrid__title-highlight-false /* @doc Sets the grid title style.*/
 {
-  color: #000;
-  font-family: "Roboto", "Helvetica Neue", sans-serif;
-  font-size: 0.65em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 5px;
   opacity: 0.3;
 }
 
-.resultgrid__title-highlight-true {
-  font-family: "Roboto", "Helvetica Neue", sans-serif;
-  font-size: 0.65em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 5px;
-}
-
 .fill-images{
   object-fit: cover;
   width: 100%;

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
@@ -29,7 +29,7 @@ import { Action, ElementIdentifier, ResultListOptions } from '../utils/results.u
 @Component({
   selector: 'arlas-result-grid-tile',
   templateUrl: './result-grid-tile.component.html',
-  styleUrls: ['./result-grid-tile.component.css']
+  styleUrls: ['./result-grid-tile.component.scss']
 })
 export class ResultGridTileComponent extends ItemComponent implements OnInit {
   public SHOW_IMAGE = 'Click to show details';

diff --git a/projects/arlas-components/src/lib/components/results/utils/results.utils.ts b/projects/arlas-components/src/lib/components/results/utils/results.utils.ts
@@ -52,6 +52,9 @@ export interface FieldsConfiguration {
   urlThumbnailTemplate?: string;
   titleFieldNames?: Array<Field>;
   tooltipFieldNames?: Array<Field>;
+  /**
+   * @deprecated
+   */
   icon?: string;
   iconCssClass?: string;
   iconColorFieldName?: string;