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>
This commit is contained in:
@@ -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
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex items-center screenshot:hidden'>
|
||||
{displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
|
||||
<Button variant='minimal' color='ut-black' icon={CalendarDots} onClick={saveAsCal}>
|
||||
Save as .CAL
|
||||
</Button>
|
||||
<Divider orientation='vertical' size='1rem' className='mx-1.25' />
|
||||
<Button
|
||||
variant='minimal'
|
||||
color='ut-black'
|
||||
icon={ImageSquare}
|
||||
onClick={() => requestAnimationFrame(() => saveCalAsPng())}
|
||||
>
|
||||
Save as .PNG
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user