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

💄 Elements stretch to fit whole widget

Browse Source
This commit is contained in:
Tagaishi
2023-07-31 00:20:23 +02:00
parent 454deaf069
commit 2b9de2405e
1 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/widgets/media-requests/MediaRequestStatsTile.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Center, Flex, Stack, Text } from '@mantine/core'; import { Box, Card, createStyles, Flex, FlexProps, Stack, Text } from '@mantine/core';
import { IconChartBar } from '@tabler/icons-react'; import { IconChartBar } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
@@ -11,14 +11,23 @@ import { MediaRequestStatus } from './media-request-types';
const definition = defineWidget({ const definition = defineWidget({
id: 'media-requests-stats', id: 'media-requests-stats',
icon: IconChartBar, icon: IconChartBar,
options: {}, options: {
component: MediaRequestStatsTile, direction: {
type: 'select',
defaultValue: 'row',
data: [
{ label: 'Horizontal', value: 'horizontal' },
{ label: 'Vertical', value: 'vertical' },
],
},
},
gridstack: { gridstack: {
minWidth: 1, minWidth: 1,
minHeight: 2, minHeight: 1,
maxWidth: 12, maxWidth: 12,
maxHeight: 12, maxHeight: 12,
}, },
component: MediaRequestStatsTile,
}); });
export type MediaRequestStatsWidget = IWidget<(typeof definition)['id'], typeof definition>; export type MediaRequestStatsWidget = IWidget<(typeof definition)['id'], typeof definition>;
@@ -36,41 +45,44 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
} }
return ( return (
<Flex gap="md" wrap="wrap"> <Flex
<Card w={100} h={100} withBorder> w="100%"
<Center h="100%"> h="100%"
<Stack spacing={0} align="center"> gap="md"
<Text> direction={ widget.properties.direction != 'vertical' ? 'row' : 'column' }
{data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length} >
</Text> <Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}>
<Text color="dimmed" align="center" size="xs"> <Stack w="100%" h="100%" align="center" justify="center" spacing={0}>
{t('stats.pending')} <Text align="center">
</Text> {data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length}
</Stack> </Text>
</Center> <Text color="dimmed" align="center" size="xs">
{t('stats.pending')}
</Text>
</Stack>
</Card> </Card>
<Card w={100} h={100} withBorder> <Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}>
<Center h="100%"> <Stack w="100%" h="100%" align="center" justify="center" spacing={0}>
<Stack spacing={0} align="center"> <Text align="center">
<Text align="center">{data.filter((x) => x.type === 'tv').length}</Text> {data.filter((x) => x.type === 'tv').length}
<Text color="dimmed" align="center" size="xs"> </Text>
{t('stats.tvRequests')} <Text color="dimmed" align="center" size="xs">
</Text> {t('stats.tvRequests')}
</Stack> </Text>
</Center> </Stack>
</Card> </Card>
<Card w={100} h={100} withBorder> <Card w="100%" h="100%" withBorder style={{flex:"1 1 auto"}}>
<Center h="100%"> <Stack w="100%" h="100%" align="center" justify="center" spacing={0}>
<Stack spacing={0} align="center"> <Text align="center">
<Text align="center">{data.filter((x) => x.type === 'movie').length}</Text> {data.filter((x) => x.type === 'movie').length}
<Text color="dimmed" align="center" size="xs"> </Text>
{t('stats.movieRequests')} <Text color="dimmed" align="center" size="xs">
</Text> {t('stats.movieRequests')}
</Stack> </Text>
</Center> </Stack>
</Card> </Card>
</Flex> </Flex>
); );
} }
export default definition; export default definition;