jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: calendar indicators (#2712)

Browse Source
This commit is contained in:
Manuel
2025-03-28 12:43:45 +00:00
committed by GitHub
parent 08e0dd76ae
commit 70ea093eb6
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/widgets/src/calendar/calender-day.tsx
View File

@@ -23,6 +23,7 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
const minAxisSize = Math.min(rootWidth, rootHeight); const minAxisSize = Math.min(rootWidth, rootHeight);
const shouldScaleDown = minAxisSize < 350; const shouldScaleDown = minAxisSize < 350;
const isSmall = rootHeight < 256;
return ( return (
<Popover <Popover
@@ -43,9 +44,10 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
h="100%" h="100%"
w="100%" w="100%"
p={0} p={0}
pt={isSmall ? 5 : 20}
pb={isSmall ? 5 : 20}
m={0} m={0}
bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`} bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
pos={"relative"}
style={{ style={{
alignContent: "center", alignContent: "center",
borderRadius: actualItemRadius, borderRadius: actualItemRadius,
@@ -60,7 +62,7 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
<Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}> <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
{date.getDate()} {date.getDate()}
</Text> </Text>
<NotificationIndicator events={events} rootHeight={rootHeight} /> <NotificationIndicator events={events} isSmall={isSmall} />
</Container> </Container>
</Popover.Target> </Popover.Target>
{/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */} {/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */}
@@ -73,15 +75,14 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
interface NotificationIndicatorProps { interface NotificationIndicatorProps {
events: CalendarEvent[]; events: CalendarEvent[];
rootHeight: number; isSmall: boolean;
} }
const NotificationIndicator = ({ events, rootHeight }: NotificationIndicatorProps) => { const NotificationIndicator = ({ events, isSmall }: NotificationIndicatorProps) => {
const isSmall = rootHeight < 256;
const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String); const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String);
/* position bottom is lower when small to not be on top of number*/ /* position bottom is lower when small to not be on top of number*/
return ( return (
<Flex w="75%" pos={"absolute"} bottom={isSmall ? -2 : 4} left={"12.5%"} p={0} direction={"row"} justify={"center"}> <Flex w="75%" pos={"absolute"} bottom={isSmall ? 4 : 10} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
{notificationEvents.map((notificationEvent) => { {notificationEvents.map((notificationEvent) => {
return <Box key={notificationEvent} bg={notificationEvent} h={2} p={0} style={{ flex: 1, borderRadius: 5 }} />; return <Box key={notificationEvent} bg={notificationEvent} h={2} p={0} style={{ flex: 1, borderRadius: 5 }} />;
})} })}

7
packages/widgets/src/calendar/component.tsx
View File

@@ -107,11 +107,10 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
day: { day: {
borderRadius: actualItemRadius, borderRadius: actualItemRadius,
width: "100%", width: "100%",
height: "100%", height: "auto",
}, position: "relative",
month: {
height: "100%",
}, },
month: {},
weekday: { weekday: {
padding: 0, padding: 0,
}, },