feat: screenshot whole page, hide certain elements, screenshot fixed size (#180)

* feat: screenshot whole page, hide certain elements, screenshot fixed size

* refactor: use variants instead of groups and custom rules

* feat: scaled header, smaller body, weird padding/margin changes

* feat: consistent sizing & style regardless of zoom

* feat: use downloadBlob instead of hand-rolled image saving

* fix: be type safe is toBlob returns Promise<null>

* fix: revoke object url when it should be

* fix: animation scheduling

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
This commit is contained in:
Samuel Gunter
2024-03-21 19:20:03 -05:00
committed by GitHub
parent 2dfb10e57b
commit 7d4c5d7be8
11 changed files with 81 additions and 37 deletions

View File

@@ -13,17 +13,15 @@ import CalendarCourseBlock from './CalendarCourseCell';
type CalendarBottomBarProps = {
courses?: CalendarCourseCellProps[];
calendarRef: React.RefObject<HTMLDivElement>;
};
/**
* Renders the bottom bar of the calendar component.
*
* @param {Object[]} courses - The list of courses to display in the calendar.
* @param {React.RefObject} calendarRef - The reference to the calendar component.
* @returns {JSX.Element} The rendered bottom bar component.
*/
export default function CalendarBottomBar({ courses, calendarRef }: CalendarBottomBarProps): JSX.Element {
export default function CalendarBottomBar({ courses }: CalendarBottomBarProps): JSX.Element {
const displayCourses = courses && courses.length > 0;
return (
@@ -50,13 +48,18 @@ export default function CalendarBottomBar({ courses, calendarRef }: CalendarBott
</>
)}
</div>
<div className='flex items-center'>
<div className='flex items-center screenshot:hidden'>
{displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
<Button variant='single' color='ut-black' icon={CalendarMonthIcon} onClick={saveAsCal}>
Save as .CAL
</Button>
<Divider orientation='vertical' size='1rem' className='mx-1.25' />
<Button variant='single' color='ut-black' icon={ImageIcon} onClick={() => saveCalAsPng(calendarRef)}>
<Button
variant='single'
color='ut-black'
icon={ImageIcon}
onClick={() => requestAnimationFrame(() => saveCalAsPng())}
>
Save as .PNG
</Button>
</div>