jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🚧 Work in progress for Mantine v5

Browse Source
This commit is contained in:
ajnart
2022-07-26 00:51:55 +02:00
parent 7fcdb17d84
commit d4d9e5cfcb
25 changed files with 423 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { TextInput, Group, Button } from '@mantine/core';
import { TextInput, Group, Button, Stack } from '@mantine/core';
import { useForm } from '@mantine/form';
import { useConfig } from '../../tools/state';
import { ColorSelector } from './ColorSelector';
@@ -37,9 +37,9 @@ export default function TitleChanger() {
};
return (
<Group direction="column" grow mb="lg">
<Stack mb="lg">
<form onSubmit={form.onSubmit((values) => saveChanges(values))}>
<Group grow direction="column">
<Stack>
<TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
<TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
<TextInput
@@ -53,13 +53,13 @@ export default function TitleChanger() {
{...form.getInputProps('background')}
/>
<Button type="submit">Save</Button>
</Group>
</Stack>
</form>
<ColorSelector type="primary" />
<ColorSelector type="secondary" />
<ShadeSelector />
<OpacitySelector />
<AppCardWidthSelector />
</Group>
</Stack>
);
}

6
src/components/Settings/AppCardWidthSelector.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Group, Text, Slider } from '@mantine/core';
import { Group, Text, Slider, Stack } from '@mantine/core';
import { useConfig } from '../../tools/state';
export function AppCardWidthSelector() {
@@ -16,7 +16,7 @@ export function AppCardWidthSelector() {
};
return (
<Group direction="column" spacing="xs" grow>
<Stack spacing="xs">
<Text>App Width</Text>
<Slider
label={null}
@@ -27,6 +27,6 @@ export function AppCardWidthSelector() {
styles={{ markLabel: { fontSize: 'xx-small' } }}
onChange={(value) => setappCardWidth(value)}
/>
</Group>
</Stack>
);
}

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

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
import { ColorSwatch, Grid, Group, Popover, Text, useMantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { useColorTheme } from '../../tools/color';
@@ -44,51 +44,44 @@ export function ColorSelector({ type }: ColorControlProps) {
};
const swatches = colors.map(({ color, swatch }) => (
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigColor(color)}
key={color}
color={swatch}
size={22}
style={{ color: theme.white, cursor: 'pointer' }}
/>
<Grid.Col span={2}>
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigColor(color)}
key={color}
color={swatch}
size={22}
style={{ cursor: 'pointer' }}
/>
</Grid.Col>
));
return (
<Group direction="row" spacing={3}>
<Group>
<Popover
width={250}
withinPortal
opened={opened}
onClose={() => setOpened(false)}
transitionDuration={0}
target={
position="left"
withArrow
>
<Popover.Target>
<ColorSwatch
component="button"
type="button"
color={theme.colors[configColor][6]}
onClick={() => setOpened((o) => !o)}
size={22}
style={{ display: 'block', cursor: 'pointer' }}
style={{ cursor: 'pointer' }}
/>
}
styles={{
root: {
marginRight: theme.spacing.xs,
},
body: {
width: 152,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
arrow: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
}}
position="bottom"
placement="end"
withArrow
arrowSize={3}
>
<Group spacing="xs">{swatches}</Group>
</Popover.Target>
<Popover.Dropdown>
<Grid gutter="lg" columns={14}>
{swatches}
</Grid>
</Popover.Dropdown>
</Popover>
<Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
</Group>

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

@@ -1,4 +1,4 @@
import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
import { Group, Text, SegmentedControl, TextInput, Stack } from '@mantine/core';
import { useState } from 'react';
import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
@@ -24,8 +24,8 @@ export default function CommonSettings(args: any) {
);
return (
<Group direction="column" grow mb="lg">
<Group grow direction="column" spacing={0}>
<Stack mb="lg">
<Stack spacing={0}>
<Text>Search engine</Text>
<Tip>
Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or
@@ -74,13 +74,13 @@ export default function CommonSettings(args: any) {
/>
</>
)}
</Group>
</Stack>
<ColorSchemeSwitch />
<WidgetsPositionSwitch />
<ModuleEnabler />
<ConfigChanger />
<SaveConfigComponent />
<Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
</Group>
</Stack>
);
}

