From aca258314f209c3150f5ba17d3f84ac43a67723e Mon Sep 17 00:00:00 2001 From: Benji Grant Date: Sun, 18 Jun 2023 09:59:02 +1000 Subject: [PATCH 1/4] Refactor translations --- frontend/src/i18n/locales/de/event.json | 13 +++++++------ frontend/src/i18n/locales/en-GB/event.json | 13 +++++++------ frontend/src/i18n/locales/en/event.json | 14 ++++++++------ frontend/src/i18n/locales/es/event.json | 13 +++++++------ frontend/src/i18n/locales/fr/event.json | 13 +++++++------ frontend/src/i18n/locales/hi/event.json | 13 +++++++------ frontend/src/i18n/locales/id/event.json | 13 +++++++------ frontend/src/i18n/locales/it/event.json | 13 +++++++------ frontend/src/i18n/locales/ja/event.json | 13 +++++++------ frontend/src/i18n/locales/ko/event.json | 13 +++++++------ frontend/src/i18n/locales/pt-BR/event.json | 13 +++++++------ frontend/src/i18n/locales/pt-PT/event.json | 13 +++++++------ frontend/src/i18n/locales/ru/event.json | 13 +++++++------ 13 files changed, 92 insertions(+), 78 deletions(-) diff --git a/frontend/src/i18n/locales/de/event.json b/frontend/src/i18n/locales/de/event.json index cbf3de4..fa2a586 100644 --- a/frontend/src/i18n/locales/de/event.json +++ b/frontend/src/i18n/locales/de/event.json @@ -54,14 +54,15 @@ "you": { "info": "Klicke und ziehe im Kalender unten, um deine Verfügbarkeit festzulegen", - "google_cal": { - "login": "Mit Google Kalender synchronisieren", + "select_all": "Alle wählen", + "select_none": "Keine wählen", + + "google_cal": "Mit Google Kalender synchronisieren", + "outlook_cal": "Mit Outlook Kalender synchronisieren", + "integration": { "logout": "ausloggen", - "select_all": "Alle wählen", - "select_none": "Keine wählen", "info": "Durch den Import wird deine aktuelle Verfügbarkeit überschrieben", "button": "Verfügbarkeit importieren" - }, - "outlook_cal": "Mit Outlook Kalender synchronisieren" + } } } diff --git a/frontend/src/i18n/locales/en-GB/event.json b/frontend/src/i18n/locales/en-GB/event.json index 4b563d0..1c76d6b 100644 --- a/frontend/src/i18n/locales/en-GB/event.json +++ b/frontend/src/i18n/locales/en-GB/event.json @@ -54,14 +54,15 @@ "you": { "info": "Click and drag the calendar below to set your availabilities", - "google_cal": { - "login": "Sync with Google Calendar", + "select_all": "Select all", + "select_none": "Select none", + "select_invert": "Invert selection", + "google_cal": "Sync with Google Calendar", + "outlook_cal": "Sync with Outlook Calendar", + "integration": { "logout": "log out", - "select_all": "Select all", - "select_none": "Select none", "info": "Importing will overwrite your current availability", "button": "Import availability" - }, - "outlook_cal": "Sync with Outlook Calendar" + } } } diff --git a/frontend/src/i18n/locales/en/event.json b/frontend/src/i18n/locales/en/event.json index 4b563d0..b6656ae 100644 --- a/frontend/src/i18n/locales/en/event.json +++ b/frontend/src/i18n/locales/en/event.json @@ -54,14 +54,16 @@ "you": { "info": "Click and drag the calendar below to set your availabilities", - "google_cal": { - "login": "Sync with Google Calendar", + "select_all": "Select all", + "select_none": "Select none", + "select_invert": "Invert selection", + + "google_cal": "Sync with Google Calendar", + "outlook_cal": "Sync with Outlook Calendar", + "integration": { "logout": "log out", - "select_all": "Select all", - "select_none": "Select none", "info": "Importing will overwrite your current availability", "button": "Import availability" - }, - "outlook_cal": "Sync with Outlook Calendar" + } } } diff --git a/frontend/src/i18n/locales/es/event.json b/frontend/src/i18n/locales/es/event.json index ed123c5..24e7d23 100644 --- a/frontend/src/i18n/locales/es/event.json +++ b/frontend/src/i18n/locales/es/event.json @@ -54,14 +54,15 @@ "you": { "info": "Haga clic y arrastre el calendario a continuación para configurar sus disponibilidades", - "google_cal": { - "login": "Sincronizar con Google Calendar", + "select_all": "Seleccionar todo", + "select_none": "Seleccionar ninguno", + + "google_cal": "Sincronizar con Google Calendar", + "outlook_cal": "Sincronizar con el calendario de Outlook", + "integration": { "logout": "cerrar sesión", - "select_all": "Seleccionar todo", - "select_none": "Seleccionar ninguno", "info": "La importación sobrescribirá su disponibilidad actual", "button": "Disponibilidad de importación" - }, - "outlook_cal": "Sincronizar con el calendario de Outlook" + } } } diff --git a/frontend/src/i18n/locales/fr/event.json b/frontend/src/i18n/locales/fr/event.json index 9fc9643..1e3d279 100644 --- a/frontend/src/i18n/locales/fr/event.json +++ b/frontend/src/i18n/locales/fr/event.json @@ -54,14 +54,15 @@ "you": { "info": "Cliquez et faites glisser le calendrier ci-dessous pour définir vos disponibilités", - "google_cal": { - "login": "Synchroniser avec Google Agenda", + "select_all": "Tout sélectionner", + "select_none": "Tout déselectionner", + + "google_cal": "Synchroniser avec Google Agenda", + "outlook_cal": "Synchroniser avec le calendrier Outlook", + "integration": { "logout": "déconnexion", - "select_all": "Tout sélectionner", - "select_none": "Tout déselectionner", "info": "L'importation écrasera vos disponibilités actuelles", "button": "Importer les disponibilités" - }, - "outlook_cal": "Synchroniser avec le calendrier Outlook" + } } } diff --git a/frontend/src/i18n/locales/hi/event.json b/frontend/src/i18n/locales/hi/event.json index 727cf5e..a6b7fac 100644 --- a/frontend/src/i18n/locales/hi/event.json +++ b/frontend/src/i18n/locales/hi/event.json @@ -54,14 +54,15 @@ "you": { "info": "अपनी उपलब्धता सेट करने के लिए नीचे कैलेंडर को क्लिक करें और खींचें", - "google_cal": { - "login": "Google कैलेंडर के साथ समन्वयित करें", + "select_all": "सभी का चयन करे", + "select_none": "सबको अचयनित करो", + + "google_cal": "Google कैलेंडर के साथ समन्वयित करें", + "outlook_cal": "Outlook कैलेंडर के साथ सिंक", + "integration": { "logout": "लॉग आउट", - "select_all": "सभी का चयन करे", - "select_none": "सबको अचयनित करो", "info": "आयात करना आपकी वर्तमान उपलब्धता को अधिलेखित कर देगा", "button": "आयात उपलब्धता" - }, - "outlook_cal": "Outlook कैलेंडर के साथ सिंक" + } } } diff --git a/frontend/src/i18n/locales/id/event.json b/frontend/src/i18n/locales/id/event.json index b9d22a2..54e78e6 100644 --- a/frontend/src/i18n/locales/id/event.json +++ b/frontend/src/i18n/locales/id/event.json @@ -54,14 +54,15 @@ "you": { "info": "Klik dan seret kalender di bawah ini untuk mengatur ketersediaan Anda", - "google_cal": { - "login": "Sinkronkan dengan Google Kalender", + "select_all": "Pilih semua", + "select_none": "Hapus semua", + + "google_cal": "Sinkronkan dengan Google Kalender", + "outlook_cal": "Sinkronkan dengan Kalender Outlook", + "integration": { "logout": "keluar", - "select_all": "Pilih semua", - "select_none": "Hapus semua", "info": "Mengimpor akan menimpa ketersediaan Anda saat ini", "button": "Impor ketersediaan Anda" - }, - "outlook_cal": "Sinkronkan dengan Kalender Outlook" + } } } diff --git a/frontend/src/i18n/locales/it/event.json b/frontend/src/i18n/locales/it/event.json index 17fa096..1ef6ece 100644 --- a/frontend/src/i18n/locales/it/event.json +++ b/frontend/src/i18n/locales/it/event.json @@ -54,14 +54,15 @@ "you": { "info": "Clicca e trascina nel calendario qui sotto per impostare la tua disponibilità", - "google_cal": { - "login": "Sincronizza con il calendario Google", + "select_all": "Seleziona tutto", + "select_none": "Seleziona nessuno", + + "google_cal": "Sincronizza con il calendario Google", + "outlook_cal": "Sincronizza con il calendario Outlook", + "integration": { "logout": "Esci", - "select_all": "Seleziona tutto", - "select_none": "Seleziona nessuno", "info": "L'importazione sovrascriverà la tua disponibilità attuale", "button": "Importa la disponibilità" - }, - "outlook_cal": "Sincronizza con il calendario Outlook" + } } } diff --git a/frontend/src/i18n/locales/ja/event.json b/frontend/src/i18n/locales/ja/event.json index 3ab080e..d84ccd8 100644 --- a/frontend/src/i18n/locales/ja/event.json +++ b/frontend/src/i18n/locales/ja/event.json @@ -54,14 +54,15 @@ "you": { "info": "下のカレンダーをクリック・ドラッグして、いつ予定が空いているかを登録しましょう", - "google_cal": { - "login": "Google カレンダーと同期", + "select_all": "すべて選択", + "select_none": "すべて選択解除", + + "google_cal": "Google カレンダーと同期", + "outlook_cal": "Outlook カレンダーと同期", + "integration": { "logout": "ログアウト", - "select_all": "すべて選択", - "select_none": "すべて選択解除", "info": "インポートすると、現在の登録状況が上書きされます", "button": "空き具合をインポート" - }, - "outlook_cal": "Outlook カレンダーと同期" + } } } diff --git a/frontend/src/i18n/locales/ko/event.json b/frontend/src/i18n/locales/ko/event.json index 3a22eee..a4af561 100644 --- a/frontend/src/i18n/locales/ko/event.json +++ b/frontend/src/i18n/locales/ko/event.json @@ -54,14 +54,15 @@ "you": { "info": "사용 가능 여부를 설정하려면 아래 캘린더를 클릭하고 드래그하세요", - "google_cal": { - "login": "Google 캘린더와 동기화합니다", + "select_all": "모두 선택", + "select_none": "모두 선택 해제", + + "google_cal": "Google 캘린더와 동기화합니다", + "outlook_cal": "아웃룩 캘린더와 동기화합니다", + "integration": { "logout": "로그 아웃", - "select_all": "모두 선택", - "select_none": "모두 선택 해제", "info": "가져 오면 현재 사용 가능 여부를 덮어 씁니다", "button": "가용성 가져 오기" - }, - "outlook_cal": "아웃룩 캘린더와 동기화합니다" + } } } diff --git a/frontend/src/i18n/locales/pt-BR/event.json b/frontend/src/i18n/locales/pt-BR/event.json index 54a4028..5c713c8 100644 --- a/frontend/src/i18n/locales/pt-BR/event.json +++ b/frontend/src/i18n/locales/pt-BR/event.json @@ -54,14 +54,15 @@ "you": { "info": "Clique e arraste para assinalar seu tempo livre no calendário", - "google_cal": { - "login": "Sincronizar com sua Agenda Google", + "select_all": "Selecionar todos", + "select_none": "Selecionar nenhum", + + "google_cal": "Sincronizar com sua Agenda Google", + "outlook_cal": "Sincronizar com sua Agenda Outlook", + "integration": { "logout": "sair", - "select_all": "Selecionar todos", - "select_none": "Selecionar nenhum", "info": "Ao importar você substituirá sua disponibilidade atual", "button": "Importar horários disponíveis" - }, - "outlook_cal": "Sincronizar com sua Agenda Outlook" + } } } diff --git a/frontend/src/i18n/locales/pt-PT/event.json b/frontend/src/i18n/locales/pt-PT/event.json index c95968f..4867d47 100644 --- a/frontend/src/i18n/locales/pt-PT/event.json +++ b/frontend/src/i18n/locales/pt-PT/event.json @@ -54,14 +54,15 @@ "you": { "info": "Clica e arrasta no calendário abaixo para definires a tua disponibilidade.", - "google_cal": { - "login": "Sincronizar com o Calendário Google", + "select_all": "Selecionar tudo", + "select_none": "Selecionar nenhum", + + "google_cal": "Sincronizar com o Calendário Google", + "outlook_cal": "Sincronizar com o Calendário do Outlook", + "integration": { "logout": "terminar sessão", - "select_all": "Selecionar tudo", - "select_none": "Selecionar nenhum", "info": "Importar substituirá a tua disponibilidade atual", "button": "Importar disponibilidade" - }, - "outlook_cal": "Sincronizar com o Calendário do Outlook" + } } } diff --git a/frontend/src/i18n/locales/ru/event.json b/frontend/src/i18n/locales/ru/event.json index c97b1e6..38da849 100644 --- a/frontend/src/i18n/locales/ru/event.json +++ b/frontend/src/i18n/locales/ru/event.json @@ -54,14 +54,15 @@ "you": { "info": "Щелкните и перетащите календарь ниже, чтобы указать доступность", - "google_cal": { - "login": "Синхронизация с календарем Google", + "select_all": "Выбрать все", + "select_none": "Ничего не выбрать", + + "google_cal": "Синхронизация с календарем Google", + "outlook_cal": "Синхронизация с календарем Outlook", + "integration": { "logout": "выйти", - "select_all": "Выбрать все", - "select_none": "Ничего не выбрать", "info": "При импорте ваша текущая доступность будет перезаписана", "button": "Доступность импорта" - }, - "outlook_cal": "Синхронизация с календарем Outlook" + } } } From ebdf2cf52ccf505fce32b77f641194da79b48ff1 Mon Sep 17 00:00:00 2001 From: Benji Grant Date: Sun, 18 Jun 2023 10:03:09 +1000 Subject: [PATCH 2/4] Update changed translation strings --- .../components/GoogleCalendar/GoogleCalendar.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/GoogleCalendar/GoogleCalendar.tsx b/frontend/src/components/GoogleCalendar/GoogleCalendar.tsx index 7b567a1..a480f76 100644 --- a/frontend/src/components/GoogleCalendar/GoogleCalendar.tsx +++ b/frontend/src/components/GoogleCalendar/GoogleCalendar.tsx @@ -121,18 +121,18 @@ const GoogleCalendar = ({ timezone, timeStart, timeEnd, times, onImport }: Googl shadowColor="#3367BD" icon={} > - {t('you.google_cal.login')} + {t('you.google_cal')} } {calendars &&

- {t('you.google_cal.login')} + {t('you.google_cal')} () + >{t('you.integration.logout')})

