mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-09 15:05:48 +01:00
Fixed build error and refactor
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { Container, Indicator, IndicatorProps, Popover, Center } from '@mantine/core';
|
import { Container, Indicator, IndicatorProps, Popover, useMantineTheme, Button } from '@mantine/core';
|
||||||
import { useDisclosure } from '@mantine/hooks';
|
import { useDisclosure } from '@mantine/hooks';
|
||||||
import { MediaList } from './MediaList';
|
import { MediaList } from './MediaList';
|
||||||
import { MediasType } from './type';
|
import { MediasType } from './type';
|
||||||
@@ -12,6 +12,7 @@ interface CalendarDayProps {
|
|||||||
|
|
||||||
export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
|
export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
|
||||||
const [opened, { close, open }] = useDisclosure(false);
|
const [opened, { close, open }] = useDisclosure(false);
|
||||||
|
const { radius, fn } = useMantineTheme();
|
||||||
var indicatorSize = 10;
|
var indicatorSize = 10;
|
||||||
var indicatorOffset = -4;
|
var indicatorOffset = -4;
|
||||||
switch(size){
|
switch(size){
|
||||||
@@ -54,18 +55,21 @@ export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
|
|||||||
}}
|
}}
|
||||||
onClose={close}
|
onClose={close}
|
||||||
opened={opened}
|
opened={opened}
|
||||||
sx={(theme : any) => ({
|
>
|
||||||
|
<Popover.Target>
|
||||||
|
<Container
|
||||||
|
onClick={medias.totalCount > 0 ? open : undefined}
|
||||||
|
sx={{ root: {
|
||||||
padding:'18% !important',
|
padding:'18% !important',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
borderRadius: (size!=="xs" && size!=="sm")?theme.radius.lg:theme.radius.md,
|
alignContent: 'center',
|
||||||
|
borderRadius: ['xs','sm'].includes(size) ? radius.md : radius.lg,
|
||||||
borderStyle: "solid",
|
borderStyle: "solid",
|
||||||
borderWidth: "0.2rem",
|
borderWidth: "0.2rem",
|
||||||
borderColor: opened? theme.fn.primaryColor() : '#00000000',
|
borderColor: opened ? fn.primaryColor() : 'transparent',
|
||||||
})}
|
}}}
|
||||||
>
|
>
|
||||||
<Popover.Target>
|
|
||||||
<Container align="center" onClick={(medias.totalCount === 0)? undefined:open}>
|
|
||||||
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}>
|
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}>
|
||||||
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}>
|
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}>
|
||||||
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}>
|
<DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}>
|
||||||
@@ -77,7 +81,7 @@ export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
|
|||||||
</DayIndicator>
|
</DayIndicator>
|
||||||
</Container>
|
</Container>
|
||||||
</Popover.Target>
|
</Popover.Target>
|
||||||
<Popover.Dropdown disabled = {(medias.totalCount === 0)? false:true}>
|
<Popover.Dropdown>
|
||||||
<MediaList medias={medias} />
|
<MediaList medias={medias} />
|
||||||
</Popover.Dropdown>
|
</Popover.Dropdown>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
|
|||||||
size={widget.properties.fontSize}
|
size={widget.properties.fontSize}
|
||||||
locale={i18n?.resolvedLanguage ?? 'en'}
|
locale={i18n?.resolvedLanguage ?? 'en'}
|
||||||
firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
|
firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
|
||||||
hideWeekdays={widget.properties.hideWeekDays ? true : false}
|
hideWeekdays={widget.properties.hideWeekDays}
|
||||||
style={{ position: 'relative' }}
|
style={{ position: 'relative' }}
|
||||||
date={month}
|
date={month}
|
||||||
maxLevel="month"
|
maxLevel="month"
|
||||||
@@ -129,7 +129,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
day:{
|
day:{
|
||||||
borderRadius: (widget.properties.fontSize !== "xs" && widget.properties.fontSize!=="sm")? radius.lg:radius.md,
|
borderRadius: ['xs','sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
getDayProps={(date) => ({
|
getDayProps={(date) => ({
|
||||||
|
|||||||
Reference in New Issue
Block a user