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

Merge pull request #771 from ajnart/mantine-v6

Browse Source 
🎉 Move to Mantine v6
This commit is contained in:
Thomas Camlong
2023-03-28 16:05:09 +09:00
committed by GitHub
parent 964b65477c 3bb0f20066
commit e966fdad71
33 changed files with 275 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/widgets/calendar/CalendarDay.tsx
View File

@@ -1,5 +1,6 @@
import { Box, Indicator, IndicatorProps, Popover } from '@mantine/core';
import { Box, Indicator, IndicatorProps, Popover, useMantineTheme } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { isToday } from '../../tools/isToday';
import { MediaList } from './MediaList';
import { MediasType } from './type';
@@ -22,12 +23,24 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
withinPortal
radius="lg"
shadow="sm"
transition="pop"
transitionProps={{
transition: 'pop',
}}
onClose={close}
opened={opened}
>
<Popover.Target>
<Box onClick={open}>
<Box
onClick={open}
sx={(theme) => ({
margin: 5,
backgroundColor: isToday(date)
? theme.colorScheme === 'dark'
? theme.colors.dark[5]
: theme.colors.gray[0]
: undefined,
})}
>
<DayIndicator color="red" position="bottom-start" medias={medias.books}>
<DayIndicator color="yellow" position="top-start" medias={medias.movies}>
<DayIndicator color="blue" position="top-end" medias={medias.tvShows}>

36
src/widgets/calendar/CalendarTile.tsx
View File

@@ -72,39 +72,15 @@ function CalendarTile({ widget }: CalendarTileProps) {
return (
<Group grow style={{ height: '100%' }}>
<Calendar
m={0}
p={0}
month={month}
// Should be offset 5px to the left
style={{ position: 'relative', top: -15 }}
onMonthChange={setMonth}
defaultDate={new Date()}
onPreviousMonth={setMonth}
onNextMonth={setMonth}
size="xs"
locale={i18n?.resolvedLanguage ?? 'en'}
fullWidth
onChange={() => {}}
firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
dayStyle={(date) => ({
margin: -1,
backgroundColor: isToday(date)
? colorScheme === 'dark'
? colors.dark[5]
: colors.gray[0]
: undefined,
})}
firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
hideWeekdays
styles={{
weekdayCell: {
margin: 0,
padding: 0,
},
calendarHeader: {
position: 'relative',
margin: 0,
padding: 0,
},
}}
allowLevelChange={false}
dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
date={month}
hasNextLevel={false}
renderDay={(date) => (
<CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
)}

8
src/widgets/dashDot/DashDotGraph.tsx
View File

@@ -1,4 +1,4 @@
import { createStyles, Title, useMantineTheme } from '@mantine/core';
import { createStyles, Title, useMantineTheme, getStylesRef } from '@mantine/core';
import { useTranslation } from 'next-i18next';
import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
import { DashDotCompactStorage } from './DashDotCompactStorage';
@@ -77,7 +77,7 @@ const useIframeSrc = (
);
};
export const useStyles = createStyles((theme, _params, getRef) => ({
export const useStyles = createStyles((theme, _params) => ({
iframe: {
flex: '1 0 auto',
maxWidth: '100%',
@@ -87,7 +87,7 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
colorScheme: 'light', // fixes white borders around iframe
},
graphTitle: {
ref: getRef('graphTitle'),
ref: getStylesRef('graphTitle'),
position: 'absolute',
right: 0,
bottom: 0,
@@ -99,7 +99,7 @@ export const useStyles = createStyles((theme, _params, getRef) => ({
},
graphContainer: {
position: 'relative',
[`&:hover .${getRef('graphTitle')}`]: {
[`&:hover .${getStylesRef('graphTitle')}`]: {
opacity: 0.5,
},
},

2
src/widgets/dashDot/DashDotTile.tsx
View File

@@ -232,7 +232,7 @@ const fetchDashDotInfo = async (configName: string | undefined) => {
export const useDashDotTileStyles = createStyles((theme) => ({
graphsContainer: {
marginRight: theme.spacing.sm * -1, // fix because margin collapses weirdly
marginRight: `calc(${theme.spacing.sm} * -1)`,
},
}));

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

@@ -35,7 +35,7 @@ interface TorrentQueueItemProps {
export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) => {
const [popoverOpened, { open: openPopover, close: closePopover }] = useDisclosure(false);
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const theme = useMantineTheme();
const { width } = useElementSize();
const { t } = useTranslation('modules/torrents-status');
@@ -75,17 +75,17 @@ export const BitTorrrentQueueItem = ({ torrent, app }: TorrentQueueItemProps) =>
<td>
<Text size="xs">{humanFileSize(size, false)}</Text>
</td>
{width > MIN_WIDTH_MOBILE && (
{theme.fn.largerThan('xs') && (
<td>
<Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
)}
{width > MIN_WIDTH_MOBILE && (
{theme.fn.largerThan('xs') && (
<td>
<Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
)}
{width > MIN_WIDTH_MOBILE && (
{theme.fn.largerThan('xs') && (
<td>
<Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
</td>

2
src/widgets/torrent/TorrentTile.tsx
View File

@@ -17,6 +17,7 @@ import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useTranslation } from 'next-i18next';
import { MIN_WIDTH_MOBILE } from '../../constants/constants';
import { useGetDownloadClientsQueue } from '../../hooks/widgets/download-speed/useGetNetworkSpeed';
import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
import { AppIntegrationType } from '../../types/app';
@@ -59,7 +60,6 @@ interface TorrentTileProps {
function TorrentTile({ widget }: TorrentTileProps) {
const { t } = useTranslation('modules/torrents-status');
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const { width } = useElementSize();
const {

2
src/widgets/useNet/UseNetTile.tsx
View File

@@ -28,6 +28,7 @@ import { defineWidget } from '../helper';
import { IWidget } from '../widgets';
import { UsenetHistoryList } from './UsenetHistoryList';
import { UsenetQueueList } from './UsenetQueueList';
import { MIN_WIDTH_MOBILE } from '../../constants/constants';
dayjs.extend(duration);
@@ -59,7 +60,6 @@ function UseNetTile({ widget }: UseNetTileProps) {
config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ??
[];
const { ref, width, height } = useElementSize();
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
const { data } = useGetUsenetInfo({ appId: selectedAppId! });

2
src/widgets/useNet/UsenetHistoryList.tsx
View File

@@ -128,7 +128,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
position="center"
mt="md"
total={totalPages}
page={page}
value={page}
onChange={setPage}
/>
)}

4
src/widgets/useNet/UsenetQueueList.tsx
View File

@@ -35,7 +35,7 @@ const PAGE_SIZE = 13;
export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => {
const theme = useMantineTheme();
const { t } = useTranslation('modules/usenet');
const progressbarBreakpoint = theme.breakpoints.xs;
const progressbarBreakpoint = parseInt(theme.breakpoints.xs, 10);
const progressBreakpoint = 400;
const sizeBreakpoint = 300;
const { ref, width } = useElementSize();
@@ -177,7 +177,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
size="sm"
position="center"
total={totalPages}
page={page}
value={page}
onChange={setPage}
/>
)}