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

💄 Replace hover with click and on the full row (#1397)

Browse Source
This commit is contained in:
Tagaishi
2023-09-15 18:12:42 +02:00
committed by GitHub
parent 4c67ee2902
commit 9b8263b8ec
1 changed files with 72 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,6 @@ import {
createStyles,
useMantineTheme,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import {
IconAffiliate,
IconDatabase,
@@ -26,7 +25,6 @@ import {
} from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { MIN_WIDTH_MOBILE } from '~/constants/constants';
import { calculateETA } from '~/tools/client/calculateEta';
import { humanFileSize } from '~/tools/humanFileSize';
import { AppType } from '~/types/app';
@@ -38,7 +36,6 @@ interface TorrentQueueItemProps {
}
export const BitTorrentQueueItem = ({ torrent, width, app }: TorrentQueueItemProps) => {
const [popoverOpened, { open: openPopover, close: closePopover }] = useDisclosure(false);
const { classes } = useStyles();
const { t } = useTranslation('modules/torrents-status');
@@ -46,71 +43,79 @@ export const BitTorrentQueueItem = ({ torrent, width, app }: TorrentQueueItemPro
const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
const size = torrent.totalSelected;
return (
<tr key={torrent.id} className={classes.transparentBackground}>
<td>
<Popover opened={popoverOpened} radius="md" shadow="md" width={350} withinPortal>
<Popover.Dropdown>
<TorrentQueuePopover torrent={torrent} app={app} />
</Popover.Dropdown>
<Popover.Target>
<div onMouseEnter={openPopover} onMouseLeave={closePopover}>
<Text
style={{
maxWidth: '30vw',
}}
size="xs"
lineClamp={1}
>
{torrent.name}
<Popover
withArrow
withinPortal
radius="lg"
shadow="sm"
transitionProps={{
transition: 'pop',
}}
>
<Popover.Target>
<tr key={torrent.id} style={{ cursor: 'pointer' }}>
<td>
<Text
style={{
maxWidth: '30vw',
}}
size="xs"
lineClamp={1}
>
{torrent.name}
</Text>
{app && (
<Text size="xs" color="dimmed">
{t('card.table.item.text', {
appName: app.name,
ratio: torrent.ratio.toFixed(2),
})}
</Text>
{app && (
<Text size="xs" color="dimmed">
{t('card.table.item.text', {
appName: app.name,
ratio: torrent.ratio.toFixed(2),
})}
</Text>
)}
</div>
</Popover.Target>
</Popover>
</td>
<td>
<Text className={classes.noTextBreak} size="xs">
{humanFileSize(size, false)}
</Text>
</td>
{width > MIN_WIDTH_MOBILE && (
<td>
<Text className={classes.noTextBreak} size="xs">
{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}
</Text>
</td>
)}
{width > MIN_WIDTH_MOBILE && (
<td>
<Text className={classes.noTextBreak} size="xs">
{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}
</Text>
</td>
)}
{width > MIN_WIDTH_MOBILE && (
<td>
<Text className={classes.noTextBreak} size="xs">
{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}
</Text>
</td>
)}
<td>
<Text className={classes.noTextBreak}>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress
radius="lg"
color={torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'}
value={torrent.progress * 100}
size="lg"
/>
</td>
</tr>
)}
</td>
<td>
<Text className={classes.noTextBreak} size="xs">
{humanFileSize(size, false)}
</Text>
</td>
{width > MIN_WIDTH_MOBILE && (
<td>
<Text className={classes.noTextBreak} size="xs">
{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}
</Text>
</td>
)}
{width > MIN_WIDTH_MOBILE && (
<td>
<Text className={classes.noTextBreak} size="xs">
{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}
</Text>
</td>
)}
{width > MIN_WIDTH_MOBILE && (
<td>
<Text className={classes.noTextBreak} size="xs">
{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}
</Text>
</td>
)}
<td>
<Text className={classes.noTextBreak}>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress
radius="lg"
color={
torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
}
value={torrent.progress * 100}
size="lg"
/>
</td>
</tr>
</Popover.Target>
<Popover.Dropdown>
<TorrentQueuePopover torrent={torrent} app={app} />
</Popover.Dropdown>
</Popover>
);
};
@@ -234,7 +239,4 @@ const useStyles = createStyles(() => ({
noTextBreak: {
whiteSpace: 'nowrap',
},
transparentBackground: {
backgroundColor: 'transparent !important',
},
}));