From ad85c2b81683246c6c859e49db6655dd00c5b081 Mon Sep 17 00:00:00 2001 From: Sriram Hariharan Date: Wed, 22 Mar 2023 22:48:14 -0500 Subject: [PATCH] adding tooltip with which class has conflicts --- .../components/common/Text/Text.module.scss | 4 ++ .../injected/TableRow/TableRow.module.scss | 33 ++++++++++++++- .../components/injected/TableRow/TableRow.tsx | 40 +++++++++++++++---- src/views/styles/fonts.module.scss | 2 + src/views/styles/fonts.module.scss.d.ts | 1 + todo.md | 2 +- 6 files changed, 71 insertions(+), 11 deletions(-) diff --git a/src/views/components/common/Text/Text.module.scss b/src/views/components/common/Text/Text.module.scss index 6dda8689..8759697a 100644 --- a/src/views/components/common/Text/Text.module.scss +++ b/src/views/components/common/Text/Text.module.scss @@ -34,6 +34,10 @@ font-size: $x_small_size; } +.xx_small_size { + font-size: $xx_small_size; +} + .small_size { font-size: $small_size; } diff --git a/src/views/components/injected/TableRow/TableRow.module.scss b/src/views/components/injected/TableRow/TableRow.module.scss index 44486740..0ba2551c 100644 --- a/src/views/components/injected/TableRow/TableRow.module.scss +++ b/src/views/components/injected/TableRow/TableRow.module.scss @@ -21,8 +21,37 @@ .isConflict { * { - color: $speedway_brick; - text-decoration: line-through !important; + color: $speedway_brick !important; font-weight: normal !important; + text-decoration: line-through !important; + } +} + +.row { + .conflictTooltip { + position: relative; + display: none; + + .body { + position: absolute; + left: 40px; + display: flex; + flex-direction: column; + background: black; + padding: 8px; + width: 120px; + border-radius: 0px 5px 5px 0px; + opacity: 0.5; + div { + color: white !important; + text-decoration: none !important; + font-weight: normal !important; + } + } + } + &:hover { + .conflictTooltip { + display: initial; + } } } diff --git a/src/views/components/injected/TableRow/TableRow.tsx b/src/views/components/injected/TableRow/TableRow.tsx index b70db8c2..11b87d6e 100644 --- a/src/views/components/injected/TableRow/TableRow.tsx +++ b/src/views/components/injected/TableRow/TableRow.tsx @@ -4,6 +4,7 @@ import { Course, ScrapedRow } from 'src/shared/types/Course'; import { UserSchedule } from 'src/shared/types/UserSchedule'; import { Button } from '../../common/Button/Button'; import Icon from '../../common/Icon/Icon'; +import Text from '../../common/Text/Text'; import styles from './TableRow.module.scss'; interface Props { @@ -20,9 +21,13 @@ interface Props { export default function TableRow({ row, isSelected, activeSchedule, onClick }: Props): JSX.Element | null { const [container, setContainer] = useState(null); + // the courses in the active schedule that conflict with the course for this row + const [conflicts, setConflicts] = useState([]); + const { element, course } = row; useEffect(() => { + element.classList.add(styles.row); const portalContainer = document.createElement('td'); const lastTableCell = element.querySelector('td:last-child'); lastTableCell!.after(portalContainer); @@ -30,6 +35,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P return () => { portalContainer.remove(); + element.classList.remove(styles.row); }; }, [element]); @@ -54,15 +60,20 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P return; } - let hasConflicts = activeSchedule.courses.find(c => { - let conflicts = course.getConflicts(c); - return conflicts.length > 0; - }); + let conflicts: Course[] = []; - element.classList[hasConflicts ? 'add' : 'remove'](styles.isConflict); + for (const c of activeSchedule.courses) { + if (c.uniqueId !== course.uniqueId && course.getConflicts(c).length > 0) { + conflicts.push(c); + } + } + + element.classList[conflicts.length ? 'add' : 'remove'](styles.isConflict); + setConflicts(conflicts); return () => { element.classList.remove(styles.isConflict); + setConflicts([]); }; }, [activeSchedule, course]); @@ -71,9 +82,22 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P } return ReactDOM.createPortal( - , + <> + + {conflicts.length > 0 && ( +
+
+ {conflicts.map(c => ( + + {c.department} {c.number} ({c.uniqueId}) + + ))} +
+
+ )} + , container ); } diff --git a/src/views/styles/fonts.module.scss b/src/views/styles/fonts.module.scss index c7c1d8ac..857c3fac 100644 --- a/src/views/styles/fonts.module.scss +++ b/src/views/styles/fonts.module.scss @@ -23,6 +23,7 @@ $semi_bold_weight: 600; $bold_weight: 700; $black_weight: 900; +$xx_small_size: 4px; $x_small_size: 8px; $small_size: 12px; $medium_size: 16px; @@ -38,6 +39,7 @@ $xx_large_size: 48px; bold_weight: $bold_weight; black_weight: $black_weight; + xx_small_size: $xx_small_size; x_small_size: $x_small_size; small_size: $small_size; medium_size: $medium_size; diff --git a/src/views/styles/fonts.module.scss.d.ts b/src/views/styles/fonts.module.scss.d.ts index 9f6af4c8..4d426ae1 100644 --- a/src/views/styles/fonts.module.scss.d.ts +++ b/src/views/styles/fonts.module.scss.d.ts @@ -14,6 +14,7 @@ export interface IWeights { * the type for all the size scss variables exported from fonts.module.scss */ export interface ISizes { + xx_small_size: number; x_small_size: number; small_size: number; medium_size: number; diff --git a/todo.md b/todo.md index df9f7e2c..c57b302d 100644 --- a/todo.md +++ b/todo.md @@ -19,7 +19,7 @@ Last Updated: 03/4/2023 - [ ] copy unique id quickly from browser action - [x] Clickable links to buildings - [ ] Count how many hours and # of classes in schedule -- [ ] Conflict highlighting +- [x] Conflict highlighting - [ ] Tooltip that says which classes conflict, maybe suggest a different section or time that doesn't conflict - [ ] import / export schedules from JSON file - [ ] Search for classes from within extension