From 827fcd6b1f2dd2911550013e407596c241764911 Mon Sep 17 00:00:00 2001 From: Corey Peterson Date: Mon, 9 Dec 2024 15:32:36 -0500 Subject: [PATCH 1/4] Fixed notifications display issue, font rendering tweak --- src/components/include.scss | 13 ++++- src/components/notifications.jsx | 84 ++++++++++++++++---------------- 2 files changed, 54 insertions(+), 43 deletions(-) diff --git a/src/components/include.scss b/src/components/include.scss index 46fc98ecf..75bdf6eaa 100644 --- a/src/components/include.scss +++ b/src/components/include.scss @@ -395,9 +395,10 @@ header { padding: 10px; display: flex; flex-direction: row; - // align-items: center; gap: 10px; + font-weight: 400; + &:hover{ background-color: rgb(250,250,250); } @@ -667,6 +668,16 @@ header { } .notice { + + .noticeClose { + filter: invert(1); + + &:hover { + cursor: pointer; + filter: invert(-0.5) sepia(1) saturate(80) hue-rotate(340deg); + } + } + &:hover{ background-color: $color-features-dark; } diff --git a/src/components/notifications.jsx b/src/components/notifications.jsx index 250bc35f5..3ca0d6dd6 100644 --- a/src/components/notifications.jsx +++ b/src/components/notifications.jsx @@ -5,17 +5,17 @@ import useDeleteNotification from './hooks/useDeleteNotification' import setUserInstancePerms from './hooks/useSetUserInstancePerms' const Notifications = (user) => { - const [navOpen, setNavOpen] = useState(false); - const [showDeleteBtn, setShowDeleteBtn] = useState(-1); + const [navOpen, setNavOpen] = useState(false) + const [showDeleteBtn, setShowDeleteBtn] = useState(-1) const deleteNotification = useDeleteNotification() const queryClient = useQueryClient() const setUserPerms = setUserInstancePerms() - const numNotifications = useRef(0); + const numNotifications = useRef(0) const [errorMsg, setErrorMsg] = useState({ notif_id: '', msg: '' - }); - let modalRef = useRef(); + }) + let modalRef = useRef() const { data: notifications} = useQuery({ queryKey: 'notifications', @@ -27,10 +27,10 @@ const Notifications = (user) => { staleTime: Infinity, retry: false, onSuccess: (data) => { - numNotifications.current = 0; + numNotifications.current = 0 if (data && data.length > 0) data.forEach(element => { - if (!element.remove) numNotifications.current++; - }); + if (!element.remove) numNotifications.current++ + }) }, onError: (err) => { if (err.message == "Invalid Login") { @@ -48,36 +48,37 @@ const Notifications = (user) => { const checkIfClickedOutsideModal = e => { if (modalRef.current && !modalRef.current.contains(e.target) && !e.target.className.includes("noticeClose")) { - setNavOpen(false); + setNavOpen(false) } } - document.addEventListener("click", checkIfClickedOutsideModal); + document.addEventListener("click", checkIfClickedOutsideModal) return () => { - document.removeEventListener("click", checkIfClickedOutsideModal); + document.removeEventListener("click", checkIfClickedOutsideModal) } } }, [navOpen]) - const toggleNavOpen = () => + const toggleNavOpen = (event) => { - setNavOpen(!navOpen); + event.stopPropagation() + setNavOpen(!navOpen) } // Sets the index of the hovered notification // Shows delete button on hover const showDeleteButton = (index) => { - setShowDeleteBtn(index); + setShowDeleteBtn(index) } const hideDeleteButton = () => { - setShowDeleteBtn(-1); + setShowDeleteBtn(-1) } const removeNotification = (index, id = null) => { - let notif = null; - if (index >= 0) notif = notifications[index]; - if (id == null) id = notif.id; + let notif = null + if (index >= 0) notif = notifications[index] + if (id == null) id = notif.id deleteNotification.mutate({ notifId: id, @@ -86,16 +87,16 @@ const Notifications = (user) => { Object.keys(notifications).forEach((key, index) => { if (notifications[key].id == id) { - notifications[key].remove = true; - numNotifications.current--; - return; + notifications[key].remove = true + numNotifications.current-- + return } }) }, errorFunc: (err) => { - setErrorMsg({notif_id: id, msg: 'Action failed.'}); + setErrorMsg({notif_id: id, msg: 'Action failed.'}) } - }); + }) } const removeAllNotifications = () => { @@ -104,25 +105,25 @@ const Notifications = (user) => { deleteAll: true, successFunc: () => {}, errorFunc: (err) => {} - }); + }) } const onChangeAccessLevel = (notif, access) => { if (access != "") { - document.getElementById(notif.id + '_action_button').className = "action_button notification_action enabled"; + document.getElementById(notif.id + '_action_button').className = "action_button notification_action enabled" } } const onClickGrantAccess = (notif) => { - let accessLevel = document.getElementById(notif.id + '-access-level').value; + let accessLevel = document.getElementById(notif.id + '-access-level').value if (accessLevel == "") { - return; + return } - const expireTime = null; + const expireTime = null const userPerms = [{ user_id: notif.from_id, @@ -140,18 +141,18 @@ const Notifications = (user) => { { // No idea why this works // But setting hash after setting pathname would set the hash first and then the pathname in URL - window.location.hash = notif.item_id + '-collab'; + window.location.hash = notif.item_id + '-collab' window.location.pathname = '/my-widgets' } else { queryClient.invalidateQueries(['user-perms', notif.item_id]) - window.location.hash = notif.item_id + '-collab'; + window.location.hash = notif.item_id + '-collab' } - setErrorMsg({notif_id: notif.id, msg: ''}); + setErrorMsg({notif_id: notif.id, msg: ''}) - removeNotification(-1, notif.id); + removeNotification(-1, notif.id) // Close notifications setNavOpen(false) @@ -161,23 +162,22 @@ const Notifications = (user) => { } }) - } - let render = null; - let notificationElements = null; - let notificationIcon = null; + let render = null + let notificationElements = null + let notificationIcon = null if (notifications?.length > 0) { notificationElements = [] for (let index = notifications.length - 1; index >= 0; index--) { - const notification = notifications[index]; + const notification = notifications[index] // If notification was deleted don't show if (notification.remove) continue; - let actionButton = null; - let grantAccessDropdown = null; + let actionButton = null + let grantAccessDropdown = null if (notification.action == "access_request") { grantAccessDropdown =
@@ -190,7 +190,7 @@ const Notifications = (user) => {
actionButton = } - let createdAt = new Date(0); + let createdAt = new Date(0) createdAt.setUTCSeconds(notification.created_at) let notifRow =
{ notificationIcon = + onClick={toggleNavOpen}> notificationElements.push(notifRow) } @@ -248,7 +248,7 @@ const Notifications = (user) => { onClick={() => toggleNavOpen()}> } - return render; + return render } export default Notifications From 95096ca8d008cc04c6e5f31a4da41d767580dd53 Mon Sep 17 00:00:00 2001 From: Corey Peterson Date: Mon, 9 Dec 2024 16:32:39 -0500 Subject: [PATCH 2/4] fixes prev attempt hover behavior and individual scores key warning --- src/components/my-widgets-score-semester-individual.jsx | 2 +- src/components/scores.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/my-widgets-score-semester-individual.jsx b/src/components/my-widgets-score-semester-individual.jsx index 79196e319..7f88ccb08 100644 --- a/src/components/my-widgets-score-semester-individual.jsx +++ b/src/components/my-widgets-score-semester-individual.jsx @@ -126,7 +126,7 @@ const MyWidgetScoreSemesterIndividual = ({ semester, instId, setInvalidLogin }) const studentList = (
    {state.filteredLogs.map(user => ( -
  • +