DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): update popup and course blocks (#506)

Browse Source 
* feat(ui): add time and location to popup

* feat(ui): memoize meeting times

* feat(ui): remove resizing

* feat(ui): add no select to copy course id button

* feat(ui): complete update to popup and course blocks

* chore: update settings page

* chore: fix types

* fix(ui): update spacing, padding, and remove last updated section

* chore: fix type issues

* fix(ui): update borders to offwhite/50

* fix(ui): apply proper offwhite styling

* fix(ui): add unique key to async courses in bottom bar
This commit is contained in:
Preston Cook
2025-02-13 18:07:05 -06:00
committed by GitHub
parent b171f01d01
commit ee4c6ce699
14 changed files with 163 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/components/PopupMain.tsx
View File

@@ -1,15 +1,13 @@
import splashText from '@assets/insideJokes';
import createSchedule from '@pages/background/lib/createSchedule';
import { CalendarDots, Flag, GearSix, Plus } from '@phosphor-icons/react';
import { CalendarDots, GearSix, Plus } from '@phosphor-icons/react';
import { background } from '@shared/messages';
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
import { openReportWindow } from '@shared/util/openReportWindow';
import Divider from '@views/components/common/Divider';
import Text from '@views/components/common/Text/Text';
import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
import useSchedules, { getActiveSchedule, replaceSchedule, switchSchedule } from '@views/hooks/useSchedules';
import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
import useKC_DABR_WASM from 'kc-dabr-wasm';
import React, { useEffect, useState } from 'react';
@@ -27,14 +25,14 @@ import { SortableList } from './common/SortableList';
*/
export default function PopupMain(): JSX.Element {
const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
// const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
useKC_DABR_WASM();
useEffect(() => {
const initAllSettings = async () => {
const { enableCourseStatusChips, enableDataRefreshing } = await initSettings();
const { enableCourseStatusChips } = await initSettings();
setEnableCourseStatusChips(enableCourseStatusChips);
setEnableDataRefreshing(enableDataRefreshing);
// setEnableDataRefreshing(enableDataRefreshing);
};
initAllSettings();
@@ -44,14 +42,14 @@ export default function PopupMain(): JSX.Element {
// console.log('enableCourseStatusChips', newValue);
});
const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
setEnableDataRefreshing(newValue);
// console.log('enableDataRefreshing', newValue);
});
// const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
// setEnableDataRefreshing(newValue);
// // console.log('enableDataRefreshing', newValue);
// });
return () => {
OptionsStore.removeListener(l1);
OptionsStore.removeListener(l2);
// OptionsStore.removeListener(l2);
};
}, []);
@@ -86,7 +84,7 @@ export default function PopupMain(): JSX.Element {
return (
<div className='h-screen max-h-full flex flex-col bg-white'>
<div className='p-5 py-3.5'>
<div className='px-spacing-6 py-spacing-5'>
<div className='flex items-center justify-between bg-white'>
<SmallLogo />
<div className='flex items-center gap-2.5'>
@@ -95,13 +93,15 @@ export default function PopupMain(): JSX.Element {
color='ut-burntorange'
onClick={handleCalendarOpenOnClick}
icon={CalendarDots}
/>
iconProps={{ weight: 'fill' }}
>
Calendar
</Button>
<Button variant='minimal' color='ut-black' onClick={handleOpenOptions} icon={GearSix} />
<Button variant='minimal' color='ut-black' onClick={openReportWindow} icon={Flag} />
</div>
</div>
</div>
<Divider orientation='horizontal' size='100%' />
<Divider className='bg-ut-offwhite/50' orientation='horizontal' size='100%' />
<div className='px-5 pb-2.5 pt-3.75'>
<ScheduleDropdown>
<SortableList
@@ -139,7 +139,10 @@ export default function PopupMain(): JSX.Element {
</Text>
</div>
)}
<div className='flex-1 self-stretch overflow-y-auto px-5'>
<div
style={{ scrollbarGutter: 'stable' }}
className='flex-1 self-stretch overflow-y-scroll pl-spacing-6 pr-[6px]'
>
{activeSchedule?.courses?.length > 0 && (
<SortableList
draggables={activeSchedule.courses.map(course => ({
@@ -157,35 +160,35 @@ export default function PopupMain(): JSX.Element {
/>
)}
</div>
<div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
<div className='flex gap-2.5'>
<div className='w-full flex flex-col items-center gap-1.25 px-spacing-6 py-spacing-5'>
<div className='flex gap-spacing-6'>
{enableCourseStatusChips && (
<>
<CourseStatus status='WAITLISTED' size='mini' />
<CourseStatus status='CLOSED' size='mini' />
<CourseStatus status='CANCELLED' size='mini' />
<CourseStatus status='WAITLISTED' size='small' />
<CourseStatus status='CLOSED' size='small' />
<CourseStatus status='CANCELLED' size='small' />
</>
)}
</div>
{enableDataRefreshing && (
<div className='inline-flex items-center self-center gap-1'>
<Text variant='mini' className='text-ut-gray !font-normal'>
{/* {enableDataRefreshing && (
<div className='inline-flex items-center self-center gap-1'> */}
{/* <Text variant='mini' className='text-ut-gray !font-normal'>
LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
</Text>
{/* <button
className='h-4 w-4 bg-transparent p-0 btn'
onClick={() => {
setIsRefreshing(true);
}}
>
<RefreshIcon
className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
'animate-spin': isRefreshing,
})}
/>
</button> */}
</div>
)}
</Text> */}
{/* <button
className='h-4 w-4 bg-transparent p-0 btn'
onClick={() => {
setIsRefreshing(true);
}}
>
<RefreshIcon
className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
'animate-spin': isRefreshing,
})}
/>
</button> */}
{/* </div>
)} */}
</div>
</div>
);

2
src/views/components/calendar/Calendar.tsx
View File

@@ -65,7 +65,7 @@ export default function Calendar(): JSX.Element {
<div className='h-screen flex overflow-auto'>
<div
className={clsx(
'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-theme-offwhite/50 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
'py-spacing-6 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-ut-offwhite/50 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] motion-safe:duration-300 motion-safe:ease-out-expo motion-safe:transition-[max-width] screenshot:hidden',
{
'max-w-[20.3125rem] ': showSidebar,
'max-w-0 pointer-events-none': !showSidebar,

2
src/views/components/calendar/CalendarBottomBar.tsx
View File

@@ -43,9 +43,9 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
const { courseDeptAndInstr, status, className } = block.componentProps;
return (
<CalendarCourseBlock
key={block.course.uniqueId}
courseDeptAndInstr={courseDeptAndInstr}
status={status}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-12.5! items-center')}
onClick={() => setCourse(block.course)}
blockData={block}

2
src/views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker.tsx
View File

@@ -105,7 +105,7 @@ export default function CourseCellColorPicker({ defaultColor }: CourseCellColorP
};
return (
<div className='inline-flex flex-col border border-1 border-ut-offwhite rounded-1 bg-white p-1.25'>
<div className='inline-flex flex-col border border-ut-offwhite rounded-1 bg-white p-1.25'>
<div className='grid grid-cols-6 gap-1'>
{Array.from(colorPatchColors.keys()).map(baseColor => (
<ColorPatch

2
src/views/components/calendar/CalendarHeader/CalendarHeader.tsx
View File

@@ -62,7 +62,7 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
className={clsx([
styleResetClass,
'mt-spacing-3',
'min-w-max cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite1 focus:outline-none',
'min-w-max cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite/50 focus:outline-none',
'data-[closed]:(opacity-0 scale-95)',
'data-[enter]:(ease-out-expo duration-150)',
'data-[leave]:(ease-out duration-50)',

2
src/views/components/common/Divider.tsx
View File

@@ -41,7 +41,7 @@ export default function Divider({ className, testId, size, orientation }: Divide
<div
style={style}
data-testid={testId}
className={clsx('border-solid border-theme-offwhite/50 w-0 h-0', className)}
className={clsx('border-solid border-ut-offwhite/50 w-0 h-0', className)}
/>
);
}

144
src/views/components/common/PopupCourseBlock.tsx
View File

@@ -8,7 +8,7 @@ import { pickFontColor } from '@shared/util/colors';
import { StatusIcon } from '@shared/util/icons';
import Text from '@views/components/common/Text/Text';
import clsx from 'clsx';
import React, { useEffect, useRef, useState } from 'react';
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
import { Button } from './Button';
import { SortableListDragHandle } from './SortableListDragHandle';
@@ -24,6 +24,19 @@ export interface PopupCourseBlockProps {
const IS_STORYBOOK = import.meta.env.STORYBOOK;
const CourseMeeting = memo(
({ meeting, fontColor }: { meeting: Course['schedule']['meetings'][0]; fontColor: string }) => {
const dateString = meeting.getDaysString({ format: 'short' });
return (
<Text key={dateString} className={clsx('flex-1 truncate select-none', fontColor)} variant='h3-course'>
{`${dateString} ${meeting.getTimeString({ separator: '-' })}${
meeting.location ? `, ${meeting.location.building} ${meeting.location.room}` : ''
}`}
</Text>
);
}
);
/**
* The "course block" to be used in the extension popup.
*
@@ -35,12 +48,18 @@ const IS_STORYBOOK = import.meta.env.STORYBOOK;
*/
export default function PopupCourseBlock({ className, course, colors }: PopupCourseBlockProps): JSX.Element {
const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
const [isCopied, setIsCopied] = useState<boolean>(false);
const lastCopyTime = useRef<number>(0);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
initSettings().then(({ enableCourseStatusChips }) => setEnableCourseStatusChips(enableCourseStatusChips));
const initAllSettings = async () => {
const { enableCourseStatusChips } = await initSettings();
setEnableCourseStatusChips(enableCourseStatusChips);
};
initAllSettings();
const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => {
setEnableCourseStatusChips(newValue);
@@ -84,77 +103,104 @@ export default function PopupCourseBlock({ className, course, colors }: PopupCou
setTimeout(() => setIsCopied(false), 500);
};
const meetings = useMemo(
() =>
course.schedule.meetings.map(meeting => (
<CourseMeeting
key={meeting.getDaysString({ format: 'short' })}
meeting={meeting}
fontColor={fontColor}
/>
)),
[course.schedule.meetings, fontColor]
);
return (
<div
style={{
backgroundColor: colors.primaryColor,
}}
className={clsx(
'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-2 focusable cursor-pointer text-left hover:shadow-md ease-out group-[.is-dragging]:shadow-md',
'w-full inline-flex items-center justify-center gap-1 rounded focusable cursor-pointer text-left hover:shadow-md ease-out group-[.is-dragging]:shadow-md min-h-[55px]',
className
)}
onClick={handleClick}
ref={ref}
>
{IS_STORYBOOK ? (
<DotsSixVertical weight='bold' className='h-6 w-6 cursor-move text-white' />
<div
style={{
backgroundColor: colors.secondaryColor,
}}
className='flex cursor-move items-center self-stretch rounded rounded-r-0 px-spacing-2'
>
<DotsSixVertical weight='bold' className='h-6 w-6 cursor-move text-white' />
</div>
) : (
<SortableListDragHandle
style={{
backgroundColor: colors.secondaryColor,
}}
className='flex cursor-move items-center self-stretch rounded rounded-r-0'
className='flex cursor-move items-center self-stretch rounded rounded-r-0 px-spacing-2'
>
<DotsSixVertical weight='bold' className='h-6 w-6 cursor-move text-white' />
</SortableListDragHandle>
)}
<Text
className={clsx('flex-1 py-spacing-5 truncate ml-spacing-3 select-none', fontColor)}
variant='h1-course'
>
{course.department} {course.number}
{course.instructors.length > 0 ? <> &ndash; </> : ''}
{course.instructors.map(v => v.toString({ format: 'last' })).join('; ')}
</Text>
{enableCourseStatusChips && course.status !== Status.OPEN && (
<div
style={{
backgroundColor: colors.secondaryColor,
}}
className='ml-1 flex items-center justify-center justify-self-end rounded p-[3px] text-white'
>
<StatusIcon status={course.status} className='h-6 w-6' />
</div>
)}
<Button
color='ut-gray'
onClick={handleCopy}
className='h-full max-h-[30px] w-fit gap-spacing-2 rounded py-spacing-2 text-white px-spacing-3!'
style={{
backgroundColor: colors.secondaryColor,
}}
>
<div className='relative h-5.5 w-5.5'>
<Check
<div className='h-full flex flex-1 justify-center gap-spacing-3 p-spacing-3'>
<div className='flex flex-1 flex-col justify-center gap-spacing-1'>
<Text
className={clsx(
'absolute size-full inset-0 text-white transition-all duration-250 ease-in-out',
isCopied ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
`truncate select-none justify-center ${meetings.length > 0 ? 'mb-auto' : 'my-auto'}`,
fontColor
)}
/>
<Copy
weight='fill'
className={clsx(
'absolute size-full inset-0 text-white transition-all duration-250 ease-in-out',
isCopied ? 'opacity-0 scale-75' : 'opacity-100 scale-100'
)}
/>
variant='h1-course'
>
{course.department} {course.number}
{course.instructors.length > 0 ? <> &ndash; </> : ''}
{course.instructors.map(v => v.toString({ format: 'last' })).join('; ')}
</Text>
<div className='flex flex-col'>{meetings}</div>
</div>
<Text variant='h2' className='no-select text-base!'>
{formattedUniqueId}
</Text>
</Button>
{enableCourseStatusChips && course.status !== Status.OPEN && (
<div
style={{
backgroundColor: colors.secondaryColor,
}}
className='ml-1 flex items-center justify-center justify-self-end rounded p-[3px] text-white'
>
<StatusIcon status={course.status} className='h-6 w-6' />
</div>
)}
<div className='flex flex-col justify-center'>
<Button
color='ut-gray'
onClick={handleCopy}
className='h-full max-h-[30px] max-w-fit gap-spacing-2 rounded text-white px-spacing-3! py-spacing-2!'
style={{
backgroundColor: colors.secondaryColor,
}}
>
<div className='relative h-[21px] w-[21px]'>
<Check
className={clsx(
'absolute size-full inset-0 text-white transition-all duration-250 ease-in-out',
isCopied ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
)}
/>
<Copy
weight='fill'
className={clsx(
'absolute size-full inset-0 text-white transition-all duration-250 ease-in-out select-none',
isCopied ? 'opacity-0 scale-75' : 'opacity-100 scale-100'
)}
/>
</div>
<Text variant='h2' className='select-none text-base!'>
{formattedUniqueId}
</Text>
</Button>
</div>
</div>
</div>
);
}

2
src/views/components/common/ScheduleDropdown.tsx
View File

@@ -19,7 +19,7 @@ export default function ScheduleDropdown({ defaultOpen, children }: ScheduleDrop
const [activeSchedule] = useSchedules();
return (
<div className='border border-ut-offwhite rounded border-solid bg-white'>
<div className='border border-ut-offwhite/50 rounded bg-white'>
<Disclosure defaultOpen={defaultOpen}>
{({ open }) => (
<>

2
src/views/components/common/ScheduleListItem.tsx
View File

@@ -166,7 +166,7 @@ export default function ScheduleListItem({ schedule, onClick }: ScheduleListItem
as={ExtensionRootWrapper}
className={clsx([
styleResetClass,
'w-fit cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-theme-offwhite/50 focus:outline-none',
'w-fit cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite/50 focus:outline-none',
'data-[closed]:(opacity-0 scale-95)',
'data-[enter]:(ease-out-expo duration-150)',
'data-[leave]:(ease-out duration-50)',

22
src/views/components/settings/Settings.tsx
View File

@@ -86,7 +86,7 @@ const useDevMode = (targetCount: number): [boolean, () => void] => {
*/
export default function Settings(): JSX.Element {
const [_enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
const [_showTimeLocation, setShowTimeLocation] = useState<boolean>(false);
// const [_showTimeLocation, setShowTimeLocation] = useState<boolean>(false);
const [highlightConflicts, setHighlightConflicts] = useState<boolean>(false);
const [loadAllCourses, setLoadAllCourses] = useState<boolean>(false);
const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
@@ -119,14 +119,13 @@ export default function Settings(): JSX.Element {
const initAndSetSettings = async () => {
const {
enableCourseStatusChips,
enableTimeAndLocationInPopup,
enableHighlightConflicts,
enableScrollToLoad,
enableDataRefreshing,
alwaysOpenCalendarInNewTab,
} = await initSettings();
setEnableCourseStatusChips(enableCourseStatusChips);
setShowTimeLocation(enableTimeAndLocationInPopup);
// setShowTimeLocation(enableTimeAndLocationInPopup);
setHighlightConflicts(enableHighlightConflicts);
setLoadAllCourses(enableScrollToLoad);
setEnableDataRefreshing(enableDataRefreshing);
@@ -150,27 +149,27 @@ export default function Settings(): JSX.Element {
// console.log('enableCourseStatusChips', newValue);
});
const l2 = OptionsStore.listen('enableTimeAndLocationInPopup', async ({ newValue }) => {
setShowTimeLocation(newValue);
// console.log('enableTimeAndLocationInPopup', newValue);
});
// const l2 = OptionsStore.listen('enableTimeAndLocationInPopup', async ({ newValue }) => {
// setShowTimeLocation(newValue);
// // console.log('enableTimeAndLocationInPopup', newValue);
// });
const l3 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
const l2 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
setHighlightConflicts(newValue);
// console.log('enableHighlightConflicts', newValue);
});
const l4 = OptionsStore.listen('enableScrollToLoad', async ({ newValue }) => {
const l3 = OptionsStore.listen('enableScrollToLoad', async ({ newValue }) => {
setLoadAllCourses(newValue);
// console.log('enableScrollToLoad', newValue);
});
const l5 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
const l4 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
setEnableDataRefreshing(newValue);
// console.log('enableDataRefreshing', newValue);
});
const l6 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
const l5 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
setCalendarNewTab(newValue);
// console.log('alwaysOpenCalendarInNewTab', newValue);
});
@@ -182,7 +181,6 @@ export default function Settings(): JSX.Element {
OptionsStore.removeListener(l3);
OptionsStore.removeListener(l4);
OptionsStore.removeListener(l5);
OptionsStore.removeListener(l6);
window.removeEventListener('keydown', handleKeyPress);
};