Add notification button components #302

AndrewLester · 2022-02-24T00:44:32Z

Summary

Closes #298

This won't be merged into master without the content being done, perhaps that will be merged in here.

Changes

Adds the notification dropdown panel

Screenshots

In navbar:

Opened:

NdibeRaymond · 2022-02-26T05:15:51Z

Hello @AndrewLester , thanks for working on this feature, the UI looks great!.

I was wondering, how the notification UX flow look like?
Is there a little mockup/sketch of this in full ? I saw some figma files but they are all locked (the sketch will probably include the notification objects themselves, menus for opening where you see things like "mark notification as read", "delete notification", etc).
I think a mockup will really help in iterating fast (and I speak as a frontend person here. somethings it's very painful
reimplementing a design just because someone thinks there are some minor things that needs to be fixed. a mockup helps us
avoid that pain).
Also, how will stuffs like pagination be handled ? (since the data returning from the backend will be paginated)

AndrewLester · 2022-02-27T18:55:41Z

@NdibeRaymond , a lot of your questions are probably answered by the figma designs you saw, but I'll answer the last one. We were planning on only displaying the last 10 or so notifications in the panel, so the endpoint would either return only the last 10 or the panel would only need the first page (of size 10). No pagination UI would be available in this panel.

ajain1921 · 2022-03-01T03:24:43Z

zubhub_frontend/zubhub/src/components/notification_panel/NotificationPanel.jsx

+  const getUnreadNotificationView = () => (
+    <div>Unread notifications here...</div>
+  );


Small thing but this doesn't show up under the Unread tab for the desktop view. It does show up under mobile though.

ajain1921

Great work on the PR! There's a small bug on the unread tab but I think that should be quick to fix.

* Add notification button components * Fix popper positioning * Add popper arrow and inner content * Give dropdown box shadow * Add mobile view * Fix box shadow on arrow for dropdown panel * Fix coloring of unread notifications text

