-
Notifications
You must be signed in to change notification settings - Fork 584
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Teacher Tool: Update Notifications (#9857)
This swaps out our Teacher Tool notification system for one based on the multiplayer toast system. Since multiplayer uses tailwind, it would've been a pain to move everything into shared components. Instead, I've more-or-less copied everything over, but the functionality is the same.
- Loading branch information
Showing
19 changed files
with
611 additions
and
105 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { useCallback, useContext, useEffect, useState, useRef } from "react"; | ||
| import { AppStateContext } from "../state/appStateContext"; | ||
| import { ToastType, ToastWithId } from "../types"; | ||
| import { AnimatePresence, motion } from "framer-motion"; | ||
| import { dismissToast } from "../state/actions"; | ||
| import { classList } from "react-common/components/util"; | ||
| // eslint-disable-next-line import/no-internal-modules | ||
| import css from "./styling/Toasts.module.scss"; | ||
|
|
||
| const icons: { [type in ToastType]: string } = { | ||
| success: "😊", | ||
| info: "🔔", | ||
| warning: "😮", | ||
| error: "😢", | ||
| }; | ||
|
|
||
| const SLIDER_DELAY_MS = 300; | ||
|
|
||
| interface IToastNotificationProps { | ||
| toast: ToastWithId; | ||
| } | ||
| const ToastNotification: React.FC<IToastNotificationProps> = ({ toast }) => { | ||
| const { dispatch } = useContext(AppStateContext); | ||
| const [sliderActive, setSliderActive] = useState(false); | ||
| const sliderRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| let t1: NodeJS.Timeout, t2: NodeJS.Timeout; | ||
| if (toast.timeoutMs) { | ||
| t1 = setTimeout(() => dispatch(dismissToast(toast.id)), SLIDER_DELAY_MS + toast.timeoutMs); | ||
| t2 = setTimeout(() => setSliderActive(true), SLIDER_DELAY_MS); | ||
| } | ||
| return () => { | ||
| clearTimeout(t1); | ||
| clearTimeout(t2); | ||
| }; | ||
| }, [dispatch, toast.id, toast.timeoutMs]); | ||
|
|
||
| const handleDismissClicked = () => { | ||
| dispatch(dismissToast(toast.id)); | ||
| }; | ||
|
|
||
| const sliderWidth = useCallback(() => { | ||
| return sliderActive ? "0%" : "100%"; | ||
| }, [sliderActive]); | ||
|
|
||
| return ( | ||
| <div className={classList(css["toast"], css[toast.type])}> | ||
| <div className={css["toast-content"]}> | ||
| {!toast.hideIcon && ( | ||
| <div className={classList(css["icon-container"], css[toast.type])}> | ||
| {toast.icon ?? icons[toast.type]} | ||
| </div> | ||
| )} | ||
| <div className={css["text-container"]}> | ||
| {toast.text && <div className={css["text"]}>{toast.text}</div>} | ||
| {toast.detail && <div className={css["detail"]}>{toast.detail}</div>} | ||
| {toast.jsx && <div>{toast.jsx}</div>} | ||
| </div> | ||
| {!toast.hideDismissBtn && !toast.showSpinner && ( | ||
| <div className={css["dismiss-btn"]} onClick={handleDismissClicked}> | ||
| <i className={classList("far fa-times-circle", css["icon"])} /> | ||
| </div> | ||
| )} | ||
| {toast.showSpinner && ( | ||
| <div className={css["spinner"]}> | ||
| <i className="fas fa-circle-notch fa-spin" /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| {toast.timeoutMs && ( | ||
| <div> | ||
| <div | ||
| ref={sliderRef} | ||
| className={classList(css["slider"], css[toast.type])} | ||
| style={{ width: sliderWidth(), transitionDuration: `${toast.timeoutMs}ms` }} | ||
| ></div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| interface IProps {} | ||
| export const Toasts: React.FC<IProps> = ({}) => { | ||
| const { state: teacherTool } = useContext(AppStateContext); | ||
|
|
||
| return ( | ||
| <div className={classList(css["toast-container"])}> | ||
| <AnimatePresence> | ||
| {teacherTool.toasts.map(item => ( | ||
| <motion.div | ||
| key={item.id} | ||
| layout | ||
| initial={{ opacity: 0, y: 50, scale: 0.3 }} | ||
| animate={{ opacity: 1, y: 0, scale: 1 }} | ||
| exit={{ opacity: 0, transition: { duration: 0.2 } }} | ||
| > | ||
| <ToastNotification toast={item} /> | ||
| </motion.div> | ||
| ))} | ||
| </AnimatePresence> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| .toast-container { | ||
| display: flex; | ||
| gap: 0.5rem; | ||
| flex-direction: column-reverse; | ||
| align-items: flex-end; | ||
| position: fixed; | ||
| bottom: 0; | ||
| right: 0; | ||
| margin-bottom: 2rem; | ||
| margin-right: 1rem; | ||
| z-index: 50; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .toast { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-right: 0; | ||
| border: none; | ||
| border-radius: 0.25rem; | ||
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | ||
| overflow: hidden; | ||
| pointer-events: none; | ||
|
|
||
| &.success { | ||
| background-color: var(--pxt-toast-background-success); | ||
| } | ||
|
|
||
| &.info { | ||
| background-color: var(--pxt-toast-background-info); | ||
| } | ||
|
|
||
| &.warning { | ||
| background-color: var(--pxt-toast-background-warning); | ||
| } | ||
|
|
||
| &.error { | ||
| background-color: var(--pxt-toast-background-error); | ||
| } | ||
|
|
||
| .toast-content { | ||
| display: flex; | ||
| gap: 0.5rem; | ||
| padding: 0.75rem; | ||
| font-size: 1.125rem; | ||
|
|
||
| .icon-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| border: 0; | ||
| border-radius: 50%; | ||
| width: 1.75rem; | ||
| height: 1.75rem; | ||
|
|
||
| &.success { | ||
| background-color: var(--pxt-toast-accent-success);; | ||
| } | ||
|
|
||
| &.info { | ||
| background-color: var(--pxt-toast-accent-info);; | ||
| } | ||
|
|
||
| &.warning { | ||
| background-color: var(--pxt-toast-accent-warning);; | ||
| } | ||
|
|
||
| &.error { | ||
| background-color: var(--pxt-toast-accent-error); | ||
| } | ||
| } | ||
|
|
||
| .text-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| text-align: left; | ||
|
|
||
| .text { | ||
| white-space: nowrap; | ||
| font-size: 1rem; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .detail { | ||
| font-size: 0.875rem; | ||
| } | ||
| } | ||
|
|
||
| .dismiss-btn { | ||
| display: flex; | ||
| flex-grow: 1; | ||
| justify-content: flex-end; | ||
| pointer-events: auto; | ||
|
|
||
| .icon { | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| transform: scale(1.25); | ||
| transition: all 0.15s ease-in-out; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .spinner { | ||
| display: flex; | ||
| flex-grow: 1; | ||
| justify-content: flex-end; | ||
| } | ||
| } | ||
|
|
||
| .slider { | ||
| height: 0.25rem; | ||
| transition: all 0.2s linear; | ||
|
|
||
| &.success { | ||
| background-color: var(--pxt-toast-accent-success);; | ||
| } | ||
|
|
||
| &.info { | ||
| background-color: var(--pxt-toast-accent-info);; | ||
| } | ||
|
|
||
| &.warning { | ||
| background-color: var(--pxt-toast-accent-warning);; | ||
| } | ||
|
|
||
| &.error { | ||
| background-color: var(--pxt-toast-accent-error); | ||
| } | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.