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

55
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,30 +49,39 @@ 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">
<Group position="right" ml="auto" mb="lg"> {
<Badge>{humanFileSize(data?.speed)}/s</Badge> // Only show if the width is > 400px
<Badge> width > 400 && (
{t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)} <>
</Badge> <Badge>{humanFileSize(data?.speed)}/s</Badge>
{data.paused ? ( <Badge>
<Button uppercase onClick={() => resume()} radius="xl" size="xs"> {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
<IconPlayerPlay size={16} style={{ marginRight: 5 }} /> {t('info.paused')} </Badge>
</Button> </>
) : ( )
<Button uppercase onClick={() => pause()} radius="xl" size="xs"> }
<IconPlayerPause size={16} style={{ marginRight: 5 }} />{' '}
{dayjs.duration(data.eta, 's').format('HH:mm:ss')} {data.paused ? (
</Button> <Button uppercase onClick={() => resume()} radius="xl" size="xs">
)} <IconPlayerPlay size={12} style={{ marginRight: 5 }} /> {t('info.paused')}
</Group> </Button>
)} ) : (
<Button uppercase onClick={() => pause()} radius="xl" size="xs">
<IconPlayerPause size={12} style={{ marginRight: 5 }} />{' '}
{dayjs.duration(data.eta, 's').format('HH:mm')}
</Button>
)}
</Group>
)}
</Tabs.List> </Tabs.List>
{downloadServices.length > 1 && ( {downloadServices.length > 1 && (
<Select <Select
@@ -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>