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

✨ Added a background image input

Browse Source 
Added an input in the advanced options for a background image. Also removed an unused import from my previous commit and changed the margin on the header bar to padding instead.
This commit is contained in:
Aimsucks
2022-06-07 17:36:05 +00:00
parent 901798055b
commit 423f8110b9
7 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,10 +10,16 @@ export default function TitleChanger() {
title: config.settings.title, title: config.settings.title,
logo: config.settings.logo, logo: config.settings.logo,
favicon: config.settings.favicon, favicon: config.settings.favicon,
background: config.settings.background,
}, },
}); });
const saveChanges = (values: { title?: string; logo?: string; favicon?: string }) => { const saveChanges = (values: {
title?: string;
logo?: string;
favicon?: string;
background?: string;
}) => {
setConfig({ setConfig({
...config, ...config,
settings: { settings: {
@@ -21,6 +27,7 @@ export default function TitleChanger() {
title: values.title, title: values.title,
logo: values.logo, logo: values.logo,
favicon: values.favicon, favicon: values.favicon,
background: values.background,
}, },
}); });
}; };
@@ -36,6 +43,7 @@ export default function TitleChanger() {
placeholder="/favicon.svg" placeholder="/favicon.svg"
{...form.getInputProps('favicon')} {...form.getInputProps('favicon')}
/> />
<TextInput label="Background" placeholder="" {...form.getInputProps('background')} />
<Button type="submit" color={config.settings.primary_color || 'red'}> <Button type="submit" color={config.settings.primary_color || 'red'}>
Save Save
</Button> </Button>

1
src/components/Settings/CommonSettings.tsx
View File

@@ -5,7 +5,6 @@ import {
SegmentedControl, SegmentedControl,
TextInput, TextInput,
Anchor, Anchor,
ColorPicker,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { useState } from 'react'; import { useState } from 'react';

1
src/components/layout/Aside.tsx
View File

@@ -28,6 +28,7 @@ export default function Aside(props: any) {
className={cx(classes.hide)} className={cx(classes.hide)}
style={{ style={{
border: 'none', border: 'none',
background: 'none',
}} }}
width={{ width={{
base: 'auto', base: 'auto',

19
src/components/layout/Background.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Global } from '@mantine/core';
import { useConfig } from '../../tools/state';
export function Background() {
const { config } = useConfig();
return (
<Global
styles={{
body: {
backgroundImage: `url('${config.settings.background}')` || '',
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
},
}}
/>
);
}

2
src/components/layout/Header.tsx
View File

@@ -41,7 +41,7 @@ export function Header(props: any) {
return ( return (
<Head height="auto"> <Head height="auto">
<Group m="xs" position="apart"> <Group p="xs" position="apart">
<Box className={classes.hide}> <Box className={classes.hide}>
<Logo style={{ fontSize: 22 }} /> <Logo style={{ fontSize: 22 }} />
</Box> </Box>

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

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

1
src/tools/types.ts
View File

@@ -7,6 +7,7 @@ export interface Settings {
favicon?: string; favicon?: string;
primary_color?: string; primary_color?: string;
secondary_color?: string; secondary_color?: string;
background?: string;
} }
export interface Config { export interface Config {