From 102edf44a9728b82ad45fdc724dbf37e1282328d Mon Sep 17 00:00:00 2001 From: Gregory Noack Date: Fri, 24 Jan 2025 11:55:11 -0800 Subject: [PATCH 1/4] init layouts and styles for user notifications view --- .../src/assets/icon-archived.png | Bin 0 -> 1109 bytes .../openneuro-app/src/assets/icon-saved.png | Bin 0 -> 1800 bytes .../openneuro-app/src/assets/icon-unread.png | Bin 0 -> 2112 bytes .../users/scss/usernotifications.module.scss | 63 ++++++++++ .../users/user-notifications-tab-content.tsx | 11 ++ .../scripts/users/user-notifications-view.tsx | 110 +++++++++++++++++- .../src/scripts/users/user-routes.tsx | 15 ++- 7 files changed, 193 insertions(+), 6 deletions(-) create mode 100644 packages/openneuro-app/src/assets/icon-archived.png create mode 100644 packages/openneuro-app/src/assets/icon-saved.png create mode 100644 packages/openneuro-app/src/assets/icon-unread.png create mode 100644 packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss create mode 100644 packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx diff --git a/packages/openneuro-app/src/assets/icon-archived.png b/packages/openneuro-app/src/assets/icon-archived.png new file mode 100644 index 0000000000000000000000000000000000000000..dc3d832920edfb416d33aaf57cae6c11a03d2b3a GIT binary patch literal 1109 zcmV-b1giUqP)Px#1am@3R0s$N2z&@+hyVZs|4BqaRCr$PoK14mFcimSV3Dp!Pe3>U<^-f`W}rDi z%`VA?a)PFNW(b=kJDd|hVOTdk0pSEqPe8KhBnu$?U$8Q^Ecqj~GqNhrWX7pwS?}lf zo}ONw>aft^d0zeC;NWb%Ub~LtxVTggUpMU>a!w%U6rb^6FqnqrbNH7|r*n++Po~3A zy<9-*jYgw$etiQbfb!WijmRqx;G6?akM45<^SQpSnj*pjoFl-QIPG@34;y=%m#)F> zuZF{6(}5XHAmj@{&~adMGgAQsmf}Ia4}y$yfH@>EzeF|`S^;9)*~(On3C+eaiy=Q_!AM+*1@k{tu^J-3vvsY-}6;9Z!V2+VOndz ziF8RpPx>>oZ$S&@$PCO^)8fdbU`$;msA3jMGgvS}Cc$b{vPH zi=QVN50OQ~XYrD;$nQHv1^|@;^9|7^Qi$81ZgBn);rD5gKzLu30`rwIiXkG&_*cPF zrD!-+0~5*13nt%OVl~EUjMbQY1gys7<8?26%mrgUa;GPV z;O37QJCZFBvx1?8<^!y$(4UL`rhn023;pJK4O%P-Ah3r)Q?cXbP{GLp<~v~gX6zDB zwpFC)Z;ZtzJtOm>3m8ftL^JXd%}E0zgThJVT~lcR24>X58$J_Xr>HqeV3MFzR%753 z>PS3MNn0lrwk~S0i%Lb7L-bX3BmDkPW69R2>86b5pC8fU%NOa>%hxyXTc~4TQC+( zKI1DwV`g|{WY?Doo4Zh^dyR6|Mi}RExjgiJKb9g@m9tK8bEGr_)s1gZt46a&B@e|; zlN-G72q-R`ssOqNvSRja4md4YA)oG~0w|P!rvE;$Js{5oNn)BK&)vs|>@}A4-`~65`AIi{U+ia{JW@4AHWb<}xbqPAeB)}hn#$so bv|;=M0b+QkI*EIp00000NkvXXu0mjfqki-q literal 0 HcmV?d00001 diff --git a/packages/openneuro-app/src/assets/icon-saved.png b/packages/openneuro-app/src/assets/icon-saved.png new file mode 100644 index 0000000000000000000000000000000000000000..abac5eb3c3779ab4f87dcb161ab846d992339240 GIT binary patch literal 1800 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 literal 0 HcmV?d00001 diff --git a/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss b/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss new file mode 100644 index 0000000000..50d4ea5ddf --- /dev/null +++ b/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss @@ -0,0 +1,63 @@ +.tabContainer { + position: relative; + border-bottom: 2px solid #eee; + margin-bottom: 40px; + .tabs { + display: flex; + justify-content: flex-start; + align-items: flex-start; + list-style: none; + margin: 0; + padding: 0; + position: relative; + + li { + position: relative; + margin:0 20px 0 0; + + a { + &.tabUnread, + &.tabSaved, + &.tabArchived { + display: flex; + text-decoration: none; + padding: 10px; + display: flex; + align-items: center; + position: relative; + z-index: 1; + .tabicon{ + width: 20px; + margin-right: 5px; + } + &.tabUnread .tabicon{ + width: 18px; + } + &.tabArchived .tabicon{ + width: 16px; + } + span { + background-color: #eee; + padding: 2px 5px; + margin: 0 0 0 10px; + display: inline-block; + border-radius: 4px; + color: #000; + font-weight: normal; + transition: background-color .3s, color .3s; + } + &.active { + span { + color: #fff; + background-color: #B20000; + } + } + + &:hover { + color: #555; + } + } + } + } + } +} diff --git a/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx b/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx new file mode 100644 index 0000000000..052b43e217 --- /dev/null +++ b/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx @@ -0,0 +1,11 @@ +import React from "react" + +export const UnreadNotifications = () => ( +
Unread notifications content
+) +export const SavedNotifications = () => ( +
Saved notifications content
+) +export const ArchivedNotifications = () => ( +
Archived notifications content
+) diff --git a/packages/openneuro-app/src/scripts/users/user-notifications-view.tsx b/packages/openneuro-app/src/scripts/users/user-notifications-view.tsx index c0f94b9346..6cedeffedb 100644 --- a/packages/openneuro-app/src/scripts/users/user-notifications-view.tsx +++ b/packages/openneuro-app/src/scripts/users/user-notifications-view.tsx @@ -1,11 +1,113 @@ -import React from "react" +import React, { useEffect, useRef, useState } from "react" +import { + NavLink, + Outlet, + useLocation, + useNavigate, + useParams, +} from "react-router-dom" +import styles from "./scss/usernotifications.module.scss" +import iconUnread from "../../assets/icon-unread.png" +import iconSaved from "../../assets/icon-saved.png" +import iconArchived from "../../assets/icon-archived.png" export const UserNotificationsView = ({ user }) => { - // this is a placeholder for the user notification feature + const tabsRef = useRef(null) + const { tab = "unread" } = useParams() + const navigate = useNavigate() + const location = useLocation() + + const [indicatorStyle, setIndicatorStyle] = useState({ + width: "0px", + transform: "translateX(0px)", + position: "absolute", + bottom: "0", + height: "2px", + backgroundColor: "#000", + transition: "transform 0.3s ease, width 0.3s ease", + }) + + // To store the active tab's offset + const [activePosition, setActivePosition] = useState(0) + + // Update the indicator position based on active tab whenever location changes + useEffect(() => { + const activeLink = tabsRef.current?.querySelector(`.${styles.active}`) + if (activeLink) { + const li = activeLink.parentElement + if (li) { + setActivePosition(li.offsetLeft) + setIndicatorStyle({ + width: `${li.offsetWidth}px`, + transform: `translateX(${li.offsetLeft}px)`, + position: "absolute", + bottom: "0", + height: "2px", + backgroundColor: "#000", + transition: "transform 0.3s ease, width 0.3s ease", + }) + } + } + }, [location]) // Re-run whenever the location changes + + // Redirect to default tab if no tab is specified + useEffect(() => { + if (!["unread", "saved", "archived"].includes(tab)) { + navigate(`/user/${user.orcid}/notifications/unread`, { replace: true }) + } + }, [tab, user.orcid, navigate]) + return (
-

UserNotificationsPAge for {user.name}

-

This should show user info

+

Notifications for {user.name}

+ +
+
    +
  • + + isActive + ? `${styles.active} ${styles.tabUnread}` + : styles.tabUnread} + > + Unread + 121 + +
    • +
  • + + isActive + ? `${styles.active} ${styles.tabSaved}` + : styles.tabSaved} + > + Saved + 121 + +
    • +
  • + + isActive + ? `${styles.active} ${styles.tabArchived}` + : styles.tabArchived} + > + {" "} + Archived + 121 + +
    • +
