feat: calendar matchings (#173)

* feat: calendar matchings * fix: build * refactor: resolve pr comments * fix: destrucure editorRef --------- Co-authored-by: doprz <[email protected]>
Longhorn-Developers · Mar 17, 2024 · 791a42b · 791a42b
1 parent df18491
commit 791a42b
Show file tree

Hide file tree

Showing 23 changed files with 243 additions and 410 deletions.
diff --git a/src/pages/calendar/CalendarMain.tsx b/src/pages/calendar/CalendarMain.tsx
@@ -8,7 +8,7 @@ import React from 'react';
  */
 export default function CalendarMain() {
     return (
-        <ExtensionRoot>
+        <ExtensionRoot className='h-full w-full'>
             <Calendar />
         </ExtensionRoot>
     );

diff --git a/src/pages/calendar/index.html b/src/pages/calendar/index.html
@@ -7,9 +7,9 @@
         <title>Calendar</title>
     </head>
 
-    <body>
+    <body style="min-height: 100vh; height: 0; margin: 0">
         <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root"></div>
+        <div id="root" style="height: 100%"></div>
 
         <script src="./index.tsx" type="module"></script>
     </body>

diff --git a/src/stories/components/calendar/CalendarGridCell.stories.tsx b/src/stories/components/calendar/CalendarGridCell.stories.tsx
@@ -10,6 +10,10 @@ const meta = {
         layout: 'centered',
         tags: ['autodocs'],
     },
+    args: {
+        row: 0,
+        col: 0,
+    },
 } satisfies Meta<typeof CalendarCell>;
 
 export default meta;

diff --git a/src/stories/components/calendar/CalendarSchedules.stories.tsx b/src/stories/components/calendar/CalendarSchedules.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
-import React from 'react';
 
 const meta = {
     title: 'Components/Calendar/CalendarSchedules',
@@ -9,11 +8,6 @@ const meta = {
         layout: 'centered',
         tags: ['autodocs'],
     },
-    render: args => (
-        <div>
-            <CalendarSchedules {...args} />
-        </div>
-    ),
 } satisfies Meta<typeof CalendarSchedules>;
 
 export default meta;

diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
@@ -16,7 +16,7 @@ import RefreshIcon from '~icons/material-symbols/refresh';
 import SettingsIcon from '~icons/material-symbols/settings';
 
 import CourseStatus from './common/CourseStatus/CourseStatus';
-import { LogoIcon } from './common/LogoIcon';
+import { SmallLogo } from './common/LogoIcon';
 import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
 import ScheduleDropdown from './common/ScheduleDropdown/ScheduleDropdown';
 import ScheduleListItem from './common/ScheduleListItem/ScheduleListItem';
@@ -44,16 +44,7 @@ export default function PopupMain(): JSX.Element {
             <div className='h-screen max-h-full flex flex-col bg-white'>
                 <div className='p-5 py-3.5'>
                     <div className='flex items-center justify-between bg-white'>
-                        <div className='flex items-center gap-2'>
-                            <LogoIcon />
-                            <div className='flex flex-col'>
-                                <span className='text-lg text-ut-burntorange font-medium leading-[18px]'>
-                                    UT Registration
-                                    <br />
-                                </span>
-                                <span className='text-lg text-ut-orange font-medium leading-[18px]'>Plus</span>
-                            </div>
-                        </div>
+                        <SmallLogo />
                         <div className='flex items-center gap-2.5'>
                             <button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
                                 <CalendarIcon className='size-6 text-white' />

diff --git a/src/views/components/calendar/Calendar/Calendar.module.scss b/src/views/components/calendar/Calendar/Calendar.module.scss
diff --git a/src/views/components/calendar/Calendar/Calendar.tsx b/src/views/components/calendar/Calendar/Calendar.tsx
@@ -11,7 +11,6 @@ import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSched
 import { MessageListener } from 'chrome-extension-toolkit';
 import React, { useEffect, useRef, useState } from 'react';
 
-import styles from './Calendar.module.scss';
 /**
  * A reusable chip component that follows the design system of the extension.
  * @returns
@@ -33,8 +32,6 @@ export default function Calendar(): JSX.Element {
     });
 
     const [showPopup, setShowPopup] = useState<boolean>(course !== null);
-    const [sidebarWidth, setSidebarWidth] = useState('20%');
-    const [scale, setScale] = useState(1);
 
     useEffect(() => {
         const listener = new MessageListener<CalendarTabMessages>({
@@ -52,59 +49,21 @@ export default function Calendar(): JSX.Element {
         return () => listener.unlisten();
     }, [activeSchedule.courses]);
 
-    useEffect(() => {
-        const adjustLayout = () => {
-            const windowHeight = window.innerHeight;
-            const windowWidth = window.innerWidth;
-
-            const desiredCalendarHeight = 760;
-            const minSidebarWidthPixels = 230;
-
-            const scale = Math.min(1, windowHeight / desiredCalendarHeight);
-
-            const sidebarWidthPixels = Math.max(
-                windowWidth * scale - windowWidth + minSidebarWidthPixels,
-                minSidebarWidthPixels
-            );
-            const newSidebarWidth = `${(sidebarWidthPixels / windowWidth) * 100}%`;
-
-            setScale(scale);
-            setSidebarWidth(newSidebarWidth);
-        };
-
-        adjustLayout();
-
-        window.addEventListener('resize', adjustLayout);
-        return () => window.removeEventListener('resize', adjustLayout);
-    }, []);
-
     useEffect(() => {
         if (course) setShowPopup(true);
     }, [course]);
 
-    const calendarContainerStyle = {
-        transform: `scale(${scale})`,
-        transformOrigin: 'top left',
-        marginTop: '-20px',
-    };
-
     return (
-        <div className='h-screen flex flex-col' style={{ width: 'calc(100% - 1rem)' }}>
-            <div className='pl-5'>
-                <CalendarHeader />
-            </div>
-            <div className={`flex flex-grow flex-row overflow-hidden pl-4 ${styles.scrollableSchedules}`}>
-                <div className='sidebar-style' style={{ width: sidebarWidth, padding: '10px 15px 5px 5px' }}>
-                    <div className={`mb-4 ${styles.scrollableLimit}`}>
-                        <CalendarSchedules />
-                    </div>
-                    <Divider orientation='horizontal' size='100%' />
-                    <div className='mt-4'>
-                        <ImportantLinks />
-                    </div>
+        <div className='h-full w-full flex flex-col'>
+            <CalendarHeader />
+            <div className='h-full flex flex-grow overflow-hidden pl-7.5'>
+                <div className='overflow-auto py-5'>
+                    <CalendarSchedules />
+                    <Divider orientation='horizontal' size='100%' className='my-5' />
+                    <ImportantLinks />
                 </div>
-                <div className='flex flex-grow flex-col' style={calendarContainerStyle} ref={calendarRef}>
-                    <div className='flex-grow overflow-auto'>
+                <div className='flex flex-grow flex-col' ref={calendarRef}>
+                    <div className='flex-grow overflow-auto px-4 pt-6.5'>
                         <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
                     </div>
                     <CalendarBottomBar calendarRef={calendarRef} />

diff --git a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
@@ -56,7 +56,11 @@ export default function CalendarCourseCell({
 
     return (
         <div
-            className={clsx('h-full w-full flex justify-center rounded p-2 cursor-pointer', fontColor, className)}
+            className={clsx(
+                'h-full min-w-full w-0 flex justify-center rounded p-2 cursor-pointer',
+                fontColor,
+                className
+            )}
             style={{
                 backgroundColor: colors.primaryColor,
             }}

diff --git a/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss b/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss