💄 add information icon tooltip

1024pix · Nov 4, 2024 · c6b408c · c6b408c
1 parent 78e783d
commit c6b408c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/orga/app/components/organization-participant/table-headers.gjs b/orga/app/components/organization-participant/table-headers.gjs
@@ -1,9 +1,11 @@
 import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
-import { not } from 'ember-truth-helpers';
+import { eq, not } from 'ember-truth-helpers';
 
 import { getColumnName } from '../../helpers/import-format.js';
 import Tooltip from '../certificability/tooltip';
@@ -38,7 +40,28 @@ export default class TableHeaders extends Component {
       </HeaderSort>
       <Header>{{t "pages.organization-participants.table.column.first-name"}}</Header>
       {{#each @customHeadings as |heading|}}
-        <Header>{{t (getColumnName heading)}}</Header>
+        <Header>
+          <div class="organization-participant-list-page__header-with-tooltip">
+            {{t (getColumnName heading)}}
+            {{#if (eq heading "ORALIZATION")}}
+              <PixTooltip @id="organization-participants-oralization-tooltip" @isWide="true">
+                <:triggerElement>
+                  <PixIcon
+                    @name="help"
+                    @plainIcon="true"
+                    aria-label={{t "pages.organization-participants.table.oralization-header-tooltip-aria-label"}}
+                    aria-describedby="organization-participants-oralization-tooltip"
+                  />
+                </:triggerElement>
+
+                <:tooltip>
+                  {{t "pages.organization-participants.table.oralization-header-tooltip"}}
+                </:tooltip>
+              </PixTooltip>
+            {{/if}}
+
+          </div>
+        </Header>
       {{/each}}
 
       {{#unless this.currentUser.canAccessMissionsPage}}

diff --git a/orga/app/styles/pages/authenticated/organization-participants/list.scss b/orga/app/styles/pages/authenticated/organization-participants/list.scss
@@ -17,6 +17,18 @@ $margin-right: 32px;
     justify-content: center;
   }
 
+  &__header-with-tooltip {
+    display: flex;
+
+    .pix-tooltip {
+      margin-left: 5px;
+
+      &__trigger-element {
+        display: flex;
+      }
+    }
+  }
+
   &__actions-header {
     width: 10%;
 

diff --git a/orga/translations/en.json b/orga/translations/en.json
@@ -1120,6 +1120,7 @@
         },
         "description": "Table of participants, sorted by name.",
         "empty": "No participants",
+        "oralization-header-tooltip": "Activate “read the instruction” to have the student's oral transcription.",
         "row-title": "Participant",
         "row-value": {
           "oralization": {

diff --git a/orga/translations/fr.json b/orga/translations/fr.json
@@ -1126,6 +1126,7 @@
         },
         "description": "Tableau des participants trié par nom.",
         "empty": "Aucun participant",
+        "oralization-header-tooltip": "Activer “lecture de la consigne” permettra à l'élève d’avoir sa transcription orale.",
         "row-title": "Participant",
         "row-value": {
           "oralization": {

diff --git a/orga/translations/nl.json b/orga/translations/nl.json
@@ -1180,7 +1180,8 @@
         },
         "description": "Tabel met deelnemers gesorteerd op naam.",
         "empty": "Geen deelnemers",
-        "row-title": "Deelnemer"
+        "row-title": "Deelnemer",
+        "oralization-header-tooltip": "Door ‘leesinstructies’ te activeren, kan de student zijn mondelinge transcriptie krijgen."
       }
     },
     "participants-list": {