6
src/components/Settings/OpacitySelector.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Group, Text, Slider } from '@mantine/core';
import { Group, Text, Slider, Stack } from '@mantine/core';
import { useConfig } from '../../tools/state';
export function OpacitySelector() {
@@ -29,7 +29,7 @@ export function OpacitySelector() {
};
return (
<Group direction="column" spacing="xs" grow>
<Stack spacing="xs">
<Text>App Opacity</Text>
<Slider
defaultValue={config.settings.appOpacity || 100}
@@ -39,6 +39,6 @@ export function OpacitySelector() {
styles={{ markLabel: { fontSize: 'xx-small' } }}
onChange={(value) => setConfigOpacity(value)}
/>
</Group>
</Stack>
);
}

14
src/components/Settings/SettingsMenu.tsx
View File

@@ -8,17 +8,21 @@ import Credits from './Credits';
function SettingsMenu(props: any) {
return (
<Tabs grow>
<Tabs.Tab data-autofocus label="Common">
<Tabs defaultValue="Common">
<Tabs.List grow>
<Tabs.Tab value="Common">Common</Tabs.Tab>
<Tabs.Tab value="Customizations">Customizations</Tabs.Tab>
</Tabs.List>
<Tabs.Panel data-autofocus value="Common">
<ScrollArea style={{ height: '78vh' }} offsetScrollbars>
<CommonSettings />
</ScrollArea>
</Tabs.Tab>
<Tabs.Tab label="Customizations">
</Tabs.Panel>
<Tabs.Panel value="Customizations">
<ScrollArea style={{ height: '78vh' }} offsetScrollbars>
<AdvancedSettings />
</ScrollArea>
</Tabs.Tab>
</Tabs.Panel>
</Tabs>
);
}

91
src/components/Settings/ShadeSelector.tsx
View File

@@ -1,5 +1,14 @@
import React, { useState } from 'react';
import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
import {
ColorSwatch,
Group,
Popover,
Text,
useMantineTheme,
MantineTheme,
Stack,
Grid,
} from '@mantine/core';
import { useConfig } from '../../tools/state';
import { useColorTheme } from '../../tools/color';
@@ -31,36 +40,44 @@ export function ShadeSelector() {
};
const primarySwatches = primaryShades.map(({ swatch, shade }) => (
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigShade(shade)}
key={Number(shade)}
color={swatch}
size={22}
style={{ color: theme.white, cursor: 'pointer' }}
/>
<Grid.Col span={1}>
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigShade(shade)}
key={Number(shade)}
color={swatch}
size={22}
style={{ cursor: 'pointer' }}
/>
</Grid.Col>
));
const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigShade(shade)}
key={Number(shade)}
color={swatch}
size={22}
style={{ color: theme.white, cursor: 'pointer' }}
/>
<Grid.Col span={1}>
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigShade(shade)}
key={Number(shade)}
color={swatch}
size={22}
style={{ cursor: 'pointer' }}
/>
</Grid.Col>
));
return (
<Group direction="row" spacing={3}>
<Group>
<Popover
width={350}
withinPortal
opened={opened}
onClose={() => setOpened(false)}
transitionDuration={0}
target={
position="left"
withArrow
>
<Popover.Target>
<ColorSwatch
component="button"
type="button"
@@ -69,27 +86,15 @@ export function ShadeSelector() {
size={22}
style={{ display: 'block', cursor: 'pointer' }}
/>
}
styles={{
root: {
marginRight: theme.spacing.xs,
},
body: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
arrow: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
}}
position="bottom"
placement="end"
withArrow
arrowSize={3}
>
<Group direction="column" spacing="xs">
<Group spacing="xs">{primarySwatches}</Group>
<Group spacing="xs">{secondarySwatches}</Group>
</Group>
</Popover.Target>
<Popover.Dropdown>
<Stack spacing="xs">
<Grid gutter="lg" columns={10}>
{primarySwatches}
{secondarySwatches}
</Grid>
</Stack>
</Popover.Dropdown>
</Popover>
<Text>Shade</Text>
</Group>