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 7fce83076..f99017c6a 100644 --- a/public/locales/en/layout/header/actions/toggle-edit-mode.json +++ b/public/locales/en/layout/header/actions/toggle-edit-mode.json @@ -5,7 +5,12 @@ "enabled": "Exit and Save" }, "popover": { - "title": "Edit mode is enabled", + "title": "Edit mode is enabled for <1>{{size}} size", "text": "You can adjust and configure your apps now. Changes are not saved until you exit edit mode" + }, + "screenSizes": { + "small": "small", + "medium": "medium", + "large": "large" } } \ No newline at end of file diff --git a/public/locales/en/layout/screen-sizes.json b/public/locales/en/layout/screen-sizes.json deleted file mode 100644 index cb0b0a5d3..000000000 --- a/public/locales/en/layout/screen-sizes.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "popover": { - "title": "Configuring for screen size \"{{size}}\"", - "description": "You are editing the size for your current screen" - }, - "sizes": { - "small": "small", - "medium": "medium", - "large": "large" - } -} \ No newline at end of file diff --git a/src/components/Dashboard/Views/EditView.tsx b/src/components/Dashboard/Views/EditView.tsx index 70c4510b5..11b387d81 100644 --- a/src/components/Dashboard/Views/EditView.tsx +++ b/src/components/Dashboard/Views/EditView.tsx @@ -1,45 +1,3 @@ -import { ActionIcon, Affix, Group, Paper, Progress, Stack, Text } from '@mantine/core'; -import { IconQuestionMark } from '@tabler/icons'; -import { useTranslation } from 'next-i18next'; -import { useNamedWrapperColumnCount, useWrapperColumnCount } from '../Wrappers/gridstack/store'; import { DashboardView } from './DashboardView'; -export const DashboardEditView = () => { - const wrapperColumnCount = useWrapperColumnCount(); - const namedWrapperColumnCount = useNamedWrapperColumnCount(); - const widthInTotal = ((wrapperColumnCount ?? 0) / 12) * 100; - - const { t } = useTranslation('layout/screen-sizes'); - - const translatedSize = t(`sizes.${namedWrapperColumnCount}`); - - return ( - <> - - - - - - {t('popover.title', { size: translatedSize })} - - - {t('popover.description')} - - - - - - - - - - - - - ); -}; +export const DashboardEditView = () => ; diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx index d25192249..cd256f838 100644 --- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx +++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx @@ -1,6 +1,6 @@ import axios from 'axios'; import Consola from 'consola'; -import { ActionIcon, Button, Group, Title, Tooltip } from '@mantine/core'; +import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core'; import { IconEditCircle, IconEditCircleOff } from '@tabler/icons'; import { getCookie } from 'cookies-next'; import { Trans, useTranslation } from 'next-i18next'; @@ -10,11 +10,13 @@ import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan' import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore'; import { AddElementAction } from '../AddElementAction/AddElementAction'; +import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store'; export const ToggleEditModeAction = () => { const { enabled, toggleEditMode } = useEditModeStore(); - + const namedWrapperColumnCount = useNamedWrapperColumnCount(); const { t } = useTranslation('layout/header/actions/toggle-edit-mode'); + const translatedSize = t(`screenSizes.${namedWrapperColumnCount}`); const smallerThanSm = useScreenSmallerThan('sm'); const { config } = useConfigContext(); @@ -44,8 +46,25 @@ export const ToggleEditModeAction = () => { }), radius: 'md', id: 'toggle-edit-mode', - autoClose: false, - title: {t('popover.title')}, + autoClose: 10000, + title: ( + + <Trans + i18nKey="layout/header/actions/toggle-edit-mode:popover.title" + values={{ size: translatedSize }} + components={{ + 1: ( + <Text + component="a" + style={{ color: 'inherit', textDecoration: 'underline' }} + href="https://homarr.dev/docs/customizations/layout" + target="_blank" + /> + ), + }} + /> + + ), message: , }); } else { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1527f04cc..dd416158b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,7 +2,6 @@ import { getCookie, setCookie } from 'cookies-next'; import { GetServerSidePropsContext } from 'next'; import fs from 'fs'; -import Consola from 'consola'; import { Dashboard } from '../components/Dashboard/Dashboard'; import Layout from '../components/layout/Layout'; import { useInitConfig } from '../config/init'; diff --git a/src/tools/translation-namespaces.ts b/src/tools/translation-namespaces.ts index bf3e1d03e..facb3cbd4 100644 --- a/src/tools/translation-namespaces.ts +++ b/src/tools/translation-namespaces.ts @@ -7,7 +7,6 @@ export const dashboardNamespaces = [ 'layout/modals/about', 'layout/header/actions/toggle-edit-mode', 'layout/mobile/drawer', - 'layout/screen-sizes', 'settings/common', 'settings/general/theme-selector', 'settings/general/config-changer',