From 9c766c26959673389e372c3a440c1a73d5887b1d Mon Sep 17 00:00:00 2001 From: Preston Cook Date: Wed, 5 Feb 2025 23:53:16 -0600 Subject: [PATCH] feat(ui): calendar header redesign (#479) * feat(ui): calendar header redesign (WIP) * feat(ui): calendar header redesign (WIP) * chore: use path alias * feat(ui): calendar header redesign * implement Isaiah changes * refactor to prevent unnecessary recreations of resize observer * clean up resize observer and remove unnecessary checks * remove offwhite border from toolbar * merge * complete toolbar * update screenreader functionality * ensure truncation works * merge * finish new toolbar * remove unused screen size hook and .mjs file * add in export button with options * add static size for export button dropdown to prevent shrinking on smaller viewports * change schedule section min width to prevent shrinkage * change text for schedule section to match small caps * fix truncating issues with small caps * remove hidden overflow * add padding * add min height for hader * reserve scrollbar width * tmp * add sticky positioning to header * fix inert prop issue * remove pnpm lock file * fix scrollbar appearing too early * fix vertical stickiness * fix(ui): fix header spacing * fix(ui): update total hours and courses to be h4 * fix(ui): reduce top spacing on header * fix(ui): remove header top padding * fix(ui): stop bottom scrollbar from shifting layout * feat: add functionality to header and fix screenshot spacing * feat: add functionality to header and fix screenshot spacing * fix(ui): allow scrollbar in header and adjust padding to compensate for reserved space * fix(ui): make export options container hug children * fix(ui): add offwhite border * chore: add back lock file from main branch :) * feat(ui): add reduced motion for accessability * feat(ui): change right scrollbar on calendar grid to be hidden when not necessary * chore: make all buttons except export invisible * chore: remove all buttons except export and adjust hardcoded pixel widths for responsiveness --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> Co-authored-by: Razboy20 --- .../calendar/CalendarHeader.stories.tsx | 2 +- src/views/components/calendar/Calendar.tsx | 18 ++- .../components/calendar/CalendarBottomBar.tsx | 19 --- .../components/calendar/CalendarHeader.tsx | 83 ------------ .../CalendarHeader/CalendarHeader.module.scss | 28 ++++ .../CalendarHeader/CalendarHeader.tsx | 124 ++++++++++++++++++ src/views/components/common/Button.tsx | 3 + .../common/ScheduleTotalHoursAndCourses.tsx | 27 ++-- src/views/components/common/Text/Text.tsx | 3 +- 9 files changed, 187 insertions(+), 120 deletions(-) delete mode 100644 src/views/components/calendar/CalendarHeader.tsx create mode 100644 src/views/components/calendar/CalendarHeader/CalendarHeader.module.scss create mode 100644 src/views/components/calendar/CalendarHeader/CalendarHeader.tsx diff --git a/src/stories/components/calendar/CalendarHeader.stories.tsx b/src/stories/components/calendar/CalendarHeader.stories.tsx index b2d2cf26..dba73695 100644 --- a/src/stories/components/calendar/CalendarHeader.stories.tsx +++ b/src/stories/components/calendar/CalendarHeader.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import CalendarHeader from '@views/components/calendar/CalendarHeader'; +import CalendarHeader from '@views/components/calendar/CalendarHeader/CalendarHeader'; const meta = { title: 'Components/Calendar/CalendarHeader', diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx index edd8b009..9f20ead0 100644 --- a/src/views/components/calendar/Calendar.tsx +++ b/src/views/components/calendar/Calendar.tsx @@ -5,7 +5,7 @@ import { CRX_PAGES } from '@shared/types/CRXPages'; import { openReportWindow } from '@shared/util/openReportWindow'; import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar'; import CalendarGrid from '@views/components/calendar/CalendarGrid'; -import CalendarHeader from '@views/components/calendar/CalendarHeader'; +import CalendarHeader from '@views/components/calendar/CalendarHeader/CalendarHeader'; import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules'; import ResourceLinks from '@views/components/calendar/ResourceLinks'; import Divider from '@views/components/common/Divider'; @@ -23,6 +23,7 @@ import { Button } from '../common/Button'; import { LargeLogo } from '../common/LogoIcon'; import Text from '../common/Text/Text'; import CalendarFooter from './CalendarFooter'; + /** * Calendar page component */ @@ -64,7 +65,7 @@ export default function Calendar(): JSX.Element {
@@ -116,14 +117,21 @@ export default function Calendar(): JSX.Element {
-
+
{ setShowSidebar(!showSidebar); }} /> -
+
diff --git a/src/views/components/calendar/CalendarBottomBar.tsx b/src/views/components/calendar/CalendarBottomBar.tsx index ec3099a1..d7c1449a 100644 --- a/src/views/components/calendar/CalendarBottomBar.tsx +++ b/src/views/components/calendar/CalendarBottomBar.tsx @@ -1,8 +1,4 @@ -import { CalendarDots, ImageSquare } from '@phosphor-icons/react'; import type { Course } from '@shared/types/Course'; -import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils'; -import { Button } from '@views/components/common/Button'; -import Divider from '@views/components/common/Divider'; import Text from '@views/components/common/Text/Text'; import { ColorPickerProvider } from '@views/contexts/ColorPickerContext'; import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule'; @@ -61,21 +57,6 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo )}
-
- {displayCourses && } - - - -
); } diff --git a/src/views/components/calendar/CalendarHeader.tsx b/src/views/components/calendar/CalendarHeader.tsx deleted file mode 100644 index de184449..00000000 --- a/src/views/components/calendar/CalendarHeader.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { Sidebar } from '@phosphor-icons/react'; -import { initSettings, OptionsStore } from '@shared/storage/OptionsStore'; -import { Button } from '@views/components/common/Button'; -import CourseStatus from '@views/components/common/CourseStatus'; -import Divider from '@views/components/common/Divider'; -import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses'; -import useSchedules from '@views/hooks/useSchedules'; -import React, { useEffect, useState } from 'react'; - -interface CalendarHeaderProps { - sidebarOpen?: boolean; - onSidebarToggle?: () => void; -} - -/** - * Renders the header component for the calendar. - * @returns The JSX element representing the calendar header. - */ -export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: CalendarHeaderProps): JSX.Element { - const [enableCourseStatusChips, setEnableCourseStatusChips] = useState(false); - const [_enableDataRefreshing, setEnableDataRefreshing] = useState(false); - - const [activeSchedule] = useSchedules(); - - useEffect(() => { - initSettings().then(({ enableCourseStatusChips, enableDataRefreshing }) => { - setEnableCourseStatusChips(enableCourseStatusChips); - setEnableDataRefreshing(enableDataRefreshing); - }); - - const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => { - setEnableCourseStatusChips(newValue); - // console.log('enableCourseStatusChips', newValue); - }); - - const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => { - setEnableDataRefreshing(newValue); - // console.log('enableDataRefreshing', newValue); - }); - - return () => { - OptionsStore.removeListener(l1); - OptionsStore.removeListener(l2); - }; - }, []); - - return ( -
- {!sidebarOpen && ( -
-
- ); -} diff --git a/src/views/components/calendar/CalendarHeader/CalendarHeader.module.scss b/src/views/components/calendar/CalendarHeader/CalendarHeader.module.scss new file mode 100644 index 00000000..9bbaef38 --- /dev/null +++ b/src/views/components/calendar/CalendarHeader/CalendarHeader.module.scss @@ -0,0 +1,28 @@ +.cqInline { + container-type: inline-size; + + @mixin visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; + } + + // value with all buttons is 610px + @container (width < 90px) { + .primaryActions span { + @include visually-hidden; + } + } + + // @container (width < 445px) { + // .secondaryActions span { + // @include visually-hidden; + // } + // } +} diff --git a/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx b/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx new file mode 100644 index 00000000..828f48d5 --- /dev/null +++ b/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx @@ -0,0 +1,124 @@ +import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'; +import { CalendarDots, Export, FilePng, Sidebar } from '@phosphor-icons/react'; +import styles from '@views/components/calendar/CalendarHeader/CalendarHeader.module.scss'; +import { Button } from '@views/components/common/Button'; +import DialogProvider from '@views/components/common/DialogProvider/DialogProvider'; +import Divider from '@views/components/common/Divider'; +import { ExtensionRootWrapper, styleResetClass } from '@views/components/common/ExtensionRoot/ExtensionRoot'; +import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses'; +import useSchedules from '@views/hooks/useSchedules'; +import clsx from 'clsx'; +import React from 'react'; + +import { saveAsCal, saveCalAsPng } from '../utils'; + +interface CalendarHeaderProps { + sidebarOpen?: boolean; + onSidebarToggle?: () => void; +} + +/** + * Renders the header component for the calendar. + * @returns The JSX element representing the calendar header. + */ +export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: CalendarHeaderProps): JSX.Element { + const [activeSchedule] = useSchedules(); + + return ( +
+ {!sidebarOpen && ( + + + + + + + + + + {/* + + */} + + + + {/* + */} +
+ {/* +
+ + +
*/} +
+
+ ); +} diff --git a/src/views/components/common/Button.tsx b/src/views/components/common/Button.tsx index 722dbb49..832a562d 100644 --- a/src/views/components/common/Button.tsx +++ b/src/views/components/common/Button.tsx @@ -7,6 +7,7 @@ import React from 'react'; interface Props { className?: string; + ref?: React.ForwardedRef; style?: React.CSSProperties; variant?: 'filled' | 'outline' | 'minimal'; size?: 'regular' | 'small' | 'mini'; @@ -24,6 +25,7 @@ interface Props { */ export function Button({ className, + ref, style, variant = 'filled', size = 'regular', @@ -42,6 +44,7 @@ export function Button({ return (