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

@@ -9,7 +9,7 @@ import Divider from '@views/components/common/Divider';
import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
import { MessageListener } from 'chrome-extension-toolkit';
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useState } from 'react';
import CalendarFooter from './CalendarFooter';
import TeamLinks from './TeamLinks';
@@ -18,7 +18,6 @@ import TeamLinks from './TeamLinks';
* Calendar page component
*/
export default function Calendar(): JSX.Element {
const calendarRef = useRef<HTMLDivElement>(null);
const { courseCells, activeSchedule } = useFlattenedCourseSchedule();
const [course, setCourse] = useState<Course | null>((): Course | null => {
@@ -73,7 +72,7 @@ export default function Calendar(): JSX.Element {
/>
<div className='h-full flex overflow-auto pl-3'>
{showSidebar && (
<div className='h-full flex flex-none flex-col justify-between pb-5 pl-4.5'>
<div className='h-full flex flex-none flex-col justify-between pb-5 pl-4.5 screenshot:hidden'>
<div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pt-5'>
<CalendarSchedules />
<Divider orientation='horizontal' size='100%' className='my-5' />
@@ -84,11 +83,11 @@ export default function Calendar(): JSX.Element {
<CalendarFooter />
</div>
)}
<div className='h-full min-w-4xl flex flex-grow flex-col overflow-y-auto' ref={calendarRef}>
<div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6'>
<div className='h-full min-w-4xl flex flex-grow flex-col overflow-y-auto'>
<div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
<CalendarGrid courseCells={courseCells} setCourse={setCourse} />
</div>
<CalendarBottomBar calendarRef={calendarRef} />
<CalendarBottomBar />
</div>
</div>