* Create notifications folder in zubhub_backend/zubhub, begin implementing test functions * Move send_whatsapp function to adapters.py, create task in tasks.py, create send-notification path for testing, test get method in views * Create notifications folder in zubhub_backend/zubhub, begin implementing test functions * Move send_whatsapp function to adapters.py, create task in tasks.py, create send-notification path for testing, test get method in views * Use whatsapp phone in adapter * Fix whatsapp message sending * Fix bug in send_whatsapp function in adapters.py * Fix settings name * Notification Model and Endpoints (#286) * initial commit * fix namings * Add update and delete requests * Add boilerplate stuff * finish all endpoints * Add source and preferred contact * modifications to notification endpoints * fix notification list view * hyphens * address merge conflict * Update start Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Grace Zhang <[email protected]> Co-authored-by: Aditya Jain <[email protected]> Co-authored-by: Zora Zhang <[email protected]> * Add notification button components (#302) * Add notification button components * Fix popper positioning * Add popper arrow and inner content * Give dropdown box shadow * Add mobile view * Fix box shadow on arrow for dropdown panel * Fix coloring of unread notifications text * Add push notification util function and use CreatorSerializer (#316) * Add push notification util function and use CreatorSerializer for notification serializer * Add notification type field to notification model * Add type to notification serializer and add migration * Remove references to message property of notification * Add viewed to notification serializer * Use creator minimal serializer * Add new link property to notification model * Notification Helper Function (#306) * initial setup * add setting * fix the way to get setting * commit * finished and tested function * add original code back in * modify function to send mass text/email * Add channel verification Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Aditya Jain <[email protected]> * Fix migrations * Add several functions and maps for notifications logic (#324) * Add several functions and maps for notifications logic, not working * Finish notification sending function * Remove redundant check for valid notification channel for notification type * Send notifications when notification events occur * Recommend unused function * Add throttle classes back * Fix file extensions * Fix notification template prefix * Add message field to notification model to support notifications that mention project names * Properly create migrations and use char field * Use name instead of label for django integer choice class * Change notification link attribute to be a char field * Fix email templates for notifications * Notifications panel loading notifications complete (#341) * Notifications panel loading notifications complete * Use artifical loading for pages after 1 * Change padding * Add comment for recent notification threshold * Remove console log * Format * Remove unncessary space * Reset scroll on notification tab change * Add notification grouping code (#351) * Add notification grouping code * Use set to determine valid grouped notification types * Actually make the grouping work * Persist context for pushing notifications * Remove prints * Fix django db warning' * Return notification in all branch paths * No need to return notification * Notification Component for Notification Panel (#311) * Outline for Notification components and stylings * Testing notification * Complete majority of stylings for notification component, add dummy component and props to PageWrapper.jsx * Complete stylings for notification component, fix hovers! * Make small style changes to notification component * Begin connecting to backend using realistic parameters, not clean or very functional yet * Begin adapting notification panel to hold notification components * Finish stylings for notification component and message rendering * Finish up API methods to updated viewed notification, add token constant to component * Add logic for rendering notification timestamp, redirect link, and notification message * Clean up and reduce code, remove redunant or unused sections * Move renderTimeAgo and getNotification to new NotificationScripts.js file, simplify logic in scripts, remove viewComment from userActions.js, call API.viewNotification directly in component * Add proper date formatting using dFormatter, string truncation for notification message * Add double image design to nofications, add project titles to views, fix small format issue in comment template * Finish up issue, update notification templates for consitency, fix bug in project details useEffect * Update clapped web_many message to not include strong tags * Update web_many message templates to include project name * Fix url * Minor fixes, add mobile width dependency, update getMessage() to get consistent character limits, remove mock data from PageWrapper Co-authored-by: Aditya Jain <[email protected]> * Notification feature fix (#429) * Fix most notification feature bugs * Fix app bar on top of other elements * Fix panel zindex * Fix panel loading * Fix comment notif Co-authored-by: Aditya Jain <[email protected]> * Add quotes to template * linearize migrations * Fix import * Add project to template * Styling fixes * Delete .gitignore Co-authored-by: saxytony <[email protected]> Co-authored-by: AndrewLester <[email protected]> Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: Grace Zhang <[email protected]> Co-authored-by: Zora Zhang <[email protected]> Co-authored-by: saxytony <[email protected]>

Add notification button components

4d0b2e6

AndrewLester force-pushed the al/notification-dropdown branch from 6faa70d to 4d0b2e6 Compare February 24, 2022 00:44

AndrewLester added 2 commits February 23, 2022 19:49

Fix popper positioning

894517c

Add popper arrow and inner content

ea93f8b

AndrewLester marked this pull request as ready for review February 24, 2022 03:40

AndrewLester requested review from NdibeRaymond, tuxology and ajain1921 as code owners February 24, 2022 03:40

AndrewLester added 3 commits February 23, 2022 21:43

Give dropdown box shadow

901e80c

Add mobile view

2695554

Fix box shadow on arrow for dropdown panel

2c9988e

ajain1921 reviewed Mar 1, 2022

View reviewed changes

ajain1921 approved these changes Mar 1, 2022

View reviewed changes

ajain1921 changed the base branch from master to notification_feature March 1, 2022 03:26

Fix coloring of unread notifications text

74ac45a

AndrewLester merged commit edb2165 into notification_feature Mar 3, 2022

tuxology deleted the al/notification-dropdown branch September 29, 2023 00:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add notification button components #302

Add notification button components #302

AndrewLester commented Feb 24, 2022 •

edited

Loading

NdibeRaymond commented Feb 26, 2022 •

edited

Loading

AndrewLester commented Feb 27, 2022

ajain1921 Mar 1, 2022

ajain1921 left a comment

Add notification button components #302

Add notification button components #302

Conversation

AndrewLester commented Feb 24, 2022 • edited Loading

Summary

Changes

Screenshots

NdibeRaymond commented Feb 26, 2022 • edited Loading

AndrewLester commented Feb 27, 2022

ajain1921 Mar 1, 2022

Choose a reason for hiding this comment

ajain1921 left a comment

Choose a reason for hiding this comment

AndrewLester commented Feb 24, 2022 •

edited

Loading

NdibeRaymond commented Feb 26, 2022 •

edited

Loading