feat(ui): course color picker (#382)
* 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
GitHub
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user