feat: added tooltips to explain certain calendar filters in more detail

scout-ch · Nov 2, 2024 · 749ae01 · 749ae01
1 parent a4307a6
commit 749ae01
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "react-markdown": "^9.0.1",
     "react-router": "^6.22.0",
     "react-router-dom": "^6.22.0",
+    "react-tooltip": "^5.28.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {

diff --git a/src/i18n/de.json b/src/i18n/de.json
@@ -19,6 +19,7 @@
       "startDate": "Erster Lagertag",
       "responsible": "Verantwortlich",
       "puffer": "Puffer (Tage)",
+      "pufferDescription": "Reduziert das Datum der Termine um die angegebene Anzahl an Tagen.",
       "responsibleOptions": {
         "all": "Alle",
         "ll": "Lagerleitung",
@@ -27,6 +28,7 @@
       },
       "designation": "Bezeichnung",
       "defaultDesignation": "Lagerdaten",
+      "designationDescription": "Diese Bezeichnung wird beim Herunterladen für den Dateinamen und die Kalendereinträge verwendet.",
       "resetValues": "Werte zurücksetzen",
       "download": "Herunterladen",
       "ics": {

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -19,6 +19,7 @@
       "startDate": "Premier jour du camp",
       "responsible": "Responsable",
       "puffer": "Marge (jours)",
+      "pufferDescription": "Réduit la date des rendez-vous du nombre de jours indiqué.",
       "responsibleOptions": {
         "all": "Tous",
         "ll": "Responsable de camp",
@@ -27,6 +28,7 @@
       },
       "designation": "Désignation",
       "defaultDesignation": "Données du camp",
+      "designationDescription": "Cette désignation est utilisée pour le nom du fichier et les entrées du calendrier lors du téléchargement.",
       "resetValues": "Réinitialiser les valeurs",
       "download": "Télécharger",
       "ics": {

diff --git a/src/i18n/it.json b/src/i18n/it.json
@@ -19,6 +19,7 @@
       "startDate": "Primo giorno del campo",
       "responsible": "Responsabile",
       "puffer": "Tampone (giorni)",
+      "pufferDescription": "Riduce la data degli appuntamenti del numero di giorni specificato.",
       "responsibleOptions": {
         "all": "Tutti",
         "ll": "Capo campo",
@@ -27,6 +28,7 @@
       },
       "designation": "Designazione",
       "defaultDesignation": "Dati del campo",
+      "designationDescription": "Questa designazione viene utilizzata per il nome del file e per le voci del calendario durante il download.",
       "resetValues": "Azzeramento dei valori",
       "download": "Scaricare",
       "ics": {

diff --git a/src/pages/calendar/components/CalendarForm.tsx b/src/pages/calendar/components/CalendarForm.tsx
@@ -8,6 +8,9 @@ import Loading from "../../../components/loading/Loading";
 import { HApiTask, loadTasks } from "../../../apis/hering-api";
 import i18n from "i18next";
 import './calendar-form.less'
+import { Tooltip } from 'react-tooltip'
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const dateFormat = 'yyyy-MM-dd'
 const initialStartDate = format(Date.now(), dateFormat)
@@ -186,17 +189,41 @@ function CalendarForm() {
                     </div>
 
                     <div className='form-entry'>
-                        <label htmlFor={"puffer"}>
-                            {t('calendarPage.puffer')}
-                        </label>
+                        <div className="label-with-icon">
+                            <label htmlFor={"puffer"}>
+                                {t('calendarPage.puffer')}
+                            </label>
+                            <div>
+                                <FontAwesomeIcon icon={faCircleInfo} data-tooltip-id="buffer-tooltip"/>
+                                <Tooltip id="buffer-tooltip">
+                                    <div style={{ maxWidth: '200px' }}>
+                                        {t('calendarPage.pufferDescription')}
+                                    </div>
+                                </Tooltip>
+                            </div>
+                        </div>
+
                         <input type="number" id="puffer" name="puffer" value={puffer.toString()}
                                onChange={onBufferChanged}/>
                     </div>
 
                     <div className='form-entry'>
-                        <label htmlFor="calendar-designation">
-                            {t('calendarPage.designation')}
-                        </label>
+                        <div className="label-with-icon">
+                            <label htmlFor="calendar-designation">
+                                {t('calendarPage.designation')}
+                            </label>
+                            <div>
+                                <FontAwesomeIcon icon={faCircleInfo} data-tooltip-id="designation-tooltip"/>
+                                <Tooltip id="designation-tooltip">
+                                    <div style={{
+                                        maxWidth: '200px'
+                                    }}>
+                                        {t('calendarPage.designationDescription')}
+                                    </div>
+                                </Tooltip>
+                            </div>
+                        </div>
+
                         <div className="input">
                             <input type='text' name='calendar-designation' id="calendar-designation"
                                    value={designation}

diff --git a/src/pages/calendar/components/calendar-form.less b/src/pages/calendar/components/calendar-form.less
@@ -37,6 +37,12 @@
     select {
       padding: 4px 0;
     }
+
+    .label-with-icon {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+    }
   }
 
   .download {

diff --git a/yarn.lock b/yarn.lock
@@ -310,6 +310,26 @@
     lodash.isundefined "^3.0.1"
     lodash.uniq "^4.5.0"
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@fortawesome/[email protected]":
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
@@ -773,6 +793,11 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
+classnames@^2.3.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -2018,6 +2043,14 @@ [email protected], react-router@^6.22.0:
   dependencies:
     "@remix-run/router" "1.20.0"
 
+react-tooltip@^5.28.0:
+  version "5.28.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.0.tgz#c7b5343ab2d740a428494a3d8315515af1f26f46"
+  integrity sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    classnames "^2.3.0"
+
 react@^18.2.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"