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

Usenet module styling

Browse Source
This commit is contained in:
Thomas Camlong
2022-09-29 16:34:57 +09:00
committed by ajnart
parent c347180aae
commit 11abac2e33
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/modules/usenet/UsenetModule.tsx
View File

@@ -5,6 +5,7 @@ import { FunctionComponent, useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration'; import duration from 'dayjs/plugin/duration';
import { useElementSize } from '@mantine/hooks';
import { IModule } from '../ModuleTypes'; import { IModule } from '../ModuleTypes';
import { UsenetQueueList } from './UsenetQueueList'; import { UsenetQueueList } from './UsenetQueueList';
import { UsenetHistoryList } from './UsenetHistoryList'; import { UsenetHistoryList } from './UsenetHistoryList';
@@ -48,26 +49,35 @@ export const UsenetComponent: FunctionComponent = () => {
return null; return null;
} }
const { ref, width, height } = useElementSize();
return ( return (
<Tabs keepMounted={false} defaultValue="queue"> <Tabs keepMounted={false} defaultValue="queue">
<Group mb="md"> <Tabs.List ref={ref} mb="md" style={{ flex: 1 }}>
<Tabs.List style={{ flex: 1 }}>
<Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab> <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
<Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab> <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
{data && ( {data && (
<Group position="right" ml="auto" mb="lg"> <Group position="right" ml="auto">
{
// Only show if the width is > 400px
width > 400 && (
<>
<Badge>{humanFileSize(data?.speed)}/s</Badge> <Badge>{humanFileSize(data?.speed)}/s</Badge>
<Badge> <Badge>
{t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)} {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
</Badge> </Badge>
</>
)
}
{data.paused ? ( {data.paused ? (
<Button uppercase onClick={() => resume()} radius="xl" size="xs"> <Button uppercase onClick={() => resume()} radius="xl" size="xs">
<IconPlayerPlay size={16} style={{ marginRight: 5 }} /> {t('info.paused')} <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
</Button> </Button>
) : ( ) : (
<Button uppercase onClick={() => pause()} radius="xl" size="xs"> <Button uppercase onClick={() => pause()} radius="xl" size="xs">
<IconPlayerPause size={16} style={{ marginRight: 5 }} />{' '} <IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
{dayjs.duration(data.eta, 's').format('HH:mm:ss')} {dayjs.duration(data.eta, 's').format('HH:mm')}
</Button> </Button>
)} )}
</Group> </Group>
@@ -81,7 +91,6 @@ export const UsenetComponent: FunctionComponent = () => {
data={downloadServices.map((service) => ({ value: service.id, label: service.name }))} data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
/> />
)} )}
</Group>
<Tabs.Panel value="queue"> <Tabs.Panel value="queue">
<UsenetQueueList serviceId={selectedServiceId} /> <UsenetQueueList serviceId={selectedServiceId} />
</Tabs.Panel> </Tabs.Panel>