Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-15 17:56:21 +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

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

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