-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <razboy20@gmail.com>
- Loading branch information
3 people
authored
Feb 6, 2025
1 parent
4752f58
commit 9c766c2
Showing
9 changed files
with
186 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
28 changes: 28 additions & 0 deletions
28
src/views/components/calendar/CalendarHeader/CalendarHeader.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| // } | ||
| // } | ||
| } |
124 changes: 124 additions & 0 deletions
124
src/views/components/calendar/CalendarHeader/CalendarHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div | ||
| style={{ scrollbarGutter: 'stable' }} | ||
| className='sticky left-0 right-0 min-h-[85px] flex items-center gap-5 overflow-x-scroll overflow-y-hidden pl-spacing-7 pt-spacing-5' | ||
| > | ||
| {!sidebarOpen && ( | ||
| <Button | ||
| variant='minimal' | ||
| color='theme-black' | ||
| onClick={onSidebarToggle} | ||
| className='h-fit w-fit screenshot:hidden !p-0' | ||
| icon={Sidebar} | ||
| /> | ||
| )} | ||
|
|
||
| <div className='min-w-[11.5rem] screenshot:transform-origin-left screenshot:scale-120'> | ||
| <ScheduleTotalHoursAndCourses | ||
| scheduleName={activeSchedule.name} | ||
| totalHours={activeSchedule.hours} | ||
| totalCourses={activeSchedule.courses.length} | ||
| /> | ||
| </div> | ||
| <Divider className='self-center screenshot:hidden' size='1.75rem' orientation='vertical' /> | ||
| {/* min-w-[310px] is the value with all the buttons */} | ||
| <div className={clsx(styles.cqInline, 'flex flex-1 gap-5 min-w-[45x] screenshot:hidden')}> | ||
| <div className={clsx(styles.primaryActions, 'min-w-fit flex gap-5')}> | ||
| <DialogProvider> | ||
| <Menu> | ||
| <MenuButton className='bg-transparent'> | ||
| <Button color='ut-black' size='small' variant='minimal' icon={Export}> | ||
| Export | ||
| </Button> | ||
| </MenuButton> | ||
| <MenuItems | ||
| as={ExtensionRootWrapper} | ||
| className={clsx([ | ||
| styleResetClass, | ||
| 'mt-spacing-3', | ||
| 'w-fit cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite1 focus:outline-none', | ||
| 'data-[closed]:(opacity-0 scale-95)', | ||
| 'data-[enter]:(ease-out-expo duration-150)', | ||
| 'data-[leave]:(ease-out duration-50)', | ||
| ])} | ||
| transition | ||
| anchor='bottom start' | ||
| > | ||
| <MenuItem> | ||
| <Button | ||
| className='w-full flex justify-start' | ||
| onClick={() => requestAnimationFrame(() => saveCalAsPng())} | ||
| color='ut-black' | ||
| size='small' | ||
| variant='minimal' | ||
| icon={FilePng} | ||
| > | ||
| Save as .png | ||
| </Button> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <Button | ||
| className='w-full flex justify-start' | ||
| onClick={saveAsCal} | ||
| color='ut-black' | ||
| size='small' | ||
| variant='minimal' | ||
| icon={CalendarDots} | ||
| > | ||
| Save as .cal | ||
| </Button> | ||
| </MenuItem> | ||
| {/* <MenuItem> | ||
| <Button color='ut-black' size='small' variant='minimal' icon={FileTxt}> | ||
| Export Unique IDs | ||
| </Button> | ||
| </MenuItem> */} | ||
| </MenuItems> | ||
| </Menu> | ||
| </DialogProvider> | ||
| {/* <Button className='invisible' color='ut-black' size='small' variant='minimal' icon={PlusCircle}> | ||
| Quick Add | ||
| </Button> | ||
| <Button className='invisible' color='ut-black' size='small' variant='minimal' icon={SelectionPlus}> | ||
| Block | ||
| </Button> */} | ||
| </div> | ||
| {/* <Divider className='self-center' size='1.75rem' orientation='vertical' /> | ||
| <div className={clsx(styles.secondaryActions, 'min-w-fit flex flex-1 justify-end gap-5')}> | ||
| <Button className='invisible' color='ut-black' size='small' variant='minimal' icon={BookmarkSimple}> | ||
| Bookmarks | ||
| </Button> | ||
| <Button className='invisible' color='ut-black' size='small' variant='minimal' icon={MapPinArea}> | ||
| UT Map | ||
| </Button> | ||
| </div> */} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.