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) => {

10
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,6 +120,7 @@ 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">
<Tooltip tooltipContent="Refresh">
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@ -134,6 +135,8 @@ export const NotificationPopover = () => {
> >
<Icon iconName="refresh" /> <Icon iconName="refresh" />
</button> </button>
</Tooltip>
<Tooltip tooltipContent="Unread notifications">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@ -144,6 +147,8 @@ export const NotificationPopover = () => {
> >
<Icon iconName="filter_list" /> <Icon iconName="filter_list" />
</button> </button>
</Tooltip>
<Tooltip tooltipContent="Snoozed notifications">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@ -154,6 +159,8 @@ export const NotificationPopover = () => {
> >
<Icon iconName="schedule" /> <Icon iconName="schedule" />
</button> </button>
</Tooltip>
<Tooltip tooltipContent="Archived notifications">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@ -164,6 +171,7 @@ export const NotificationPopover = () => {
> >
<Icon iconName="archive" /> <Icon iconName="archive" />
</button> </button>
</Tooltip>
<button type="button" onClick={() => closePopover()}> <button type="button" onClick={() => closePopover()}>
<Icon iconName="close" /> <Icon iconName="close" />
</button> </button>