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

💄 Torrent Queue styling

Browse Source
This commit is contained in:
ajnart
2023-01-19 09:09:31 +09:00
parent 1bf3b1312b
commit 5e50c56feb
1 changed files with 77 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/widgets/torrent/TorrentQueueItem.tsx
View File

@@ -2,12 +2,16 @@
import { NormalizedTorrent } from '@ctrl/shared-torrent'; import { NormalizedTorrent } from '@ctrl/shared-torrent';
import { import {
Badge, Badge,
Divider,
Flex, Flex,
Group, Group,
List,
MantineColor, MantineColor,
Popover, Popover,
Progress, Progress,
Stack,
Text, Text,
Title,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { useDisclosure, useElementSize } from '@mantine/hooks'; import { useDisclosure, useElementSize } from '@mantine/hooks';
@@ -41,7 +45,13 @@ export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) =>
return ( return (
<tr key={torrent.id}> <tr key={torrent.id}>
<td> <td>
<Popover opened={popoverOpened} width={350} position="top" withinPortal> <Popover
opened={popoverOpened}
radius="md"
shadow="md"
width="target"
withinPortal
>
<Popover.Dropdown> <Popover.Dropdown>
<TorrentQueuePopover torrent={torrent} app={app} /> <TorrentQueuePopover torrent={torrent} app={app} />
</Popover.Dropdown> </Popover.Dropdown>
@@ -114,7 +124,6 @@ const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => {
}; };
return ( return (
<Group spacing="xs"> <Group spacing="xs">
<IconAffiliate size={16} />
<Group spacing={3}> <Group spacing={3}>
<Text>Ratio -</Text> <Text>Ratio -</Text>
@@ -127,7 +136,7 @@ const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => {
}; };
return ( return (
<> <Stack spacing="xs" justify="space-evenly">
{app && ( {app && (
<Group spacing={3}> <Group spacing={3}>
<Text size="xs" color="dimmed"> <Text size="xs" color="dimmed">
@@ -139,54 +148,71 @@ const TorrentQueuePopover = ({ torrent, app }: TorrentQueueItemProps) => {
</Text> </Text>
</Group> </Group>
)} )}
<Text mb="md" weight="bold"> <Title order={5}>{torrent.name}</Title>
{torrent.name} <List>
</Text> <List.Item icon={<IconAffiliate size={16} />}>
<RatioMetric />
<RatioMetric /> </List.Item>
<Group spacing="xs"> <List.Item icon={<IconSortDescending size={16} />}>
<IconSortDescending size={16} /> <Group spacing="xs">
<Text>{t('card.popover.metrics.queuePosition', { position: torrent.queuePosition })}</Text> <Text>
</Group> {t('card.popover.metrics.queuePosition', { position: torrent.queuePosition })}
</Text>
<Group spacing="xs"> </Group>
<IconPercentage size={16} /> </List.Item>
<Text> <List.Item icon={<IconPercentage size={16} />}>
{t('card.popover.metrics.progress', { progress: (torrent.progress * 100).toFixed(2) })} <Group spacing="xs">
</Text> <Text>
</Group> {t('card.popover.metrics.progress', {
<Group spacing="xs"> progress: (torrent.progress * 100).toFixed(2),
<IconDatabase size={16} /> })}
<Text> <Progress
{t('card.popover.metrics.totalSelectedSize', { color={
totalSize: humanFileSize(torrent.totalSelected), torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
})} }
</Text> radius="md"
</Group> size="sm"
<Group> value={torrent.progress * 100}
<Group spacing="xs"> animate={torrent.state !== 'paused'}
<IconDownload size={16} /> />
<Text>{humanFileSize(torrent.totalDownloaded)}</Text> </Text>
</Group> </Group>
<Group spacing="xs"> </List.Item>
<IconUpload size={16} /> <List.Item icon={<IconDatabase size={16} />}>
<Text>{humanFileSize(torrent.totalUploaded)}</Text> <Text>
</Group> {t('card.popover.metrics.totalSelectedSize', {
</Group> totalSize: humanFileSize(torrent.totalSelected),
})}
<Group spacing="xs"> </Text>
<IconInfoCircle size={16} /> </List.Item>
<Text>{t('card.popover.metrics.state', { state: torrent.stateMessage })}</Text> <List.Item icon={<IconDownload size={16} />}>
</Group> <Group spacing="xs">
<Text>{humanFileSize(torrent.totalDownloaded)}</Text>
<Flex mt="md" mb="xs" gap="sm"> <Divider orientation="vertical" />
{torrent.label && <Badge variant="outline">{torrent.label}</Badge>} <IconUpload size={16} />
{torrent.isCompleted && ( <Text>{humanFileSize(torrent.totalUploaded)}</Text>
<Badge variant="dot" color="green"> </Group>
{t('card.popover.metrics.completed')} </List.Item>
</Badge> <List.Item icon={<IconInfoCircle size={16} />}>
<Text>
{t('card.popover.metrics.state', {
state: torrent.stateMessage !== '' ? torrent.stateMessage : torrent.state,
})}
</Text>
</List.Item>
{(torrent.label || torrent.isCompleted) && (
<List.Item>
<Flex gap="sm">
{torrent.label && <Badge variant="outline">{torrent.label}</Badge>}
{torrent.isCompleted && (
<Badge variant="dot" color="green">
{t('card.popover.metrics.completed')}
</Badge>
)}
</Flex>
</List.Item>
)} )}
</Flex> </List>
</> </Stack>
); );
}; };