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,
name: notification.read_at ? "Mark as Unread" : "Mark as Read",
name: notification.read_at ? "Mark as unread" : "Mark as read",
icon: "chat_bubble",
onClick: () => {
markNotificationReadStatus(notification.id).then(() => {
@ -191,7 +191,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
},
{
id: 2,
name: notification.archived_at ? "Unarchive Notification" : "Archive Notification",
name: notification.archived_at ? "Unarchive" : "Archive",
icon: "archive",
onClick: () => {
markNotificationArchivedStatus(notification.id).then(() => {
@ -205,7 +205,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
},
},
].map((item) => (
<Tooltip tooltipContent={item.name} position="top-left">
<Tooltip tooltipContent={item.name}>
<button
type="button"
onClick={(e) => {
@ -220,7 +220,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
</Tooltip>
))}
<Tooltip tooltipContent="Snooze Notification" position="top-left">
<Tooltip tooltipContent="Snooze">
<div>
<CustomMenu
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";
// components
import { Icon, Loader, EmptyState } from "components/ui";
import { Icon, Loader, EmptyState, Tooltip } from "components/ui";
import { SnoozeNotificationModal, NotificationCard } from "components/notifications";
// images
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">
<h2 className="text-xl font-semibold mb-2">Notifications</h2>
<div className="flex gap-x-4 justify-center items-center text-custom-text-200">
<button
type="button"
onClick={(e) => {
notificationsMutate();
<Tooltip tooltipContent="Refresh">
<button
type="button"
onClick={(e) => {
notificationsMutate();
const target = e.target as HTMLButtonElement;
target?.classList.add("animate-spin");
setTimeout(() => {
target?.classList.remove("animate-spin");
}, 1000);
}}
>
<Icon iconName="refresh" />
</button>
<button
type="button"
onClick={() => {
setSnoozed(false);
setArchived(false);
setReadNotification((prev) => !prev);
}}
>
<Icon iconName="filter_list" />
</button>
<button
type="button"
onClick={() => {
setArchived(false);
setReadNotification(false);
setSnoozed((prev) => !prev);
}}
>
<Icon iconName="schedule" />
</button>
<button
type="button"
onClick={() => {
setSnoozed(false);
setReadNotification(false);
setArchived((prev) => !prev);
}}
>
<Icon iconName="archive" />
</button>
const target = e.target as HTMLButtonElement;
target?.classList.add("animate-spin");
setTimeout(() => {
target?.classList.remove("animate-spin");
}, 1000);
}}
>
<Icon iconName="refresh" />
</button>
</Tooltip>
<Tooltip tooltipContent="Unread notifications">
<button
type="button"
onClick={() => {
setSnoozed(false);
setArchived(false);
setReadNotification((prev) => !prev);
}}
>
<Icon iconName="filter_list" />
</button>
</Tooltip>
<Tooltip tooltipContent="Snoozed notifications">
<button
type="button"
onClick={() => {
setArchived(false);
setReadNotification(false);
setSnoozed((prev) => !prev);
}}
>
<Icon iconName="schedule" />
</button>
</Tooltip>
<Tooltip tooltipContent="Archived notifications">
<button
type="button"
onClick={() => {
setSnoozed(false);
setReadNotification(false);
setArchived((prev) => !prev);
}}
>
<Icon iconName="archive" />
</button>
</Tooltip>
<button type="button" onClick={() => closePopover()}>
<Icon iconName="close" />
</button>