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

feat(ui): course color picker (#382)

Browse Source 
* fix: update CourseCellColorPicker.tsx background to white

* feat: add color picker to CalendarCourseCell component

* feat: add color picker functionality to update course colors

* fix: type issues with storybook components

* feat: add useColorPicker hook, isValidHexColor and updateCourseColors utilities

* refactor: color picker logic and UI components

* refactor: update useFlattenedCourseSchedule hook to include courseID property

* refactor: update storybook calendar components with updated props

* refactor: update color picker ui logic to account for position of cell

* fix: revert back to error handling for invalid rgb

* refactor: update jsdocs

* refactor: integrate ColorPickerContext into Calendar components and update props

* refactor: integrate ColorPickerContext into Calendar components and update related props

* refactor: change JSDocs comments and remove unused color inversion state

* refactor: update story components

* feat: add functionality for selecting secondary course colors

* refactor: enhance HexColorEditor to dynamically adjust tag icon color based on preview color

* refactor: simplify JSDoc comment in useColorPicker hook

* fix: revert Button component

* refactor: update CalendarCourseCell component positioning and styling

* fix: correct types in color.ts

* feat: add getDarkerShade function to compute darker shades of hex colors

* feat: add shadow to color picker button

* fix: update button size in ColorPatch component

* feat: implement debounced input for hex color editor and add useDebounce hook

* chore: utilize the logical and && operator instead of the ternary operator

* fix: imports and palette icon

* refactor: remove unused import

* fix: bug when course add fails with custom colors

* chore: run lint

* chore: run check-types

* feat: add HSL color type and conversion functions

* refactor: rename colorway to theme

* fix: hide color picker on screenshot

* fix: undo important syntax

* refactor: rename SomeFunction to DebouncedCallback

* refactor: remove inner function

* refactor: update return type to DebouncedCallback

* fix: adjust sizes for hash and palette button

* feat: create tests for hexToHSL and isValidHexColor

* refactor: update parameter type to use HexColor

* fix: increase size of palette button

* fix: update dependency array for hex code debounce

* fix: change colorPickerRef element ref

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Ethan
2025-01-20 17:48:52 -06:00
committed by GitHub
parent a61bddf0e8
commit 1f635d2515
22 changed files with 878 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ 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';
import clsx from 'clsx';
import React from 'react';
@@ -41,19 +42,21 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
—
</Text>
<div className='inline-flex gap-2.5'>
{asyncCourseCells.map(block => {
const { courseDeptAndInstr, status, colors, className } = block.componentProps;
return (
<CalendarCourseBlock
courseDeptAndInstr={courseDeptAndInstr}
status={status}
colors={colors}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-15!')}
onClick={() => setCourse(block.course)}
/>
);
})}
<ColorPickerProvider>
{asyncCourseCells.map(block => {
const { courseDeptAndInstr, status, className } = block.componentProps;
return (
<CalendarCourseBlock
courseDeptAndInstr={courseDeptAndInstr}
status={status}
key={courseDeptAndInstr}
className={clsx(className, 'w-35! h-15!')}
onClick={() => setCourse(block.course)}
blockData={block}
/>
);
})}
</ColorPickerProvider>
</div>
</>
)}

112
src/views/components/calendar/CalendarCourseCell.tsx
View File

