Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 23:45:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add update buttom for customization settings

Browse Source
This commit is contained in:
Manuel Ruwe
2022-12-24 15:43:49 +01:00
parent 664e70c940
commit 0d93de86a7
2 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Settings/Customization/CustomizationSettings.tsx
View File

@@ -1,35 +1,53 @@
import { Stack } from '@mantine/core'; import { Button, ScrollArea, Stack } from '@mantine/core';
import { useConfigContext } from '../../../config/provider'; import { useConfigContext } from '../../../config/provider';
import { ColorSelector } from './Theme/ColorSelector'; import { useConfigStore } from '../../../config/store';
import { LayoutSelector } from './Layout/LayoutSelector';
import { BackgroundChanger } from './Meta/BackgroundChanger'; import { BackgroundChanger } from './Meta/BackgroundChanger';
import { CustomCssChanger } from './Theme/CustomCssChanger';
import { FaviconChanger } from './Meta/FaviconChanger'; import { FaviconChanger } from './Meta/FaviconChanger';
import { LogoImageChanger } from './Meta/LogoImageChanger'; import { LogoImageChanger } from './Meta/LogoImageChanger';
import { MetaTitleChanger } from './Meta/MetaTitleChanger'; import { MetaTitleChanger } from './Meta/MetaTitleChanger';
import { PageTitleChanger } from './Meta/PageTitleChanger'; import { PageTitleChanger } from './Meta/PageTitleChanger';
import { ColorSelector } from './Theme/ColorSelector';
import { CustomCssChanger } from './Theme/CustomCssChanger';
import { OpacitySelector } from './Theme/OpacitySelector'; import { OpacitySelector } from './Theme/OpacitySelector';
import { ShadeSelector } from './Theme/ShadeSelector'; import { ShadeSelector } from './Theme/ShadeSelector';
import { LayoutSelector } from './Layout/LayoutSelector';
export default function CustomizationSettings() { export default function CustomizationSettings() {
const { config } = useConfigContext(); const { config, name: configName } = useConfigContext();
const { updateConfig } = useConfigStore();
const saveConfiguration = () => {
if (!configName || !config) {
return;
}
updateConfig(configName, (_) => config, false, true);
};
return ( return (
<Stack mb="md" mr="sm" mt="xs"> <Stack mb="md" mr="sm" mt="xs">
<LayoutSelector defaultLayout={config?.settings.customization.layout} /> <ScrollArea style={{ height: '76vh' }} offsetScrollbars>
<PageTitleChanger defaultValue={config?.settings.customization.pageTitle} /> <LayoutSelector defaultLayout={config?.settings.customization.layout} />
<MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} /> <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
<LogoImageChanger defaultValue={config?.settings.customization.logoImageUrl} /> <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
<FaviconChanger defaultValue={config?.settings.customization.faviconUrl} /> <LogoImageChanger defaultValue={config?.settings.customization.logoImageUrl} />
<BackgroundChanger defaultValue={config?.settings.customization.backgroundImageUrl} /> <FaviconChanger defaultValue={config?.settings.customization.faviconUrl} />
<CustomCssChanger defaultValue={config?.settings.customization.customCss} /> <BackgroundChanger defaultValue={config?.settings.customization.backgroundImageUrl} />
<ColorSelector type="primary" defaultValue={config?.settings.customization.colors.primary} /> <CustomCssChanger defaultValue={config?.settings.customization.customCss} />
<ColorSelector <ColorSelector
type="secondary" type="primary"
defaultValue={config?.settings.customization.colors.secondary} defaultValue={config?.settings.customization.colors.primary}
/> />
<ShadeSelector defaultValue={config?.settings.customization.colors.shade} /> <ColorSelector
<OpacitySelector defaultValue={config?.settings.customization.appOpacity} /> type="secondary"
defaultValue={config?.settings.customization.colors.secondary}
/>
<ShadeSelector defaultValue={config?.settings.customization.colors.shade} />
<OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
</ScrollArea>
<Button onClick={saveConfiguration} variant="light">Save Customizations</Button>
</Stack> </Stack>
); );
} }

8
src/components/Settings/SettingsDrawer.tsx
View File

@@ -1,9 +1,9 @@
import { Title, Drawer, Tabs, ScrollArea } from '@mantine/core'; import { Drawer, ScrollArea, Tabs, Title } from '@mantine/core';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import CustomizationSettings from './Customization/CustomizationSettings';
import CommonSettings from './Common/CommonSettings'; import CommonSettings from './Common/CommonSettings';
import Credits from './Common/Credits'; import Credits from './Common/Credits';
import CustomizationSettings from './Customization/CustomizationSettings';
function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) { function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
const { t } = useTranslation('settings/common'); const { t } = useTranslation('settings/common');
@@ -20,9 +20,7 @@ function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string })
</ScrollArea> </ScrollArea>
</Tabs.Panel> </Tabs.Panel>
<Tabs.Panel value="customization"> <Tabs.Panel value="customization">
<ScrollArea style={{ height: '78vh' }} offsetScrollbars> <CustomizationSettings />
<CustomizationSettings />
</ScrollArea>
</Tabs.Panel> </Tabs.Panel>
</Tabs> </Tabs>
); );