github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: tooltip on notification header actions (#1577)

Browse Source 
* style: tooltip on notification header

* chore: update tooltip content

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Dakshesh Jain 2023-07-19 18:42:32 +05:30 committed by GitHub
parent bed5f76082
commit 5c5bcb33e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/notifications/notification-card.tsx
View File

@ -176,7 +176,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
{[ {[
{ {
id: 1, id: 1,
name: notification.read_at ? "Mark as Unread" : "Mark as Read", name: notification.read_at ? "Mark as unread" : "Mark as read",
icon: "chat_bubble", icon: "chat_bubble",
onClick: () => { onClick: () => {
markNotificationReadStatus(notification.id).then(() => { markNotificationReadStatus(notification.id).then(() => {
@ -191,7 +191,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
}, },
{ {
id: 2, id: 2,
name: notification.archived_at ? "Unarchive Notification" : "Archive Notification", name: notification.archived_at ? "Unarchive" : "Archive",
icon: "archive", icon: "archive",
onClick: () => { onClick: () => {
markNotificationArchivedStatus(notification.id).then(() => { markNotificationArchivedStatus(notification.id).then(() => {
@ -205,7 +205,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
}, },
}, },
].map((item) => ( ].map((item) => (
<Tooltip tooltipContent={item.name} position="top-left"> <Tooltip tooltipContent={item.name}>
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@ -220,7 +220,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
</Tooltip> </Tooltip>
))} ))}
<Tooltip tooltipContent="Snooze Notification" position="top-left"> <Tooltip tooltipContent="Snooze">
<div> <div>
<CustomMenu <CustomMenu
menuButtonOnClick={(e) => { menuButtonOnClick={(e) => {

96
apps/app/components/notifications/notification-popover.tsx
View File

@ -12,7 +12,7 @@ import useWorkspaceMembers from "hooks/use-workspace-members";
import useUserNotification from "hooks/use-user-notifications"; import useUserNotification from "hooks/use-user-notifications";
// components // components
import { Icon, Loader, EmptyState } from "components/ui"; import { Icon, Loader, EmptyState, Tooltip } from "components/ui";
import { SnoozeNotificationModal, NotificationCard } from "components/notifications"; import { SnoozeNotificationModal, NotificationCard } from "components/notifications";
// images // images
import emptyNotification from "public/empty-state/notification.svg"; import emptyNotification from "public/empty-state/notification.svg";
@ -120,50 +120,58 @@ export const NotificationPopover = () => {
<div className="flex items-center justify-between px-5 pt-5"> <div className="flex items-center justify-between px-5 pt-5">
<h2 className="text-xl font-semibold mb-2">Notifications</h2> <h2 className="text-xl font-semibold mb-2">Notifications</h2>
<div className="flex gap-x-4 justify-center items-center text-custom-text-200"> <div className="flex gap-x-4 justify-center items-center text-custom-text-200">
<button <Tooltip tooltipContent="Refresh">
type="button" <button
onClick={(e) => { type="button"
notificationsMutate(); onClick={(e) => {
notificationsMutate();
const target = e.target as HTMLButtonElement; const target = e.target as HTMLButtonElement;
target?.classList.add("animate-spin"); target?.classList.add("animate-spin");
setTimeout(() => { setTimeout(() => {
target?.classList.remove("animate-spin"); target?.classList.remove("animate-spin");
}, 1000); }, 1000);
}} }}
> >
<Icon iconName="refresh" /> <Icon iconName="refresh" />
</button> </button>
<button </Tooltip>
type="button" <Tooltip tooltipContent="Unread notifications">
onClick={() => { <button
setSnoozed(false); type="button"
setArchived(false); onClick={() => {
setReadNotification((prev) => !prev); setSnoozed(false);
}} setArchived(false);
> setReadNotification((prev) => !prev);
<Icon iconName="filter_list" /> }}
</button> >
<button <Icon iconName="filter_list" />
type="button" </button>
onClick={() => { </Tooltip>
setArchived(false); <Tooltip tooltipContent="Snoozed notifications">
setReadNotification(false); <button
setSnoozed((prev) => !prev); type="button"
}} onClick={() => {
> setArchived(false);
<Icon iconName="schedule" /> setReadNotification(false);
</button> setSnoozed((prev) => !prev);
<button }}
type="button" >
onClick={() => { <Icon iconName="schedule" />
setSnoozed(false); </button>
setReadNotification(false); </Tooltip>
setArchived((prev) => !prev); <Tooltip tooltipContent="Archived notifications">
}} <button
> type="button"
<Icon iconName="archive" /> onClick={() => {
</button> setSnoozed(false);
setReadNotification(false);
setArchived((prev) => !prev);
}}
>
<Icon iconName="archive" />
</button>
</Tooltip>
<button type="button" onClick={() => closePopover()}> <button type="button" onClick={() => closePopover()}>
<Icon iconName="close" /> <Icon iconName="close" />
</button> </button>