@@ -140,12 +140,12 @@ const GoogleCalendar = ({ timezone, timeStart, timeEnd, times, onImport }: Googl className={styles.linkButton} type="button" onClick={() => setCalendars(calendars.map(c => ({ ...c, isChecked: true })))} - >{t('event:you.google_cal.select_all')}} + >{t('you.select_all')}} {calendars.every(c => c.isChecked) && } + >{t('you.select_none')}}
{calendars.map(calendar =>
@@ -161,13 +161,13 @@ const GoogleCalendar = ({ timezone, timeStart, timeEnd, times, onImport }: Googl
)} -
{t('you.google_cal.info')}
+
{t('you.integration.info')}
+ >{t('you.integration.button')}
} {/* Load google api scripts */} From 7535a2a61eb7957dd1b5729f72088ddd94e96759 Mon Sep 17 00:00:00 2001 From: Benji Grant Date: Sun, 18 Jun 2023 10:27:58 +1000 Subject: [PATCH 3/4] Add selection control buttons --- .../AvailabilityEditor.module.scss | 5 +++ .../AvailabilityEditor/AvailabilityEditor.tsx | 37 ++++++++++++------- .../components/Content/Content.module.scss | 2 + 3 files changed, 30 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/AvailabilityEditor/AvailabilityEditor.module.scss diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.module.scss b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.module.scss new file mode 100644 index 0000000..e7f7115 --- /dev/null +++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.module.scss @@ -0,0 +1,5 @@ +.selectionControls { + display: flex; + align-items: center; + gap: 1em; +} diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index d46cb6e..b684e67 100644 --- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -1,12 +1,14 @@ import { Fragment, useCallback, useRef, useState } from 'react' +import Button from '/src/components/Button/Button' import Content from '/src/components/Content/Content' import GoogleCalendar from '/src/components/GoogleCalendar/GoogleCalendar' import { usePalette } from '/src/hooks/usePalette' import { useTranslation } from '/src/i18n/client' import { calculateTable, makeClass, parseSpecificDate } from '/src/utils' -import styles from '../AvailabilityViewer/AvailabilityViewer.module.scss' +import styles from './AvailabilityEditor.module.scss' +import viewerStyles from '../AvailabilityViewer/AvailabilityViewer.module.scss' import Skeleton from '../AvailabilityViewer/components/Skeleton/Skeleton' interface AvailabilityEditorProps { @@ -35,7 +37,14 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av const palette = usePalette(2) return <> - {t('you.info')} + +
{t('you.info')}
+
+ + + +
+ {times[0].length === 13 &&
} -
+
-
-
+
+
{table?.rows.map((row, i) => -
- {row &&
{table?.columns.map((column, x) => - {column ?
- {column.header.dateLabel && } - + {column ?
+ {column.header.dateLabel && } +
@@ -75,7 +84,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av if (y === column.cells.length - 1) return null if (!cell) return
('greyed_times')} /> @@ -87,7 +96,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av return
})}
-
:
} +
:
} ) ?? }
diff --git a/frontend/src/components/Content/Content.module.scss b/frontend/src/components/Content/Content.module.scss index 387f1d4..b27a2ce 100644 --- a/frontend/src/components/Content/Content.module.scss +++ b/frontend/src/components/Content/Content.module.scss @@ -9,6 +9,8 @@ align-items: center; justify-content: center; text-align: center; + flex-direction: column; + gap: 1em; } .slim { From 1a2f0a6e94a91a87fbe29993cf4f7090a612c809 Mon Sep 17 00:00:00 2001 From: Benji Grant Date: Sun, 18 Jun 2023 10:48:05 +1000 Subject: [PATCH 4/4] Add keyboard shortcuts for selection controls --- .../AvailabilityEditor/AvailabilityEditor.tsx | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx index b684e67..ee87d00 100644 --- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx +++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx @@ -1,4 +1,4 @@ -import { Fragment, useCallback, useRef, useState } from 'react' +import { Fragment, useCallback, useEffect, useRef, useState } from 'react' import Button from '/src/components/Button/Button' import Content from '/src/components/Content/Content' @@ -36,13 +36,33 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av // Create the colour palette const palette = usePalette(2) + // Selection control + const selectAll = useCallback(() => onChange(times), [onChange, times]) + const selectNone = useCallback(() => onChange([]), [onChange]) + const selectInvert = useCallback(() => onChange(times.filter(t => !value.includes(t))), [onChange, times, value]) + + // Selection keyboard shortcuts + useEffect(() => { + const handleKeydown = (e: KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && (e.key === 'a' || e.key === 'i')) { + e.preventDefault() + if (e.shiftKey && e.key === 'a') selectNone() + else if (e.key === 'a') selectAll() + else selectInvert() + } + } + + document.addEventListener('keydown', handleKeydown) + return () => document.removeEventListener('keydown', handleKeydown) + }, [selectAll, selectNone, selectInvert]) + return <>
{t('you.info')}
- - - + + +
{times[0].length === 13 &&