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

Merge pull request #1159 from Tagaishi/DnsHole-controls-rework

Browse Source 
💄 Dns hole controls rework
This commit is contained in:
Meier Lukas
2023-07-17 01:25:52 +02:00
committed by GitHub
parent 3bd83c561c 201afa79db
commit 356e1cd6f6
1 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/widgets/dnshole/DnsHoleControls.tsx
View File

@@ -1,4 +1,5 @@
import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core'; import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react'; import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
import { useConfigContext } from '../../config/provider'; import { useConfigContext } from '../../config/provider';
@@ -15,8 +16,8 @@ const definition = defineWidget({
icon: IconDeviceGamepad, icon: IconDeviceGamepad,
options: {}, options: {},
gridstack: { gridstack: {
minWidth: 3, minWidth: 2,
minHeight: 2, minHeight: 1,
maxWidth: 12, maxWidth: 12,
maxHeight: 12, maxHeight: 12,
}, },
@@ -32,6 +33,7 @@ interface DnsHoleControlsWidgetProps {
function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) { function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
const { isInitialLoading, data } = useDnsHoleSummeryQuery(); const { isInitialLoading, data } = useDnsHoleSummeryQuery();
const { mutateAsync } = useDnsHoleControlMutation(); const { mutateAsync } = useDnsHoleControlMutation();
const { width, ref } = useElementSize();
const { t } = useTranslation('common'); const { t } = useTranslation('common');
const { name: configName, config } = useConfigContext(); const { name: configName, config } = useConfigContext();
@@ -41,8 +43,8 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
} }
return ( return (
<Stack> <Stack justify="space-between" h={"100%"} spacing="0.25rem">
<Group grow> <SimpleGrid ref={ref} cols={ width > 275? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
<Button <Button
onClick={async () => { onClick={async () => {
await mutateAsync({ await mutateAsync({
@@ -54,6 +56,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
leftIcon={<IconPlayerPlay size={20} />} leftIcon={<IconPlayerPlay size={20} />}
variant="light" variant="light"
color="green" color="green"
h="2rem"
> >
{t('enableAll')} {t('enableAll')}
</Button> </Button>
@@ -68,11 +71,13 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
leftIcon={<IconPlayerStop size={20} />} leftIcon={<IconPlayerStop size={20} />}
variant="light" variant="light"
color="red" color="red"
h="2rem"
> >
{t('disableAll')} {t('disableAll')}
</Button> </Button>
</Group> </SimpleGrid>
<Stack spacing="0.25rem">
{data.status.map((status, index) => { {data.status.map((status, index) => {
const app = config?.apps.find((x) => x.id === status.appId); const app = config?.apps.find((x) => x.id === status.appId);
@@ -81,8 +86,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
} }
return ( return (
<Card withBorder key={index} p="xs"> <Card withBorder={true} key={index} p="xs">
<Group position="apart">
<Group> <Group>
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
@@ -93,17 +97,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
borderRadius: theme.radius.md, borderRadius: theme.radius.md,
})} })}
> >
<Image src={app.appearance.iconUrl} width={25} height={25} fit="contain" /> <Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" />
</Box> </Box>
<Stack spacing="0rem">
<Text>{app.name}</Text> <Text>{app.name}</Text>
</Group>
<StatusBadge status={status.status} /> <StatusBadge status={status.status} />
</Stack>
</Group> </Group>
</Card> </Card>
); );
})} })}
</Stack> </Stack>
</Stack>
); );
} }