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

🎨 Improve design for element selector

Browse Source
This commit is contained in:
Manuel Ruwe
2022-12-11 17:18:25 +01:00
parent 0b61309f58
commit 72338b7b36
5 changed files with 31 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx
View File

@@ -1,4 +1,4 @@
import { Stack, Text, Title } from '@mantine/core'; import { Grid, Text } from '@mantine/core';
import { import {
IconArrowsUpDown, IconArrowsUpDown,
IconCalendarTime, IconCalendarTime,
@@ -27,7 +27,7 @@ export const AvailableIntegrationElements = ({
applications. They usually require a few configurations before use. applications. They usually require a few configurations before use.
</Text> </Text>
<Stack spacing="xs"> <Grid>
<GenericAvailableElementType <GenericAvailableElementType
name="Usenet downloads" name="Usenet downloads"
description="Display and manage your Usenet downloads directly from Homarr" description="Display and manage your Usenet downloads directly from Homarr"
@@ -63,7 +63,7 @@ export const AvailableIntegrationElements = ({
description="Display the current download & upload of your torrent clients" description="Display the current download & upload of your torrent clients"
image={<IconArrowsUpDown />} image={<IconArrowsUpDown />}
/> />
</Stack> </Grid>
</> </>
); );
}; };

53
src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Stack, Text } from '@mantine/core'; import { Box, Button, Card, Center, Grid, Stack, Text, UnstyledButton } from '@mantine/core';
import { IconChevronRight } from '@tabler/icons'; import { IconChevronRight } from '@tabler/icons';
import Image from 'next/image'; import Image from 'next/image';
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
@@ -28,34 +28,27 @@ export const GenericAvailableElementType = ({
}; };
return ( return (
<Button <Grid.Col span={3}>
className={classes.styledButton} <Card style={{ height: '100%' }}>
leftIcon={<Icon />} <Stack justify="space-between" style={{ height: '100%' }}>
rightIcon={<IconChevronRight opacity={0.5} />} <Stack spacing="xs">
styles={{ <Center>
root: { <Icon />
height: 'auto', </Center>
padding: '8px 12px', <Text className={classes.elementText} align="center">
}, {name}
inner: { </Text>
justifyContent: 'left', {description && (
}, <Text className={classes.elementText} size="xs" align="center" color="dimmed">
label: { {description}
justifyContent: 'space-between', </Text>
width: '100%', )}
}, </Stack>
}} <Button disabled={disabled} variant="light" size="xs" mt="auto" radius="md" fullWidth>
disabled={disabled} Add to Dashboard
fullWidth </Button>
> </Stack>
<Stack spacing={0}> </Card>
<Text className={classes.elementText}>{name}</Text> </Grid.Col>
{description && (
<Text className={classes.elementText} size="xs" color="dimmed">
{description}
</Text>
)}
</Stack>
</Button>
); );
}; };

2
src/components/Dashboard/Modals/SelectElement/Components/Shared/styles.tsx
View File

@@ -11,7 +11,7 @@ export const useStyles = createStyles((theme) => ({
elementButton: { elementButton: {
width: '100%', width: '100%',
height: '100%', height: '100%',
borderRadius: theme.radius.sm borderRadius: theme.radius.sm,
}, },
elementStack: { elementStack: {
width: '100%', width: '100%',

6
src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx
View File

@@ -1,4 +1,4 @@
import { Stack, Text, Title } from '@mantine/core'; import { Grid, Text } from '@mantine/core';
import { IconCursorText } from '@tabler/icons'; import { IconCursorText } from '@tabler/icons';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { GenericAvailableElementType } from '../Shared/GenericElementType'; import { GenericAvailableElementType } from '../Shared/GenericElementType';
@@ -19,13 +19,13 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
they don&apos;t integrate with any services and their content never changes. they don&apos;t integrate with any services and their content never changes.
</Text> </Text>
<Stack> <Grid>
<GenericAvailableElementType <GenericAvailableElementType
name="Static Text" name="Static Text"
description="Display a fixed string on your dashboard" description="Display a fixed string on your dashboard"
image={<IconCursorText />} image={<IconCursorText />}
/> />
</Stack> </Grid>
</> </>
); );
}; };

1
src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
View File

@@ -17,6 +17,7 @@ export const AddElementAction = () => {
openContextModal({ openContextModal({
modal: 'selectElement', modal: 'selectElement',
title: 'Add an element to your dashboard', title: 'Add an element to your dashboard',
size: 'xl',
innerProps: {}, innerProps: {},
}) })
} }