Add fix to inspector picker

CSCfi · Oct 15, 2024 · 218f0e9 · 218f0e9
1 parent 485da2c
commit 218f0e9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/ui/src/app/exam/editor/basic/exam-inspector-picker.component.html b/ui/src/app/exam/editor/basic/exam-inspector-picker.component.html
@@ -60,14 +60,19 @@
         <div class="row">
             <div class="col-md-9 offset-md-3">
                 @for (inspection of examInspections; track inspection) {
-                    {{ inspection.user.firstName }} {{ inspection.user.lastName }} ({{ inspection.user.email }})
-                    <button
-                        class="btn btn-sm btn-link px-0"
-                        (click)="removeInspector(inspection.id)"
-                        title="{{ 'i18n_remove' | translate }}"
-                    >
-                        <i class="bi bi-x-lg"></i>
-                    </button>
+                    <div class="ms-1 row" [ngClass]="{ 'hover-grey': examInspections.length !== 1 }">
+                        <div class="row col-8">
+                            {{ inspection.user.firstName }} {{ inspection.user.lastName }} ({{ inspection.user.email }})
+                        </div>
+                        <!-- Remove button -->
+                        <button
+                            class="btn btn-danger btn-sm ms-1 w-auto m-1"
+                            (click)="removeInspector(inspection.id)"
+                            [attr.aria-label]="inspection.user.firstName + ' ' + inspection.user.lastName"
+                        >
+                            {{ 'i18n_remove' | translate }}
+                        </button>
+                    </div>
                 }
             </div>
         </div>

diff --git a/ui/src/app/exam/editor/basic/exam-inspector-picker.component.ts b/ui/src/app/exam/editor/basic/exam-inspector-picker.component.ts
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: EUPL-1.2
 
+import { NgClass } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import type { OnInit } from '@angular/core';
 import { Component, Input } from '@angular/core';
@@ -19,7 +20,7 @@ import type { User } from 'src/app/session/session.model';
     selector: 'xm-exam-inspector-picker',
     templateUrl: './exam-inspector-picker.component.html',
     standalone: true,
-    imports: [NgbPopover, FormsModule, NgbTypeahead, TranslateModule],
+    imports: [NgbPopover, FormsModule, NgbTypeahead, TranslateModule, NgClass],
     styles: '.vbottom { vertical-align: bottom !important }',
 })
 export class ExamInspectorSelectorComponent implements OnInit {

diff --git a/ui/src/app/exam/exam.shared.scss b/ui/src/app/exam/exam.shared.scss
@@ -29,6 +29,3 @@
     font-size: 12px;
     text-transform: uppercase;
 }
-.hover-grey:hover {
-  background: #dedede !important;
-}
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
@@ -207,3 +207,7 @@ textarea.ng-invalid {
         0px 0px 0px 1.5px rgb(255, 255, 255),
         0px 0px 0px 4px rgb(68, 120, 247) !important;
 }
+
+.hover-grey:hover {
+  background: #dedede !important;
+}