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

💄 Calendar styling

Browse Source
This commit is contained in:
ajnart
2022-08-08 13:47:34 +02:00
parent 60fc6732b8
commit 439874e811
1 changed files with 120 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/modules/calendar/CalendarModule.tsx
View File

@@ -12,6 +12,7 @@ import React, { useEffect, useState } from 'react';
import { Calendar } from '@mantine/dates'; import { Calendar } from '@mantine/dates';
import { IconCalendar as CalendarIcon } from '@tabler/icons'; import { IconCalendar as CalendarIcon } from '@tabler/icons';
import axios from 'axios'; import axios from 'axios';
import { useDisclosure } from '@mantine/hooks';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes'; import { IModule } from '../ModuleTypes';
import { import {
@@ -170,7 +171,7 @@ function DayComponent(props: any) {
readarrmedias, readarrmedias,
}: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } = }: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
props; props;
const [opened, setOpened] = useState(false); const [opened, { close, open }] = useDisclosure(false);
const day = renderdate.getDate(); const day = renderdate.getDate();
@@ -191,129 +192,129 @@ function DayComponent(props: any) {
const date = new Date(media.inCinemas); const date = new Date(media.inCinemas);
return date.toDateString() === renderdate.toDateString(); return date.toDateString() === renderdate.toDateString();
}); });
if ( const totalFiltered = [
sonarrFiltered.length === 0 && ...readarrFiltered,
radarrFiltered.length === 0 && ...lidarrFiltered,
lidarrFiltered.length === 0 && ...sonarrFiltered,
readarrFiltered.length === 0 ...radarrFiltered,
) { ];
if (totalFiltered.length === 0) {
return <div>{day}</div>; return <div>{day}</div>;
} }
return ( return (
<Box <Popover
onClick={() => { position="bottom"
setOpened(true); withArrow
}} withinPortal
radius="lg"
shadow="sm"
transition="pop"
onClose={close}
opened={opened}
> >
{readarrFiltered.length > 0 && ( <Popover.Target>
<Indicator <Box onClick={open}>
size={10} {readarrFiltered.length > 0 && (
withBorder <Indicator
style={{ size={10}
position: 'absolute', withBorder
bottom: 8, style={{
left: 8, position: 'absolute',
}} bottom: 8,
color="red" left: 8,
children={null} }}
/> color="red"
)} children={null}
{radarrFiltered.length > 0 && ( />
<Indicator )}
size={10} {radarrFiltered.length > 0 && (
withBorder <Indicator
style={{ size={10}
position: 'absolute', withBorder
top: 8, style={{
left: 8, position: 'absolute',
}} top: 8,
color="yellow" left: 8,
children={null} }}
/> color="yellow"
)} children={null}
{sonarrFiltered.length > 0 && ( />
<Indicator )}
size={10} {sonarrFiltered.length > 0 && (
withBorder <Indicator
style={{ size={10}
position: 'absolute', withBorder
top: 8, style={{
right: 8, position: 'absolute',
}} top: 8,
color="blue" right: 8,
children={null} }}
/> color="blue"
)} children={null}
{lidarrFiltered.length > 0 && ( />
<Indicator )}
size={10} {lidarrFiltered.length > 0 && (
withBorder <Indicator
style={{ size={10}
position: 'absolute', withBorder
bottom: 8, style={{
right: 8, position: 'absolute',
}} bottom: 8,
color="green" right: 8,
children={undefined} }}
/> color="green"
)} children={undefined}
<Popover />
position="bottom" )}
withinPortal
radius="lg"
shadow="xl"
transition="pop"
styles={{
dropdown: {
boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
},
}}
width="auto"
onClose={() => setOpened(false)}
opened={opened}
>
<Popover.Target>
<div>{day}</div> <div>{day}</div>
</Popover.Target> </Box>
<Popover.Dropdown> </Popover.Target>
<ScrollArea style={{ height: 400 }}> <Popover.Dropdown>
{sonarrFiltered.map((media: any, index: number) => ( <ScrollArea
<React.Fragment key={index}> offsetScrollbars
<SonarrMediaDisplay media={media} /> scrollbarSize={5}
{index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />} style={{
</React.Fragment> height:
))} totalFiltered.slice(0, 2).length > 1 ? totalFiltered.slice(0, 2).length * 150 : 200,
{radarrFiltered.length > 0 && sonarrFiltered.length > 0 && ( width: 400,
<Divider variant="dashed" my="xl" /> }}
)} >
{radarrFiltered.map((media: any, index: number) => ( {sonarrFiltered.map((media: any, index: number) => (
<React.Fragment key={index}> <React.Fragment key={index}>
<RadarrMediaDisplay media={media} /> <SonarrMediaDisplay media={media} />
{index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />} {index < sonarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
</React.Fragment> </React.Fragment>
))} ))}
{sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && ( {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" /> <Divider variant="dashed" size="sm" my="xl" />
)} )}
{lidarrFiltered.map((media: any, index: number) => ( {radarrFiltered.map((media: any, index: number) => (
<React.Fragment key={index}> <React.Fragment key={index}>
<LidarrMediaDisplay media={media} /> <RadarrMediaDisplay media={media} />
{index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />} {index < radarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
</React.Fragment> </React.Fragment>
))} ))}
{lidarrFiltered.length > 0 && readarrFiltered.length > 0 && ( {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" /> <Divider variant="dashed" size="sm" my="xl" />
)} )}
{readarrFiltered.map((media: any, index: number) => ( {lidarrFiltered.map((media: any, index: number) => (
<React.Fragment key={index}> <React.Fragment key={index}>
<ReadarrMediaDisplay media={media} /> <LidarrMediaDisplay media={media} />
{index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />} {index < lidarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
</React.Fragment> </React.Fragment>
))} ))}
</ScrollArea> {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
</Popover.Dropdown> <Divider variant="dashed" size="sm" my="xl" />
</Popover> )}
</Box> {readarrFiltered.map((media: any, index: number) => (
<React.Fragment key={index}>
<ReadarrMediaDisplay media={media} />
{index < readarrFiltered.length - 1 && <Divider variant="dashed" size="sm" my="xl" />}
</React.Fragment>
))}
</ScrollArea>
</Popover.Dropdown>
</Popover>
); );
} }