feat: use better ux for s89s icons

TitoMoi · Sep 17, 2023 · 85916d4 · 85916d4
1 parent 5ff7529
commit 85916d4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/app/assignment/image-assignment/image-assignment.component.css b/src/app/assignment/image-assignment/image-assignment.component.css
@@ -2,6 +2,10 @@
   background-color: inherit;
 }
 
+#pdfAcronim {
+  cursor: pointer;
+}
+
 .border-bottom {
   border-bottom: 2px solid gray;
 }

diff --git a/src/app/assignment/image-assignment/image-assignment.component.html b/src/app/assignment/image-assignment/image-assignment.component.html
@@ -168,10 +168,13 @@
           aria-label="icon"
           (click)="toPdf()"
         ></mat-icon>
-        <mat-chip *ngIf="isAllowedTypeForS89S()" (click)="toPdfS89S()">
-          <mat-icon matChipAvatar class="m-2" svgIcon="pdf" aria-label="icon"></mat-icon>
-          S89S
-        </mat-chip>
+
+        <mat-chip-listbox aria-label="Fish selection">
+          <mat-chip-option *ngIf="isAllowedTypeForS89S()" (click)="toPdfS89S()"
+            ><mat-icon matChipAvatar class="m-2" svgIcon="pdf" aria-label="icon"></mat-icon>
+            <span id="pdfAcronim">S89S</span></mat-chip-option
+          >
+        </mat-chip-listbox>
 
         <mat-icon
           class="m-2"

diff --git a/src/app/report/multiple-image-assignment/multiple-image-assignment.component.html b/src/app/report/multiple-image-assignment/multiple-image-assignment.component.html
@@ -22,10 +22,12 @@
         [matTooltip]="t('ICON_FOLDER')"
         (click)="createAssignmentsInFolder()"
       ></mat-icon>
-      <mat-chip (click)="toPdfS89S()">
-        <mat-icon matChipAvatar class="m-2" svgIcon="pdf" aria-label="icon"></mat-icon>
-        S89S
-      </mat-chip>
+      <mat-chip-listbox aria-label="Fish selection">
+        <mat-chip-option (click)="toPdfS89S()"
+          ><mat-icon matChipAvatar class="m-2" svgIcon="pdf" aria-label="icon"></mat-icon>
+          <span id="pdfAcronim">S89S</span></mat-chip-option
+        >
+      </mat-chip-listbox>
       <button
         *ngIf="assignmentsInFolderCreated"
         mat-raised-button