@@ -1,12 +1,16 @@
import { ClockUser, LockKey, Prohibit } from '@phosphor-icons/react';
import { ClockUser, LockKey, Palette, Prohibit } from '@phosphor-icons/react';
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
import type { StatusType } from '@shared/types/Course';
import { Status } from '@shared/types/Course';
import type { CourseColors } from '@shared/types/ThemeColors';
import { pickFontColor } from '@shared/util/colors';
import { hexToRGB, pickFontColor } from '@shared/util/colors';
import Text from '@views/components/common/Text/Text';
import { useColorPickerContext } from '@views/contexts/ColorPickerContext';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Button } from '../common/Button';
import CourseCellColorPicker from './CalendarCourseCellColorPicker/CourseCellColorPicker';
/**
* Props for the CalendarCourseCell component.
@@ -15,9 +19,9 @@ export interface CalendarCourseCellProps {
courseDeptAndInstr: string;
timeAndLocation?: string;
status: StatusType;
colors: CourseColors;
className?: string;
onClick?: React.MouseEventHandler<HTMLDivElement>;
blockData: CalendarGridCourse;
className?: string;
}
/**
@@ -34,11 +38,25 @@ export default function CalendarCourseCell({
courseDeptAndInstr,
timeAndLocation,
status,
colors,
className,
onClick,
blockData,
className,
}: CalendarCourseCellProps): JSX.Element {
const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
const colorPickerRef = useRef<HTMLDivElement>(null);
const { selectedColor, setSelectedCourse, handleCloseColorPicker, isSelectedBlock, isSelectedCourse } =
useColorPickerContext();
const { colors, uniqueId: courseID } = blockData.course;
const { dayIndex, startIndex } = blockData.calendarGridPoint;
let selectedCourse = false;
let selectedBlock = false;
if (isSelectedCourse && isSelectedBlock) {
selectedCourse = isSelectedCourse(courseID);
selectedBlock = isSelectedBlock(courseID, dayIndex, startIndex);
}
useEffect(() => {
initSettings().then(({ enableCourseStatusChips }) => setEnableCourseStatusChips(enableCourseStatusChips));
@@ -53,6 +71,26 @@ export default function CalendarCourseCell({
};
}, []);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (selectedBlock && colorPickerRef.current) {
const path = event.composedPath();
const isClickOutside = !path.some(
element => (element as HTMLElement).classList === colorPickerRef.current?.classList
);
if (isClickOutside) {
handleCloseColorPicker();
}
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [handleCloseColorPicker, selectedBlock]);
let rightIcon: React.ReactNode | null = null;
if (enableCourseStatusChips) {
if (status === Status.WAITLISTED) {
@@ -71,7 +109,7 @@ export default function CalendarCourseCell({
return (
<div
className={clsx(
'h-full w-0 flex justify-center rounded p-x-2 p-y-1.2 cursor-pointer hover:shadow-md transition-shadow-100 ease-out',
'h-full w-0 flex group relative justify-center rounded p-x-2 p-y-1.2 cursor-pointer screenshot:p-1.5 hover:shadow-md transition-shadow-100 ease-out',
{
'min-w-full': timeAndLocation,
'w-full': !timeAndLocation,
@@ -111,6 +149,62 @@ export default function CalendarCourseCell({
{rightIcon}
</div>
)}
<div
onClick={e => {
e.stopPropagation();
}}
className={clsx(
'absolute screenshot:opacity-0! text-black transition-all ease-in-out group-focus-within:pointer-events-auto group-hover:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 gap-y-0.75',
dayIndex === 4 ? 'left-0 -translate-x-full pr-0.75 items-end' : 'right-0 translate-x-full pl-0.75', // If the cell is on the right side of the screen
selectedBlock ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
)}
style={{
// Prevents from button from appear on top of color picker
zIndex: selectedBlock ? 30 : 29,
}}
>
<div className={clsx('relative', dayIndex === 4 && 'flex flex-col items-end')}>
<Button
onClick={() => {
if (selectedBlock) {
handleCloseColorPicker();
} else {
setSelectedCourse(courseID, dayIndex, startIndex);
}
}}
icon={Palette}
iconProps={{
fill: colors.secondaryColor,
weight: 'fill',
}}
variant='outline'
className={clsx(
'size-8.5! border border-white rounded-full !p-1 bg-opacity-100 !hover:enabled:bg-opacity-100 rounded-full shadow-lg shadow-black/20'
)}
color='ut-gray'
style={{
color: colors.secondaryColor,
backgroundColor: selectedCourse
? (selectedColor ?? colors.primaryColor)
: `rgba(${hexToRGB(`${colors.primaryColor}`)}, var(--un-bg-opacity))`,
}}
/>
{selectedBlock && (
<div
ref={colorPickerRef}
className={
startIndex < 21 && !blockData.async
? 'relative top-0.75 w-max'
: 'absolute bottom-full mb-0.75 w-max'
}
>
<CourseCellColorPicker defaultColor={colors.primaryColor} />
</div>
)}
</div>
</div>
</div>
);
}

25
src/views/components/calendar/CalendarCourseCellColorPicker/ColorPatch.tsx
View File

@@ -1,5 +1,5 @@
import { Check } from '@phosphor-icons/react';
import { getThemeColorHexByName } from '@shared/util/themeColors';
import { useColorPickerContext } from '@views/contexts/ColorPickerContext';
import React from 'react';
/**
@@ -8,7 +8,8 @@ import React from 'react';
interface ColorPatchProps {
color: string;
isSelected: boolean;
handleSetSelectedColor: (color: string) => void;
handleSelectColorPatch: (color: string) => void;
defaultColor: string;
}
/**
@@ -19,13 +20,25 @@ interface ColorPatchProps {
* @param handleSetSelectedColor - Function from parent component to control selection state of a patch.
* @returns The rendered color patch button.
*/
export default function ColorPatch({ color, isSelected, handleSetSelectedColor }: ColorPatchProps): JSX.Element {
const handleClick = () => {
handleSetSelectedColor(isSelected ? getThemeColorHexByName('ut-gray') : color);
export default function ColorPatch({
color,
isSelected,
handleSelectColorPatch,
defaultColor,
}: ColorPatchProps): JSX.Element {
const { handleCloseColorPicker } = useColorPickerContext();
const handleClick = async () => {
// If the color patch is already selected, close the color picker
if (isSelected) {
handleCloseColorPicker();
} else {
handleSelectColorPatch(isSelected ? defaultColor : color);
}
};
return (
<button
className='h-5.5 w-5.5 p-0 transition-all duration-200 hover:scale-110 btn'
className='size-6.5 p-0 transition-all duration-200 hover:scale-110 btn'
style={{ backgroundColor: color }}
onClick={handleClick}
>

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

@@ -1,12 +1,10 @@
import type { ThemeColor, TWIndex } from '@shared/types/ThemeColors';
import { getThemeColorHexByName } from '@shared/util/themeColors';
import Divider from '@views/components/common/Divider';
import { useColorPickerContext } from '@views/contexts/ColorPickerContext';
import React from 'react';
import { theme } from 'unocss/preset-mini';
import InvertColorsIcon from '~icons/material-symbols/invert-colors';
import InvertColorsOffIcon from '~icons/material-symbols/invert-colors-off';
import ColorPatch from './ColorPatch';
import HexColorEditor from './HexColorEditor';
@@ -55,9 +53,7 @@ const hexCodeToBaseColor = new Map<string, string>(
* Props for the CourseCellColorPicker component.
*/
export interface CourseCellColorPickerProps {
setSelectedColor: React.Dispatch<React.SetStateAction<ThemeColor | null>>;
isInvertColorsToggled: boolean;
setIsInvertColorsToggled: React.Dispatch<React.SetStateAction<boolean>>;
defaultColor: string;
}
/**
@@ -86,49 +82,43 @@ export interface CourseCellColorPickerProps {
*
* @returns The color picker component that displays a color palette with a list of color patches.
*/
export default function CourseCellColorPicker({
setSelectedColor: setFinalColor,
isInvertColorsToggled,
setIsInvertColorsToggled,
}: CourseCellColorPickerProps): JSX.Element {
export default function CourseCellColorPicker({ defaultColor }: CourseCellColorPickerProps): JSX.Element {
// hexCode mirrors contents of HexColorEditor which has no hash prefix
const [hexCode, setHexCode] = React.useState<string>(
getThemeColorHexByName('ut-gray').slice(1).toLocaleLowerCase()
defaultColor.slice(1).toLocaleLowerCase() || getThemeColorHexByName('ut-gray')
);
const { setSelectedColor } = useColorPickerContext();
const hexCodeWithHash = `#${hexCode}` as ThemeColor;
const selectedBaseColor = hexCodeToBaseColor.get(hexCodeWithHash);
const handleSelectColorPatch = (baseColor: string) => {
setHexCode(baseColor.slice(1).toLocaleLowerCase());
let hexCode = baseColor.toLocaleLowerCase();
if (hexCode.startsWith('#')) {
hexCode = baseColor.slice(1);
}
setHexCode(hexCode);
setSelectedColor(`#${hexCode}` as ThemeColor);
};
React.useEffect(() => {
setFinalColor(hexCodeWithHash);
}, [hexCodeWithHash, setFinalColor]);
return (
<div className='inline-flex flex-col border border-1 border-ut-offwhite rounded-1 p-1.25'>
<div className='inline-flex flex-col border border-1 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
key={baseColor}
color={baseColor}
isSelected={baseColor === selectedBaseColor}
handleSetSelectedColor={handleSelectColorPatch}
handleSelectColorPatch={handleSelectColorPatch}
defaultColor={defaultColor}
/>
))}
<div className='col-span-3 flex items-center justify-center overflow-hidden'>
<HexColorEditor hexCode={hexCode} setHexCode={setHexCode} />
<HexColorEditor hexCode={hexCode} setHexCode={handleSelectColorPatch} />
</div>
<button
className='h-5.5 w-5.5 bg-ut-black p-0 transition-all duration-200 hover:scale-110 btn'
onClick={() => setIsInvertColorsToggled(prev => !prev)}
>
{isInvertColorsToggled ? (
<InvertColorsIcon className='h-3.5 w-3.5 color-white' />
) : (
<InvertColorsOffIcon className='h-3.5 w-3.5 color-white' />
)}
</button>
</div>
{selectedBaseColor && (
<>
@@ -138,9 +128,11 @@ export default function CourseCellColorPicker({
.get(selectedBaseColor)
?.map(shadeColor => (
<ColorPatch
key={shadeColor}
color={shadeColor}
isSelected={shadeColor === hexCodeWithHash}
handleSetSelectedColor={handleSelectColorPatch}
handleSelectColorPatch={handleSelectColorPatch}
defaultColor={defaultColor}
/>
))}
</div>

28
src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx
View File

@@ -1,5 +1,8 @@
import { Hash } from '@phosphor-icons/react';
import { isValidHexColor, pickFontColor } from '@shared/util/colors';
import { getThemeColorHexByName } from '@shared/util/themeColors';
import { useDebounce } from '@views/hooks/useDebounce';
import clsx from 'clsx';
import React from 'react';
/**
@@ -7,7 +10,7 @@ import React from 'react';
*/
export interface HexColorEditorProps {
hexCode: string;
setHexCode: React.Dispatch<React.SetStateAction<string>>;
setHexCode: (hexCode: string) => void;
}
/**
@@ -20,23 +23,34 @@ export interface HexColorEditorProps {
*/
export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorProps): JSX.Element {
const baseColor = React.useMemo(() => getThemeColorHexByName('ut-gray'), []);
const previewColor = hexCode.length === 6 ? `#${hexCode}` : baseColor;
const previewColor = isValidHexColor(`#${hexCode}`) ? `#${hexCode}` : baseColor;
const tagColor = pickFontColor(previewColor.slice(1) as `#${string}`);
const [localHexCode, setLocalHexCode] = React.useState(hexCode);
const debouncedSetHexCode = useDebounce((value: string) => setHexCode(value), 500);
React.useEffect(() => {
debouncedSetHexCode(localHexCode);
// This is on purpose
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localHexCode]);
return (
<>
<div
style={{ backgroundColor: previewColor }}
className='h-5.5 w-5.25 flex items-center justify-center rounded-l-1'
className='h-6.5 w-6.5 flex items-center justify-center rounded-l-1'
>
<Hash className='h-4 w-4 text-color-white' />
<Hash className={clsx('h-5 w-5 text-color-white', tagColor)} />
</div>
<div className='h-5.5 w-[53px] flex flex-1 items-center justify-center border-b border-r border-t rounded-br rounded-tr p-1.25'>
<div className='h-6.5 w-[53px] flex flex-1 items-center justify-center border-b border-r border-t rounded-br rounded-tr p-1.25'>
<input
type='text'
maxLength={6}
className='w-full border-none bg-transparent font-size-2.75 font-normal outline-none focus:outline-none'
value={hexCode}
onChange={e => setHexCode(e.target.value)}
value={localHexCode}
onChange={e => setLocalHexCode(e.target.value)}
/>
</div>
</>

7
src/views/components/calendar/CalendarGrid.tsx
View File

@@ -1,6 +1,7 @@
import type { Course } from '@shared/types/Course';
import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
import Text from '@views/components/common/Text/Text';
import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
import React from 'react';
@@ -73,7 +74,9 @@ export default function CalendarGrid({
.map(() => (
<div className='h-4 flex items-end justify-center border-r border-gray-300' />
))}
{courseCells ? <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} /> : null}
<ColorPickerProvider>
{courseCells && <AccountForCourseConflicts courseCells={courseCells} setCourse={setCourse} />}
</ColorPickerProvider>
</div>
);
}
@@ -147,8 +150,8 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
courseDeptAndInstr={courseDeptAndInstr}
timeAndLocation={timeAndLocation}
status={status}
colors={block.course.colors}
onClick={() => setCourse(block.course)}
blockData={block}
/>
</div>
);

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

@@ -44,9 +44,9 @@ export function Button({
<button
style={
{
...style,
color: colorHex,
backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
...style,
} satisfies React.CSSProperties
}
className={clsx(

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

@@ -41,7 +41,7 @@ interface HeadingAndActionProps {
* @returns The rendered component.
*/
export default function HeadingAndActions({ course, activeSchedule, onClose }: HeadingAndActionProps): JSX.Element {
const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule, core } = course;
const { courseName, department, number: courseNumber, uniqueId, instructors, flags, core } = course;
const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
const formattedUniqueId = uniqueId.toString().padStart(5, '0');
const isInCalendar = useCalendar();