General visual improvement on the calendar + Font size selection + selection box around the day clicked.

Fixes #1145

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,45 @@
-import { Container, Indicator, IndicatorProps, Popover } from '@mantine/core';
+import { Container, Indicator, IndicatorProps, Popover, Center } 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>;
+  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 (
@@ -27,13 +54,22 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
       }}
       onClose={close}
       opened={opened}
+      sx={(theme : any) => ({
+        padding:'18% !important',
+        height: '100%',
+        width: '100%',
+        borderRadius: (size!=="xs" && size!=="sm")?theme.radius.lg:theme.radius.md,
+        borderStyle: "solid",
+        borderWidth: "0.2rem",
+        borderColor: opened? theme.fn.primaryColor() : '#00000000',
+      })}
     >
       <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 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="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>
@@ -41,7 +77,7 @@ export const CalendarDay = ({ date, medias }: CalendarDayProps) => {
           </DayIndicator>
         </Container>
       </Popover.Target>
-      <Popover.Dropdown>
+      <Popover.Dropdown disabled = {(medias.totalCount === 0)? false:true}>
         <MediaList medias={medias} />
       </Popover.Dropdown>
     </Popover>
@@ -49,17 +85,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 }}
+      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: (widget.properties.fontSize !== "xs" && widget.properties.fontSize!=="sm")? radius.lg:radius.md,
+        },
       }}
       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} />
       )}
     />
   );