Merge pull request #1154 from Tagaishi/calendar-day-highlight-and-font-resize

✨ Add day select highlight and font resize to Calendar

public/locales/en/modules/calendar.json

@@ -15,6 +15,9 @@
       },
       "hideWeekDays": {
         "label": "Hide week days"
+      },
+      "fontSize": {
+        "label": "Font Size"
       }
     }
   }

src/widgets/calendar/CalendarDay.tsx

@@ -1,18 +1,46 @@
-import { Container, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { Container, Indicator, IndicatorProps, Popover, useMantineTheme, Button } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MediaList } from './MediaList';
 import { MediasType } from './type';
 
+
 interface CalendarDayProps {
   date: Date;
   medias: MediasType;
+  size: string;
 }
 
-export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
+export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
   const [opened, { close, open }] = useDisclosure(false);
-
-  if (medias.totalCount === 0) {
-    return <div>{date.getDate()}</div>;
+  const { radius, fn } = useMantineTheme();
+  var indicatorSize = 10;
+  var indicatorOffset = -4;
+  switch(size){
+    case "xs": {
+      indicatorSize += 0;
+      indicatorOffset -= 0;
+      break;
+    }
+    case "sm": {
+      indicatorSize += 1;
+      indicatorOffset -= 1;
+      break;
+    }
+    case "md": {
+      indicatorSize += 2;
+      indicatorOffset -= 1;
+      break;
+    }
+    case "lg": {
+      indicatorSize += 3;
+      indicatorOffset -= 2;
+      break;
+    }
+    case "xl": {
+      indicatorSize += 4;
+      indicatorOffset -= 3;
+      break;
+    }
   }
 
   return (
@@ -29,11 +57,23 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       opened={opened}
     >
       <Popover.Target>
-        <Container p={10} onClick={open}>
-          <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}>
-                <DayIndicator color="green" position="bottom-end" medias={medias.musics}>
+        <Container
+          onClick={medias.totalCount > 0 ? open : undefined}
+          sx={{ root: {
+            padding:'18% !important',
+            height: '100%',
+            width: '100%',
+            alignContent: 'center',
+            borderRadius: ['xs','sm'].includes(size) ? radius.md : radius.lg,
+            borderStyle: "solid",
+            borderWidth: "0.2rem",
+            borderColor: opened ? fn.primaryColor() : 'transparent',
+          }}}
+        >
+          <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="blue" position="top-end" medias={medias.tvShows}>
+                <DayIndicator size={indicatorSize} offset={indicatorOffset} color="green" position="bottom-end" medias={medias.musics}>
                   <div>{date.getDate()}</div>
                 </DayIndicator>
               </DayIndicator>
@@ -49,17 +89,19 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
 };
 
 interface DayIndicatorProps {
+  size: any;
+  offset: any;
   color: string;
   medias: any[];
   children: JSX.Element;
   position: IndicatorProps['position'];
 }
 
-const DayIndicator = ({ color, medias, children, position }: DayIndicatorProps) => {
+const DayIndicator = ({ size, offset, color, medias, children, position }: DayIndicatorProps) => {
   if (medias.length === 0) return children;
 
   return (
-    <Indicator size={10} withBorder offset={-5} color={color} position={position}>
+    <Indicator size={size} withBorder offset={offset} color={color} position={position}>
       {children}
     </Indicator>
   );

src/widgets/calendar/CalendarTile.tsx

@@ -37,6 +37,17 @@ const definition = defineWidget({
         { label: 'Digital', value: 'digitalRelease' },
       ],
     },
+    fontSize:{
+      type: 'select',
+      defaultValue: 'xs',
+      data: [
+        { label: 'Extra Small', value: 'xs' },
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' },
+        { label: 'Extra Large', value: 'xl' },
+      ]
+    },
   },
   gridstack: {
     minWidth: 2,
@@ -54,7 +65,7 @@ interface CalendarTileProps {
 }
 
 function CalendarTile({ widget }: CalendarTileProps) {
-  const { colorScheme } = useMantineTheme();
+  const { colorScheme, radius } = useMantineTheme();
   const { name: configName } = useConfigContext();
   const [month, setMonth] = useState(new Date());
   const isEditMode = useEditModeStore((x) => x.enabled);
@@ -77,17 +88,24 @@ function CalendarTile({ widget }: CalendarTileProps) {
       defaultDate={new Date()}
       onPreviousMonth={setMonth}
       onNextMonth={setMonth}
-      size="xs"
+      size={widget.properties.fontSize}
       locale={i18n?.resolvedLanguage ?? 'en'}
       firstDayOfWeek={widget.properties.sundayStart ? 0 : 1}
-      hideWeekdays={widget.properties.hideWeekDays ? true : false}
-      style={{ position: 'relative', top: -10 }}
+      hideWeekdays={widget.properties.hideWeekDays}
+      style={{ position: 'relative' }}
       date={month}
       maxLevel="month"
       hasNextLevel={false}
       styles={{
         calendarHeader: {
           maxWidth: 'inherit',
+          marginBottom: '0.35rem !important',
+        },
+        calendarHeaderLevel: {
+          height:"100%",
+        },
+        calendarHeaderControl:{
+          height:"100%",
         },
         calendar: {
           height: '100%',
@@ -104,15 +122,21 @@ function CalendarTile({ widget }: CalendarTileProps) {
           flexDirection: 'column',
           width: '100%',
         },
+        monthCell:{
+          textAlign:'center',
+        },
         month: {
           flex: 1,
         },
+        day:{
+          borderRadius: ['xs','sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
+        },
       }}
       getDayProps={(date) => ({
         bg: getBgColorByDateAndTheme(colorScheme, date),
       })}
       renderDay={(date) => (
-        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} />
+        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} size={widget.properties.fontSize} />
       )}
     />
   );