From 749ae0152012136b8faf4cb72b4b548a67a7f191 Mon Sep 17 00:00:00 2001 From: Mario Zelger <15825982+mario-zelger@users.noreply.github.com> Date: Sat, 2 Nov 2024 01:09:04 +0100 Subject: [PATCH] feat: added tooltips to explain certain calendar filters in more detail --- package.json | 1 + src/i18n/de.json | 2 + src/i18n/fr.json | 2 + src/i18n/it.json | 2 + .../calendar/components/CalendarForm.tsx | 39 ++++++++++++++++--- .../calendar/components/calendar-form.less | 6 +++ yarn.lock | 33 ++++++++++++++++ 7 files changed, 79 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 42192f7..dcfce44 100644 --- 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 index 8b50790..55f1b95 100644 --- 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 index c6ffbe7..56bfcc6 100644 --- 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 index 93f0e3c..d058183 100644 --- 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 index 51625e5..7c3032c 100644 --- 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() {
- +
+ +
+ + +
+ {t('calendarPage.pufferDescription')} +
+ +
+
+
- +
+ +
+ + +
+ {t('calendarPage.designationDescription')} +
+ +
+
+