+ + {/* This is the indicator that will follow the active tab */} + +
+
+ +
) } diff --git a/packages/openneuro-app/src/scripts/users/user-routes.tsx b/packages/openneuro-app/src/scripts/users/user-routes.tsx index 2654ffd8ca..a304af71e4 100644 --- a/packages/openneuro-app/src/scripts/users/user-routes.tsx +++ b/packages/openneuro-app/src/scripts/users/user-routes.tsx @@ -6,6 +6,11 @@ import { UserNotificationsView } from "./user-notifications-view" import { UserDatasetsView } from "./user-datasets-view" import FourOFourPage from "../errors/404page" import FourOThreePage from "../errors/403page" +import { + ArchivedNotifications, + SavedNotifications, + UnreadNotifications, +} from "./user-notifications-tab-content" export interface User { id: string @@ -40,11 +45,17 @@ export const UserRoutes: React.FC = ({ user, hasEdit }) => { : } /> : } - /> + > + } /> + } /> + } /> + } /> + } /> + } /> From 16797353473499c4058715cda2e9b9cbc052d648 Mon Sep 17 00:00:00 2001 From: Gregory Noack Date: Mon, 27 Jan 2025 14:48:58 -0800 Subject: [PATCH 2/4] update to notification layout and frontend --- .../users/scss/usernotifications.module.scss | 107 +++++++++++- .../users/user-notification-accordion.tsx | 163 ++++++++++++++++++ .../scripts/users/user-notification-list.tsx | 27 +++ .../users/user-notifications-tab-content.tsx | 80 ++++++++- 4 files changed, 368 insertions(+), 9 deletions(-) create mode 100644 packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx create mode 100644 packages/openneuro-app/src/scripts/users/user-notification-list.tsx diff --git a/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss b/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss index 50d4ea5ddf..71ba138503 100644 --- a/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss +++ b/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss @@ -13,7 +13,7 @@ li { position: relative; - margin:0 20px 0 0; + margin: 0 20px 0 0; a { &.tabUnread, @@ -26,14 +26,14 @@ align-items: center; position: relative; z-index: 1; - .tabicon{ + .tabicon { width: 20px; margin-right: 5px; } - &.tabUnread .tabicon{ + &.tabUnread .tabicon { width: 18px; } - &.tabArchived .tabicon{ + &.tabArchived .tabicon { width: 16px; } span { @@ -44,12 +44,12 @@ border-radius: 4px; color: #000; font-weight: normal; - transition: background-color .3s, color .3s; + transition: background-color 0.3s, color 0.3s; } &.active { span { color: #fff; - background-color: #B20000; + background-color: #b20000; } } @@ -61,3 +61,98 @@ } } } +.notificationsList { + list-style: none; + margin: 0; + padding: 0; + .notificationAccordion { + border: 1px solid #eee; + margin-bottom: 20px; + border-radius: 4px; + .header { + display: flex; + justify-content: space-between; + padding: 10px; + + .accordiontitle{ + flex-grow: 1; + display: flex; + justify-content: space-between; + align-items: center; + } + h3 { + font-weight: normal; + margin: 0; + } + button { + margin: 0; + border: 0; + padding: 0; + background: none; + cursor: pointer; + h3 { + text-decoration: underline; + color: var(--on-dark-aqua); + } + &:disabled { + pointer-events: none; + opacity: 0.5; + cursor: not-allowed; + } + } + .readbutton{ + color: var(--on-dark-aqua); + background-color:#f3fdff; + border-radius: 4px; + border: 1px solid #ccc; + padding: 5px; + font-size: 13px; + text-transform: uppercase; + margin-right: 5px; + > i { + margin-right: 5px; + } + } + .actions { + display: flex; + align-items: stretch; + .notificationdeny, .notificationapprove { + color: #127B22; + background-color: #F5FFF5; + border-radius: 4px; + border: 1px solid #ccc; + padding: 5px; + font-size: 13px; + text-transform: uppercase; + margin-right: 5px; + > i { + margin-right: 5px; + } + } + .notificationdeny { + color: #770D0D; + background-color: #FFF5F5; + } + .accordionicon { + max-width: 22px; + height: auto; + display: inline-block; + border-radius: 4px; + border: 1px solid #ccc; + padding: 5px; + margin-right: 5px; + &.archiveicon { + max-width: 17px; + } + &.saveicon { + max-width: 23px; + } + } + } + } + .accordionbody{ + padding: 10px; + border-top: 1px solid #eee; + } + } +} diff --git a/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx b/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx new file mode 100644 index 0000000000..dd8c6bb0da --- /dev/null +++ b/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx @@ -0,0 +1,163 @@ +import React, { useState } from "react" +import styles from "./scss/usernotifications.module.scss" +import { Tooltip } from "@openneuro/components/tooltip" +import iconUnread from "../../assets/icon-unread.png" +import iconSaved from "../../assets/icon-saved.png" +import iconArchived from "../../assets/icon-archived.png" + +export const NotificationAccordion = ({ notification, onUpdate }) => { + const { id, title, content, status, type, approval } = notification + + // Check if content is not empty or null + const hasContent = content && content.trim().length > 0 + + const [isOpen, setIsOpen] = useState(false) + const toggleAccordion = () => setIsOpen(!isOpen) + + const handleApprovalChange = (approvalStatus) => { + onUpdate(id, { approval: approvalStatus }) // Only update the approval field + } + + const handleStatusChange = (newStatus) => { + onUpdate(id, { status: newStatus }) // Only update the status field + } + + return ( +
  • +
    + {/* Render title as button if content exists, otherwise as plain text */} +

    {title}

    + + {hasContent && ( + + )} +
    + {type === "approval" && ( + <> + {/* Approve Button */} + {(approval === "not provided" || approval === "approved") && ( + + )} + + {/* Deny Button */} + {(approval === "not provided" || approval === "denied") && ( + + )} + + )} + {/* Render actions based on the notification's status */} + {status === "unread" && ( + <> + + + + + + + + )} + {status === "saved" && ( + <> + + + + + + + + )} + {status === "archived" && ( + + + + )} +
    +
    + {isOpen && hasContent && ( +
    {content}
    + )} +
    • + ) +} diff --git a/packages/openneuro-app/src/scripts/users/user-notification-list.tsx b/packages/openneuro-app/src/scripts/users/user-notification-list.tsx new file mode 100644 index 0000000000..9c018d0ac2 --- /dev/null +++ b/packages/openneuro-app/src/scripts/users/user-notification-list.tsx @@ -0,0 +1,27 @@ +import React, { useState } from "react" +import styles from "./scss/usernotifications.module.scss" +import { NotificationAccordion } from "./user-notification-accordion" + +// NotificationsList Component +export const NotificationsList = ({ notificationdata }) => { + const [notifications, setNotifications] = useState(notificationdata) + + const handleUpdateNotification = (id, updates) => { + setNotifications((prevNotifications) => + prevNotifications.map((notification) => + notification.id === id ? { ...notification, ...updates } : notification + ) + ) + } + return ( +
      + {notifications.map((notification) => ( + + ))} +
    + ) +} diff --git a/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx b/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx index 052b43e217..6ecddc454f 100644 --- a/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx +++ b/packages/openneuro-app/src/scripts/users/user-notifications-tab-content.tsx @@ -1,11 +1,85 @@ import React from "react" +import { NotificationsList } from "./user-notification-list" +// Dummy notifications +const dummyNotifications = [ + { + id: 1, + title: "New Comment on Your dataset", + content: "A user has commented on your dataset. View here", + status: "unread", + type: "general", + approval: "", + }, + { + id: 2, + title: "Example No Approval State ", + content: "", + status: "unread", + type: "approval", + approval: "not provided", + }, + { + id: 3, + title: "Example Denied State", + content: "", + status: "unread", + type: "approval", + approval: "denied", + }, + { + id: 4, + title: "Example Approved State", + content: "", + status: "unread", + type: "approval", + approval: "approved", + }, + { + id: 5, + title: "Saved Notification Example", + content: "This is an example of a saved notification.", + status: "saved", + type: "general", + approval: "", + }, + { + id: 6, + title: "Archived Notification Example", + content: "This is an example of an archived notification.", + status: "archived", + type: "general", + approval: "", + }, +] + +// Tab Components for Different Notifications export const UnreadNotifications = () => ( -
    Unread notifications content
    +
    + notification.status === "unread", + )} + /> +
    ) + export const SavedNotifications = () => ( -
    Saved notifications content
    +
    + notification.status === "saved", + )} + /> +
    ) + export const ArchivedNotifications = () => ( -
    Archived notifications content
    +
    + notification.status === "archived", + )} + /> +
    ) From 3b78cce3a639a854c97c3bc2c458b0bb7d3e9163 Mon Sep 17 00:00:00 2001 From: Gregory Noack Date: Tue, 28 Jan 2025 11:05:51 -0800 Subject: [PATCH 3/4] linting updates --- .../users/scss/usernotifications.module.scss | 5 +++-- .../users/user-notification-accordion.tsx | 11 ++++------- .../scripts/users/user-notifications-view.tsx | 17 +++++++---------- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss b/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss index 71ba138503..b57c63bb5f 100644 --- a/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss +++ b/packages/openneuro-app/src/scripts/users/scss/usernotifications.module.scss @@ -133,8 +133,9 @@ color: #770D0D; background-color: #FFF5F5; } + .accordionicon { - max-width: 22px; + max-width: 21px; height: auto; display: inline-block; border-radius: 4px; @@ -142,7 +143,7 @@ padding: 5px; margin-right: 5px; &.archiveicon { - max-width: 17px; + max-width: 18px; } &.saveicon { max-width: 23px; diff --git a/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx b/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx index dd8c6bb0da..bc085b02d1 100644 --- a/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx +++ b/packages/openneuro-app/src/scripts/users/user-notification-accordion.tsx @@ -8,18 +8,17 @@ import iconArchived from "../../assets/icon-archived.png" export const NotificationAccordion = ({ notification, onUpdate }) => { const { id, title, content, status, type, approval } = notification - // Check if content is not empty or null const hasContent = content && content.trim().length > 0 const [isOpen, setIsOpen] = useState(false) const toggleAccordion = () => setIsOpen(!isOpen) const handleApprovalChange = (approvalStatus) => { - onUpdate(id, { approval: approvalStatus }) // Only update the approval field + onUpdate(id, { approval: approvalStatus }) } const handleStatusChange = (newStatus) => { - onUpdate(id, { status: newStatus }) // Only update the status field + onUpdate(id, { status: newStatus }) } return ( @@ -48,28 +47,26 @@ export const NotificationAccordion = ({ notification, onUpdate }) => {
    {type === "approval" && ( <> - {/* Approve Button */} {(approval === "not provided" || approval === "approved") && ( )} - {/* Deny Button */} {(approval === "not provided" || approval === "denied") && ( )}