From 58313dde5ce7f2d1955bd8e2d372420ff77edb4a Mon Sep 17 00:00:00 2001 From: M M Date: Wed, 12 Jun 2024 16:12:18 -0700 Subject: [PATCH] Matched toast notification to existing error notifications. --- Client/src/Components/Notifications/index.css | 0 Client/src/Components/Notifications/index.jsx | 10 -- Client/src/Components/Toast/index.css | 103 ++++++++++++++++++ Client/src/Components/Toast/index.jsx | 63 +++++++++++ Client/src/Pages/PlayGround/PlayGround.jsx | 2 + 5 files changed, 168 insertions(+), 10 deletions(-) delete mode 100644 Client/src/Components/Notifications/index.css delete mode 100644 Client/src/Components/Notifications/index.jsx create mode 100644 Client/src/Components/Toast/index.css create mode 100644 Client/src/Components/Toast/index.jsx diff --git a/Client/src/Components/Notifications/index.css b/Client/src/Components/Notifications/index.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/Client/src/Components/Notifications/index.jsx b/Client/src/Components/Notifications/index.jsx deleted file mode 100644 index b2bf09fb9..000000000 --- a/Client/src/Components/Notifications/index.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; - -const Notification = () => { - return ; -}; - -export const notify = (message) => toast(message); - -export default Notification; diff --git a/Client/src/Components/Toast/index.css b/Client/src/Components/Toast/index.css new file mode 100644 index 000000000..0653f3d27 --- /dev/null +++ b/Client/src/Components/Toast/index.css @@ -0,0 +1,103 @@ +.toast-container { + position: fixed; + bottom: 20px; /* Adjust as needed */ + right: 20px; /* Adjust as needed */ + z-index: 1000; /* Ensure it's above other content */ + } + + .toast { + background-color: #ffffff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + border-radius: 8px; + padding: 16px; + min-width: 300px; /* Adjust minimum width as needed */ + max-width: 600px; /* Adjust maximum width as needed */ + position: relative; + animation: slideIn 0.3s ease forwards; + overflow: hidden; /* Ensure progress bar stays within bounds */ + display: flex; /* Use flexbox for layout */ + align-items: center; /* Center items vertically */ + } + + @keyframes slideIn { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform: translateY(0%); + opacity: 1; + } + } + + .toast .info-icon-frame { + position: absolute; + top: 15px; /* Adjust top position as needed */ + left: 20px; /* Adjust left position as needed */ + } + + .icon { + position: absolute; + top: 15px; /* Adjust top position as needed */ + left: 20px; /* Adjust left position as needed */ + } + + .toast .toast-content { + flex-grow: 1; /* Allow content to expand */ + } + + .toast .announcement-content { + display: flex; + flex-direction: column; + margin-left: 10px; + } + + .toast .announcement-content-subject { + font-weight: bold; + margin-bottom: 8px; /* Space below subject */ + margin-left: 40px; /* Adjust left margin for more space */ + } + + .toast .announcement-content-body { + color: #555; + white-space: nowrap; /* Prevent text from wrapping */ + overflow: hidden; /* Hide any overflow */ + text-overflow: ellipsis; /* Show ellipsis (...) if the text overflows */ + margin-left: 40px; /* Adjust left margin for more space */ + } + + .toast .announcement-content-body-title { + display: inline-block; + margin-right: 5px; /* Adjust spacing between title and body */ + } + + .toast .announcement-content-controllers { + margin-top: 12px; + } + + .toast .controllers-button-esc, + .toast .controllers-button-primary { + cursor: pointer; + padding: 8px 16px; + margin-left: 23px; /* Adjust left margin for closer proximity */ + } + + + .toast-progress { + position: absolute; + bottom: 0; + left: 0; + height: 4px; + background-color: #29b6f6; /* Adjust color as needed */ + transition: width 0.1s linear; + } + + .close-button { + position: absolute; + top: 1px; + right: 10px; + cursor: pointer; + font-size: 35px; + color: #aaa; + } + \ No newline at end of file diff --git a/Client/src/Components/Toast/index.jsx b/Client/src/Components/Toast/index.jsx new file mode 100644 index 000000000..37870a970 --- /dev/null +++ b/Client/src/Components/Toast/index.jsx @@ -0,0 +1,63 @@ +import { useState, useEffect } from "react"; +import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert"; +import "./index.css"; // Import your CSS file for toast styles + +const Toast = () => { + const [showToast, setShowToast] = useState(false); + const [progress, setProgress] = useState(100); // Start with full progress + + useEffect(() => { + let timer; + if (showToast) { + timer = setTimeout(() => { + setShowToast(false); + }, 5000); // 5000 milliseconds = 5 seconds + + // Interval to update progress bar + const interval = setInterval(() => { + setProgress((prevProgress) => prevProgress - (100 / 5000 * 100)); // Decrease progress based on time + }, 100); // Update every 100 milliseconds + + return () => { + clearTimeout(timer); + clearInterval(interval); + }; + } + }, [showToast]); + + const toggleToast = () => { + setShowToast(!showToast); + setProgress(100); // Reset progress when showing toast + }; + + return ( +
+ + {showToast && ( +
+ × +
+ {} +
+
+
+
+ There was a problem with that action +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor. +
+
+
Dismiss
+
View changes
+
+
+
+
+
+ )} +
+ ); +}; + +export default Toast; diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx index b5e439aed..5f46af08d 100644 --- a/Client/src/Pages/PlayGround/PlayGround.jsx +++ b/Client/src/Pages/PlayGround/PlayGround.jsx @@ -13,6 +13,7 @@ import AnnouncementUpdateSubscription from "../../Components/Announcements/Annou import PlayGroundCharts from "./PlayGround-Charts"; import PlayGroundPopupModals from "./PlayGround-Popup-Modals"; import PlayGroundTooltips from "./PlayGround-Tooltips"; +import Toast from "../../Components/Toast"; // This Component is just for the development and test // purposes and just to see what my components look like while development @@ -52,6 +53,7 @@ function PlayGround() { hasCopyButton={true} hintText="This is a hint text to help user." /> +
{/* Now, illustration of the Description text fields */}