From c4023ab6343d65638d716d42a1543d4b8e0ff617 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 20 Dec 2022 15:52:11 +0900 Subject: [PATCH 1/2] Fix typo --- public/locales/en/layout/element-selector/selector.json | 2 +- public/locales/en/settings/common.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/locales/en/layout/element-selector/selector.json b/public/locales/en/layout/element-selector/selector.json index 96872f846..3d5dcb2f1 100644 --- a/public/locales/en/layout/element-selector/selector.json +++ b/public/locales/en/layout/element-selector/selector.json @@ -1,6 +1,6 @@ { "modal": { - "title": "Add a new tile omegalaul", + "title": "Add a new tile", "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want." }, "actionIcon": { diff --git a/public/locales/en/settings/common.json b/public/locales/en/settings/common.json index e78cd2b41..9f3bfde1c 100644 --- a/public/locales/en/settings/common.json +++ b/public/locales/en/settings/common.json @@ -23,7 +23,7 @@ "enablesearchbar": "Enable search bar", "enabledocker": "Enable docker integration", "enableping": "Enable pings", - "enablelsidebardescription": "Optional. Can be used for apps and integrations only", - "enablersidebardescription": "Optional. Can be used for apps and integrations only" + "enablelsidebardesc": "Optional. Can be used for apps and integrations only", + "enablersidebardesc": "Optional. Can be used for apps and integrations only" } } \ No newline at end of file From 7b147f9bb30a1c6467f146fa2d05e2f4c255f1fc Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 20 Dec 2022 16:54:22 +0900 Subject: [PATCH 2/2] Translations and styling --- public/locales/en/common.json | 20 ++++++------- .../en/layout/element-selector/selector.json | 1 + .../header/actions/toggle-edit-mode.json | 2 +- public/locales/en/layout/modals/about.json | 7 +++++ src/components/About/AboutModal.tsx | 30 ++++++++----------- .../Modals/EditAppModal/EditAppModal.tsx | 4 +-- .../Components/Shared/GenericElementType.tsx | 6 ++-- .../WidgetsTab/AvailableWidgetsTab.tsx | 3 +- .../Dashboard/Tiles/GenericTileMenu.tsx | 8 ++--- .../Tiles/Widgets/WidgetsEditModal.tsx | 4 +-- .../Tiles/Widgets/WidgetsRemoveModal.tsx | 4 +-- .../Dashboard/Views/ViewToggleButton.tsx | 4 ++- .../Actions/ToggleEditMode/ToggleEditMode.tsx | 6 ++-- src/components/layout/header/SettingsMenu.tsx | 2 +- src/modules/moduleWrapper.tsx | 2 +- src/tools/translation-namespaces.ts | 1 + 16 files changed, 57 insertions(+), 47 deletions(-) create mode 100644 public/locales/en/layout/modals/about.json diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 1a99f9bd3..7c7e1b1ee 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,14 +1,14 @@ { - "actions": { - "save": "Save", - "cancel": "Cancel", - "close": "Close", - "delete": "Delete", - "ok": "Okay", - "edit": "Edit", - "changePosition": "Change position", - "remove": "Remove" - }, + "save": "Save", + "about": "About", + "cancel": "Cancel", + "close": "Close", + "delete": "Delete", + "ok": "Okay", + "edit": "Edit", + "version": "Version", + "changePosition": "Change position", + "remove": "Remove", "sections": { "settings": "Settings", "dangerZone": "Danger zone" diff --git a/public/locales/en/layout/element-selector/selector.json b/public/locales/en/layout/element-selector/selector.json index 3d5dcb2f1..4df8950f3 100644 --- a/public/locales/en/layout/element-selector/selector.json +++ b/public/locales/en/layout/element-selector/selector.json @@ -3,6 +3,7 @@ "title": "Add a new tile", "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want." }, + "widgetDescription": "Widgets interact with your apps, to provide you with more control over your applications. They usually require a few configurations before use.", "actionIcon": { "tooltip": "Add a tile" } diff --git a/public/locales/en/layout/header/actions/toggle-edit-mode.json b/public/locales/en/layout/header/actions/toggle-edit-mode.json index 3ae95e24f..db29b1bc4 100644 --- a/public/locales/en/layout/header/actions/toggle-edit-mode.json +++ b/public/locales/en/layout/header/actions/toggle-edit-mode.json @@ -6,6 +6,6 @@ }, "popover": { "title": "Edit mode is enabled", - "text": "You can adjust and configure your apps now. Changes are not saved until you exit edit mode" + "text": "You can adjust and configure your apps now. Changes are not saved until you exit edit mode" } } \ No newline at end of file diff --git a/public/locales/en/layout/modals/about.json b/public/locales/en/layout/modals/about.json new file mode 100644 index 000000000..c2b8c37c3 --- /dev/null +++ b/public/locales/en/layout/modals/about.json @@ -0,0 +1,7 @@ +{ + "description": "Homarr is a simple and modern homepage for your server that helps you access all of your apps in one place. It integrates with the apps you use to display useful information or control them. It's easy to install and supports many different devices.", + "i18n": "Loaded I18n translation namespaces", + "locales": "Configured I18n locales", + "contact": "Having trouble or questions? Connect with us!", + "addToDashboard": "Add to Dashboard" +} \ No newline at end of file diff --git a/src/components/About/AboutModal.tsx b/src/components/About/AboutModal.tsx index f7c9b0e08..f4f2bc7e8 100644 --- a/src/components/About/AboutModal.tsx +++ b/src/components/About/AboutModal.tsx @@ -4,6 +4,7 @@ import { Badge, Button, createStyles, + Divider, Group, HoverCard, Modal, @@ -21,7 +22,7 @@ import { } from '@tabler/icons'; import { motion } from 'framer-motion'; import { InitOptions } from 'i18next'; -import { i18n } from 'next-i18next'; +import { i18n, Trans, useTranslation } from 'next-i18next'; import Image from 'next/image'; import { ReactNode } from 'react'; import { CURRENT_VERSION } from '../../../data/constants'; @@ -37,6 +38,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod const { classes } = useStyles(); const colorGradiant = usePrimaryGradient(); const informations = useInformationTableItems(newVersionAvailable); + const { t } = useTranslation(['common', 'layout/modals/about']); return ( - About Homarr + {t('about')} Homarr } size="xl" > - Homarr is a simple and modern homepage for your server that helps you access all of your - apps in one place. It integrates with the apps you use to display useful information or - control them. It's easy to install and supports many different devices. + - - Version information: - - {informations.map((item, index) => ( @@ -71,7 +67,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod {item.icon} - {item.label} + {t(item.label)} @@ -79,9 +75,9 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod ))}
{item.content}
- + - Having trouble or questions? Connect with us! + {t('layout/modals/about:contact')} @@ -101,7 +97,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod leftIcon={} variant="default" > - Website + Documentation diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx index 33d901dbd..7fad7c4d4 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx @@ -1,5 +1,6 @@ -import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core'; +import { Button, Card, Center, Grid, ScrollArea, Stack, Text } from '@mantine/core'; import { TablerIcon } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; import Image from 'next/image'; import React from 'react'; import { useStyles } from './styles'; @@ -20,6 +21,7 @@ export const GenericAvailableElementType = ({ handleAddition, }: GenericAvailableElementTypeProps) => { const { classes } = useStyles(); + const { t } = useTranslation('layout/modals/about'); const Icon = typeof image === 'string' ? () => : image; @@ -50,7 +52,7 @@ export const GenericAvailableElementType = ({ radius="md" fullWidth > - Add to Dashboard + {t('addToDashboard')} diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx index e75559d67..c6192ab58 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx @@ -19,8 +19,7 @@ export const AvailableIntegrationElements = ({ - Widgets interact with your apps, to provide you with more control over your applications. - They usually require a few configurations before use. + {t('widgetDescription')} diff --git a/src/components/Dashboard/Tiles/GenericTileMenu.tsx b/src/components/Dashboard/Tiles/GenericTileMenu.tsx index 155b3ced8..fba87edfa 100644 --- a/src/components/Dashboard/Tiles/GenericTileMenu.tsx +++ b/src/components/Dashboard/Tiles/GenericTileMenu.tsx @@ -24,7 +24,7 @@ export const GenericTileMenu = ({ } return ( - + @@ -34,14 +34,14 @@ export const GenericTileMenu = ({ {t('sections.settings')} {displayEdit && ( } onClick={handleClickEdit}> - {t('actions.edit')} + {t('edit')} )} } onClick={handleClickChangePosition} > - {t('actions.changePosition')} + {t('changePosition')} {t('sections.dangerZone')} } onClick={handleClickDelete} > - {t('actions.remove')} + {t('remove')} diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 62b8ac476..caae1b41b 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -92,9 +92,9 @@ export const WidgetsEditModal = ({ - + ); diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx index f33207f93..59c20f394 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx @@ -35,9 +35,9 @@ export const WidgetsRemoveModal = ({ {t('descriptor.remove.confirm')} - + ); diff --git a/src/components/Dashboard/Views/ViewToggleButton.tsx b/src/components/Dashboard/Views/ViewToggleButton.tsx index 1e0cf0188..d4d1722f4 100644 --- a/src/components/Dashboard/Views/ViewToggleButton.tsx +++ b/src/components/Dashboard/Views/ViewToggleButton.tsx @@ -1,11 +1,13 @@ import { ActionIcon, Button, Text, Tooltip } from '@mantine/core'; import { IconEdit, IconEditOff } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan'; import { useEditModeStore } from './useEditModeStore'; export const ViewToggleButton = () => { const screenLargerThanMd = useScreenLargerThan('md'); const { enabled: isEditMode, toggleEditMode } = useEditModeStore(); + const { t } = useTranslation('layout/header/actions/toggle-edit-mode'); return ( { color={isEditMode ? 'red' : undefined} radius="md" > - {isEditMode ? 'Exit Edit Mode' : 'Enter Edit Mode'} + {isEditMode ? t('button.enabled') : t('button.disabled')} ) : ( { {t('popover.title')} - {t('popover.text')} + + + diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 0fe586faa..05990cbeb 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -37,7 +37,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str } onClick={() => aboutModal.open()} > - About + {t('about')} diff --git a/src/modules/moduleWrapper.tsx b/src/modules/moduleWrapper.tsx index d62e6b02e..62109d36c 100644 --- a/src/modules/moduleWrapper.tsx +++ b/src/modules/moduleWrapper.tsx @@ -98,7 +98,7 @@ function getItems(module: IModule) { onChange={(e) => {}} /> - + ); diff --git a/src/tools/translation-namespaces.ts b/src/tools/translation-namespaces.ts index e76015bce..2a8b50170 100644 --- a/src/tools/translation-namespaces.ts +++ b/src/tools/translation-namespaces.ts @@ -3,6 +3,7 @@ export const dashboardNamespaces = [ 'layout/tools', 'layout/element-selector/selector', 'layout/modals/add-app', + 'layout/modals/about', 'layout/header/actions/toggle-edit-mode', 'settings/common', 'settings/general/theme-selector',