Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-07 22:15:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Ability to change title and icons V2!

Browse Source 
Results of criticism in pull request #182
This commit is contained in:
Aimsucks
2022-06-07 01:35:50 +00:00
parent 6af5166aa5
commit 838f196937
6 changed files with 43 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Settings/AdvancedSettings.tsx
View File

@@ -1,49 +1,38 @@
import { TextInput, Group, Button } from '@mantine/core';
import { useState } from 'react';
import { useForm } from '@mantine/form';
import { useConfig } from '../../tools/state';
export default function TitleChanger() {
const { config, loadConfig, setConfig, getConfigs } = useConfig();
const [customTitle, setCustomTitle] = useState(config.title);
const [customLogo, setCustomLogo] = useState(config.logo);
const [customFavicon, setCustomFavicon] = useState(config.favicon);
const saveChanges = () => {
const form = useForm({
initialValues: {
title: config.settings.title,
logo: config.settings.logo,
favicon: config.settings.favicon,
},
});
const saveChanges = (values: { title: string; logo: string; favicon: string }) => {
setConfig({
...config,
title: customTitle || "Homarr 🦞",
logo: customLogo || "/imgs/logo.png",
favicon: customFavicon || "/favicon.svg",
settings: {
...config.settings,
title: values.title,
logo: values.logo,
favicon: values.favicon,
},
});
}
};
return (
<Group grow direction="column">
<TextInput
label="Page title"
defaultValue={config.title}
value={customTitle}
onChange={(event) => setCustomTitle(event.currentTarget.value)}
/>
<TextInput
label="Logo"
defaultValue={config.logo}
value={customLogo}
onChange={(event) => setCustomLogo(event.currentTarget.value)}
/>
<TextInput
label="Favicon"
defaultValue={config.favicon}
value={customFavicon}
onChange={(event) => setCustomFavicon(event.currentTarget.value)}
/>
<Button
variant="gradient"
gradient={{ from: 'red', to: 'orange' }}
onClick={() => saveChanges()}
>
Save
</Button>
<form onSubmit={form.onSubmit((values) => saveChanges(values))}>
<TextInput label="Page title" placeholder="'Homarr 🦞" {...form.getInputProps('title')} />
<TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
<TextInput label="Favicon" placeholder="/favicon.svg" {...form.getInputProps('favicon')} />
<Group grow position="center" mt="xl">
<Button type="submit">Save</Button>
</Group>
</form>
);
}

4
src/components/layout/HeaderConfig.tsx
View File

@@ -7,8 +7,8 @@ export function HeaderConfig(props: any) {
return (
<Head>
<title>{config.title ?? "Homarr 🦞"}</title>
<link rel="shortcut icon" href={config.favicon ?? "/favicon.svg"} />
<title>{config.settings.title || 'Homarr 🦞'}</title>
<link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
</Head>
);
}

8
src/components/layout/Layout.tsx
View File

@@ -2,6 +2,7 @@ import { AppShell, createStyles } from '@mantine/core';
import { Header } from './Header';
import { Footer } from './Footer';
import Aside from './Aside';
import { HeaderConfig } from './HeaderConfig';
const useStyles = createStyles((theme) => ({
main: {},
@@ -10,11 +11,8 @@ const useStyles = createStyles((theme) => ({
export default function Layout({ children, style }: any) {
const { classes, cx } = useStyles();
return (
<AppShell
aside={<Aside />}
header={<Header />}
footer={<Footer links={[]} />}
>
<AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
<HeaderConfig />
<main
className={cx(classes.main)}
style={{

5
src/components/layout/Logo.tsx
View File

@@ -10,7 +10,7 @@ export function Logo({ style }: any) {
<Group spacing="xs">
<Image
width={50}
src={config.logo ?? "/imgs/logo.png"}
src={config.settings.logo || '/imgs/logo.png'}
style={{
position: 'relative',
}}
@@ -28,8 +28,7 @@ export function Logo({ style }: any) {
variant="gradient"
gradient={{ from: 'red', to: 'orange', deg: 145 }}
>
{/* Added the .replace to remove emojis because they get screwed up by the gradient */}
{config.title.replace(/([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '') ?? "Homarr"}
{config.settings.title || 'Homarr'}
</Text>
</NextLink>
</Group>

12
src/tools/state.tsx
View File

@@ -15,12 +15,12 @@ type configContextType = {
const configContext = createContext<configContextType>({
config: {
name: 'default',
title: 'Homarr 🦞',
logo: '/imgs/logo.png',
favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://google.com/search?q=',
title: '',
logo: '',
favicon: '',
},
modules: {},
},
@@ -44,12 +44,12 @@ type Props = {
export function ConfigProvider({ children }: Props) {
const [config, setConfigInternal] = useState<Config>({
name: 'default',
title: 'Homarr 🦞',
logo: '/imgs/logo.png',
favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://www.google.com/search?q=',
title: '',
logo: '',
favicon: '',
},
modules: {},
});

6
src/tools/types.ts
View File

@@ -2,13 +2,13 @@ import { OptionValues } from '../components/modules/modules';
export interface Settings {
searchUrl: string;
title: string;
logo: string;
favicon: string;
}
export interface Config {
name: string;
title: string;
logo: string;
favicon: string;
services: serviceItem[];
settings: Settings;
modules: {