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

refactor: ccpopup (#172)

Browse Source 
* refactor: dialog animation improvements

* refactor: update ccpopup to match designs
This commit is contained in:
Razboy20
2024-03-15 23:49:26 -05:00
committed by GitHub
parent d04818ccd8
commit ed4fbe5651
7 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@ export function Chip({ label }: React.PropsWithChildren<Props>): JSX.Element {
<Text
as='div'
variant='h4'
className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5'
className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1.5 py-0.5'
style={{
backgroundColor: '#FFD600',
}}

18
src/views/components/common/Dialog/Dialog.tsx
View File

@@ -25,28 +25,28 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
<ExtensionRoot>
<Transition.Child
as={Fragment}
enter='transition duration-300 ease-out'
enter='transition duration-300 motion-reduce:duration-150 ease-out'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='transition duration-150 ease-in delay-25'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div className={clsx('fixed inset-0 z-50 bg-neutral-500/25')} />
<div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
</Transition.Child>
<Transition.Child
as={Fragment}
enter='transition duration-400 ease-[cubic-bezier(0.15,0.3,0.2,1)]'
enterFrom='transform scale-95 opacity-0'
enterTo='transform scale-100 opacity-100'
leave='transition duration-250 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
leaveFrom='transform scale-100 opacity-100'
leaveTo='transform scale-95 opacity-0'
enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
enterFrom='transform-gpu scale-95 opacity-0'
enterTo='transform-gpu scale-100 opacity-100'
leave='transition duration-250 motion-reduce:duration-0 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
leaveFrom='transform-gpu scale-100 opacity-100'
leaveTo='transform-gpu scale-95 opacity-0'
>
<div className='fixed inset-0 z-50 flex items-center justify-center'>
<HDialog.Panel
className={clsx(
'z-99 max-h-[80vh] flex flex-col overflow-y-auto rounded bg-white shadow-xl',
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-ut-offwhite rounded-lg bg-white shadow-xl ml-[calc(100vw-100%)] mt-[calc(100vw-100%)]',
className
)}
>

4
src/views/components/common/Text/Text.module.scss
View File

@@ -19,7 +19,7 @@
.p {
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.025rem;
letter-spacing: 0.02em;
}
.h4 {
@@ -42,7 +42,7 @@
.h2-course {
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.03125rem;
letter-spacing: 0.03125em;
text-transform: capitalize;
}

8
src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx
View File

@@ -27,11 +27,13 @@ function CourseCatalogInjectedPopup({ course, ...rest }: CourseCatalogInjectedPo
const [activeSchedule] = useSchedules();
return (
<Dialog className='max-w-[780px] px-6' {...rest} initialFocus={emptyRef}>
<Dialog className='max-w-[780px] overflow-y-hidden px-4' {...rest} initialFocus={emptyRef}>
<div className='hidden' ref={emptyRef} />
<HeadingAndActions course={course} onClose={rest.onClose as () => void} activeSchedule={activeSchedule} />
<Description course={course} />
<GradeDistribution course={course} />
<div className='overflow-y-auto px-2'>
<Description course={course} />
<GradeDistribution course={course} />
</div>
</Dialog>
);
}

24
src/views/components/injected/CourseCatalogInjectedPopup/Description.tsx
View File

@@ -56,26 +56,24 @@ export default function Description({ course }: DescriptionProps): JSX.Element {
return (
<>
{status === LoadStatus.ERROR && (
<Text color='theme-red'>Please refresh the page and log back in using your UT EID and password</Text>
<Text color='theme-red'>Please refresh the page and log back in using your UT EID and password.</Text>
)}
{/* TODO (achadaga): would be nice to have a new spinner here */}
{status === LoadStatus.LOADING && <Spinner />}
{status === LoadStatus.DONE && (
<ul className='my-[5px] space-y-1.5 children:marker:text-ut-burntorange'>
<ul className='ml-6 mt-1.5 list-disc list-outside space-y-1.5'>
{description.map(line => {
const isKeywordPresent = keywords.some(keyword => line.toLowerCase().includes(keyword));
return (
<div key={line} className='flex gap-2'>
<span className='text-ut-burntorange'>•</span>
<li key={line}>
<Text
variant='p'
className={clsx({ 'font-bold! text-ut-burntorange': isKeywordPresent })}
>
{line}
</Text>
</li>
</div>
<li
key={line}
className={clsx({
'children:font-bold! text-ut-burntorange marker:text-ut-burntorange':
isKeywordPresent,
})}
>
<Text variant='p'>{line}</Text>
</li>
);
})}
</ul>

4
src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
View File

@@ -97,13 +97,13 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
subtitle: { text: undefined },
legend: { enabled: false },
xAxis: {
title: { text: 'Grade' },
title: { text: 'Grades' },
categories: ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'],
crosshair: true,
},
yAxis: {
min: 0,
title: { text: 'Number of Students' },
title: { text: 'Students' },
},
chart: {
style: { fontFamily: 'Roboto Flex, Roboto Flex Local', fontWeight: '600' },

59
src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
View File

@@ -1,11 +1,11 @@
import { background } from '@shared/messages';
import type { Course } from '@shared/types/Course';
import { Status } from '@shared/types/Course';
import type Instructor from '@shared/types/Instructor';
import type { UserSchedule } from '@shared/types/UserSchedule';
import { Button } from '@views/components/common/Button/Button';
import { Chip, flagMap } from '@views/components/common/Chip/Chip';
import Divider from '@views/components/common/Divider/Divider';
import Link from '@views/components/common/Link/Link';
import Text from '@views/components/common/Text/Text';
import React from 'react';
@@ -66,7 +66,8 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
return `${capitalizeString(firstName)} ${capitalizeString(lastName)}`;
};
const instructorString = instructors.map(getInstructorFullName).join(', ');
const getBuildingUrl = (building: string) =>
`https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}`;
const handleCopy = () => {
navigator.clipboard.writeText(formattedUniqueId);
@@ -108,50 +109,71 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
};
return (
<div className='w-full pb-3 pt-6'>
<div className='w-full px-2 pb-3 pt-6 text-ut-black'>
<div className='flex flex-col'>
<div className='flex items-center gap-1'>
<Text variant='h1' className='truncate'>
<Text variant='h1' as='h1' className='truncate text-theme-black'>
{courseName}
</Text>
<Text variant='h1' className='flex-1 whitespace-nowrap'>
{' '}
<Text variant='h1' as='h2' className='flex-1 whitespace-nowrap'>
({department} {courseNumber})
</Text>
<Button color='ut-burntorange' variant='single' icon={Copy} onClick={handleCopy}>
{formattedUniqueId}
</Button>
<button className='bg-transparent p-0 btn' onClick={onClose}>
<button className='bg-transparent p-0 text-theme-black btn' onClick={onClose}>
<CloseIcon className='h-7 w-7' />
</button>
</div>
<div className='flex gap-2 flex-content-center'>
{instructorString.length > 0 && (
<Text variant='h4' className='inline-flex items-center justify-center'>
with {instructorString}
<div className='flex items-center gap-2'>
{instructors.length > 0 && (
<Text variant='h4' as='p' className='items-center justify-center'>
with{' '}
{instructors
.map(instructor => (
<Link
key={instructor.fullName}
variant='h4'
href={instructor.getDirectoryUrl()}
className='link'
>
{getInstructorFullName(instructor)}
</Link>
))
.flatMap((el, i) => (i === 0 ? [el] : [', ', el]))}
</Text>
)}
<div className='flex-content-centr flex gap-1'>
<div className='flex gap-1'>
{flags.map(flag => (
<Chip key={flagMap[flag]} label={flagMap[flag]} />
))}
</div>
</div>
<div className='flex flex-col'>
<div className='mt-1 flex flex-col'>
{schedule.meetings.map(meeting => {
const daysString = meeting.getDaysString({ format: 'long', separator: 'long' });
const timeString = meeting.getTimeString({ separator: ' to ', capitalize: false });
const locationString = meeting.location ? ` in ${meeting.location.building}` : '';
return (
<Text key={daysString + timeString + locationString} variant='h4'>
<Text key={daysString + timeString + meeting.location.building} variant='h4' as='p'>
{daysString} {timeString}
{locationString}
{meeting.location && (
<>
{' in '}
<Link
href={getBuildingUrl(meeting.location.building)}
className='link'
variant='h4'
>
{meeting.location.building}
</Link>
</>
)}
</Text>
);
})}
</div>
</div>
<div className='my-3 flex flex-wrap items-center gap-[15px]'>
<div className='my-3 flex flex-wrap items-center gap-x-3.75 gap-y-2.5'>
<Button variant='filled' color='ut-burntorange' icon={CalendarMonth} onClick={handleOpenCalendar} />
<Divider size='1.75rem' orientation='vertical' />
<Button variant='outline' color='ut-blue' icon={Reviews} onClick={handleOpenRateMyProf}>
@@ -165,8 +187,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
</Button>
<Button
variant='filled'
disabled={course.status !== Status.OPEN}
color={!courseAdded ? 'ut-green' : 'ut-red'}
color={!courseAdded ? 'ut-green' : 'theme-red'}
icon={!courseAdded ? Add : Remove}
onClick={handleAddOrRemoveCourse}
>