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

feat: improve design and layout of design selector

Browse Source
This commit is contained in:
Manuel Ruwe
2022-12-08 22:27:48 +01:00
parent 158293edcf
commit f84aece6e9
1 changed files with 88 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/components/Settings/Customization/Layout/LayoutSelector.tsx
View File

@@ -1,9 +1,9 @@
import { import {
ActionIcon, ActionIcon,
Box,
Center, Center,
Checkbox, Checkbox,
createStyles, createStyles,
Flex,
Group, Group,
Paper, Paper,
Stack, Stack,
@@ -11,7 +11,6 @@ import {
Title, Title,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { IconBrandDocker, IconLayout, IconSearch } from '@tabler/icons';
import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react'; import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
import { useConfigContext } from '../../../../config/provider'; import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store'; import { useConfigStore } from '../../../../config/store';
@@ -65,104 +64,104 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
}; };
return ( return (
<Box className={classes.box} p="xl" pb="sm"> <Stack spacing="xs">
<Stack spacing="xs"> <Title order={6}>Dashboard layout</Title>
<Group spacing={5}>
<IconLayout size={20} />
<Title order={6}>Dashboard layout</Title>
</Group>
<Text color="dimmed" size="sm"> <Paper px="xs" py={4} withBorder>
You can adjust the layout of the Dashboard to your preferences. The main are cannot be <Group position="apart">
turned on or off <Logo size="xs" />
</Text> <Group spacing={5}>
{searchBar ? (
<Paper px="xs" py={4} withBorder> <Paper
<Group position="apart"> style={{
<Logo size="xs" /> height: 10,
<Group spacing={5}> backgroundColor: colorScheme === 'dark' ? colors.gray[8] : colors.gray[1],
{searchBar ? ( }}
<Paper p={2}
style={{ w={60}
height: 10, />
backgroundColor: colorScheme === 'dark' ? colors.gray[8] : colors.gray[1], ) : null}
}} {docker ? <ActionIcon size={10} disabled /> : null}
p={2}
w={60}
/>
) : null}
{docker ? <ActionIcon size={10} disabled /> : null}
</Group>
</Group> </Group>
</Group>
</Paper>
<Group align="stretch">
{leftSidebar && (
<Paper className={classes.secondaryWrapper} p="xs" withBorder>
<Flex align="center" justify="center" direction="column">
<Text align="center">Sidebar</Text>
<Text color="dimmed" size="xs" align="center">
Only for
<br />
services &<br />
integrations
</Text>
</Flex>
</Paper>
)}
<Paper className={classes.primaryWrapper} p="xs" withBorder>
<Text align="center">Main</Text>
<Text color="dimmed" size="xs" align="center">
Cannot be turned of.
</Text>
</Paper> </Paper>
<Group align="stretch"> {rightSidebar && (
{leftSidebar && ( <Paper className={classes.secondaryWrapper} p="xs" withBorder>
<Paper p="xs" withBorder> <Flex align="center" justify="center" direction="column">
<Center style={{ height: '100%' }}> <Text align="center">Sidebar</Text>
<Text align="center">Sidebar</Text> <Text color="dimmed" size="xs" align="center">
</Center> Only for
</Paper> <br />
)} services &<br />
integrations
<Paper className={classes.main} p="xs" withBorder> </Text>
<Text align="center">Main</Text> </Flex>
<Text color="dimmed" size="xs" align="center">
Can be used for categories,
<br />
services and integrations
</Text>
</Paper> </Paper>
)}
</Group>
{rightSidebar && ( <Stack spacing="xs">
<Paper p="xs" withBorder> <Checkbox
<Center style={{ height: '100%' }}> label="Enable left sidebar"
<Text align="center">Sidebar</Text> description="Optional. Can be used for services and integrations only"
</Center> checked={leftSidebar}
</Paper> onChange={(ev) => handleChange('enabledLeftSidebar', ev, setLeftSidebar)}
)} />
</Group> <Checkbox
label="Enable right sidebar"
<Stack spacing="xs"> description="Optional. Can be used for services and integrations only"
<Checkbox checked={rightSidebar}
label="Enable left sidebar" onChange={(ev) => handleChange('enabledRightSidebar', ev, setRightSidebar)}
description="Optional. Can be used for services and integrations only" />
checked={leftSidebar} <Checkbox
onChange={(ev) => handleChange('enabledLeftSidebar', ev, setLeftSidebar)} label="Enable search bar"
/> checked={searchBar}
<Checkbox onChange={(ev) => handleChange('enabledSearchbar', ev, setSearchBar)}
label="Enable right sidebar" />
description="Optional. Can be used for services and integrations only" <Checkbox
checked={rightSidebar} label="Enable docker"
onChange={(ev) => handleChange('enabledRightSidebar', ev, setRightSidebar)} checked={docker}
/> onChange={(ev) => handleChange('enabledDocker', ev, setDocker)}
<Checkbox />
label="Enable search bar" <Checkbox
checked={searchBar} label="Enable pings"
onChange={(ev) => handleChange('enabledSearchbar', ev, setSearchBar)} checked={ping}
/> onChange={(ev) => handleChange('enabledPing', ev, setPing)}
<Checkbox />
label="Enable docker"
checked={docker}
onChange={(ev) => handleChange('enabledDocker', ev, setDocker)}
/>
<Checkbox
label="Enable pings"
checked={ping}
onChange={(ev) => handleChange('enabledPing', ev, setPing)}
/>
</Stack>
</Stack> </Stack>
</Box> </Stack>
); );
}; };
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
main: { primaryWrapper: {
flexGrow: 1, flexGrow: 2,
}, },
box: { secondaryWrapper: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1], flexGrow: 1,
borderRadius: theme.radius.md, maxWidth: 100,
}, },
})); }));