diff --git a/public/locales/en/layout/element-selector/selector.json b/public/locales/en/layout/element-selector/selector.json index 4df8950f3..a1b509acd 100644 --- a/public/locales/en/layout/element-selector/selector.json +++ b/public/locales/en/layout/element-selector/selector.json @@ -4,6 +4,7 @@ "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.", + "goBack": "Go back to the previous step", "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 db29b1bc4..046d259f5 100644 --- a/public/locales/en/layout/header/actions/toggle-edit-mode.json +++ b/public/locales/en/layout/header/actions/toggle-edit-mode.json @@ -1,5 +1,6 @@ { "tooltip": "The edit mode enables you to configure your dashboard", + "description": "In edit mode, you can adjust the size and position of your tiles.", "button": { "disabled": "Enter Edit Mode", "enabled": "Exit and Save" diff --git a/public/locales/en/layout/modals/change-position.json b/public/locales/en/layout/modals/change-position.json new file mode 100644 index 000000000..49f39e563 --- /dev/null +++ b/public/locales/en/layout/modals/change-position.json @@ -0,0 +1,8 @@ +{ + "xPosition": "X axis position", + "width": "Width", + "height": "Height", + "yPosition": "Y axis position", + "zeroOrHigher": "0 or higher", + "betweenXandY": "Between {{mim}} and {{max}}" +} \ No newline at end of file diff --git a/public/locales/en/layout/tools.json b/public/locales/en/layout/tools.json index e27df9de5..4224b621e 100644 --- a/public/locales/en/layout/tools.json +++ b/public/locales/en/layout/tools.json @@ -1,5 +1,10 @@ { "fallback": { "title": "You currently do not have any tools" + }, + "iconPicker": { + "textInputPlaceholder": "Search for icons...", + "searchLimitationTitle": "Search is limited to {{max}} icons", + "searchLimitationMessage": "To keep things snappy and fast, the search is limited to {{max}} icons. Use the search box to find more icons" } } \ No newline at end of file diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx index e67fc84b1..3dfeb55d0 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx +++ b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx @@ -45,7 +45,7 @@ export const ChangePositionModal = ({ onSubmit(form.values.x, form.values.y, form.values.width, form.values.height); }; - const { t } = useTranslation('common'); + const { t } = useTranslation(['layout/modals/change-position', 'common']); return (
@@ -54,8 +54,8 @@ export const ChangePositionModal = ({ @@ -64,8 +64,8 @@ export const ChangePositionModal = ({ @@ -77,8 +77,11 @@ export const ChangePositionModal = ({ data={widthData} max={24} min={1} - label="Width" - description={`Between ${widthData.at(0)?.label} and ${widthData.at(-1)?.label}`} + label={t('layout/modals/change-position:width')} + description={t('layout/modals/change-position:betweenXandY', { + min: widthData.at(0)?.label, + max: widthData.at(-1)?.label, + })} {...form.getInputProps('width')} /> @@ -88,8 +91,11 @@ export const ChangePositionModal = ({ data={heightData} max={24} min={1} - label="Height" - description={`Between ${heightData.at(0)?.label} and ${heightData.at(-1)?.label}`} + label={t('layout/modals/change-position:height')} + description={t('layout/modals/change-position:betweenXandY', { + min: heightData.at(0)?.label, + max: heightData.at(-1)?.label, + })} {...form.getInputProps('height')} /> @@ -97,9 +103,9 @@ export const ChangePositionModal = ({ - + ); diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx index 1fdab92fa..d1c8ed6de 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx @@ -17,6 +17,7 @@ import { UseFormReturnType } from '@mantine/form'; import { useDebouncedValue } from '@mantine/hooks'; import { IconSearch, IconX } from '@tabler/icons'; import { useEffect, useState } from 'react'; +import { useTranslation } from 'next-i18next'; import { ICON_PICKER_SLICE_LIMIT } from '../../../../../../../../data/constants'; import { IconSelectorItem } from '../../../../../../../types/iconSelector/iconSelectorItem'; import { WalkxcodeRepositoryIcon } from '../../../../../../../types/iconSelector/repositories/walkxcodeIconRepository'; @@ -72,6 +73,8 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe const isTruncated = slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length; + const { t } = useTranslation('layout/tools'); + return ( @@ -88,7 +91,7 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe setSearchTerm(event.currentTarget.value)} - placeholder="Search for icons..." + placeholder={t('iconPicker.textInputPlaceholder')} variant="filled" rightSection={ setSearchTerm('')}> @@ -110,11 +113,10 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe - Search is limited to {ICON_PICKER_SLICE_LIMIT} icons + {t('iconPicker.searchLimitationTitle', { max: ICON_PICKER_SLICE_LIMIT })} - To keep things snappy and fast, the search is limited to {ICON_PICKER_SLICE_LIMIT}{' '} - icons. Use the search box to find more icons. + {t('iconPicker.searchLimitationMessage', { max: ICON_PICKER_SLICE_LIMIT })} )} diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx index 4e0ab603b..575820366 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx @@ -1,19 +1,23 @@ import { Button, Text } from '@mantine/core'; import { IconArrowNarrowLeft } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; interface SelectorBackArrowProps { onClickBack: () => void; } -export const SelectorBackArrow = ({ onClickBack }: SelectorBackArrowProps) => ( - -); +export function SelectorBackArrow({ onClickBack }: SelectorBackArrowProps) { + const { t } = useTranslation('layout/element-selector/selector'); + return ( + + ); +} diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 6385a1d76..20518c414 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -126,41 +126,3 @@ export const WidgetsEditModal = ({ ); }; - -// -// {items.map(([key, value]) => ( -// <> -// {typeof value === 'boolean' ? ( -// handleChange(key, ev.currentTarget.checked)} -// /> -// ) : null} -// {typeof value === 'string' ? ( -// handleChange(key, ev.currentTarget.value)} -// /> -// ) : null} -// {typeof value === 'object' && Array.isArray(value) ? ( -// handleChange(key, v)} -// /> -// ) : null} -// -// ))} - -// -// -// -// -// -// ); -// }; diff --git a/src/components/Dashboard/Views/ViewToggleButton.tsx b/src/components/Dashboard/Views/ViewToggleButton.tsx index 975da8235..8be927a46 100644 --- a/src/components/Dashboard/Views/ViewToggleButton.tsx +++ b/src/components/Dashboard/Views/ViewToggleButton.tsx @@ -10,15 +10,7 @@ export const ViewToggleButton = () => { const { t } = useTranslation('layout/header/actions/toggle-edit-mode'); return ( - - In edit mode, you can adjust -
- the size and position of your tiles. - - } - > + {t('description')}}> {screenLargerThanMd ? (