starred/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-12-18 17:23:21 +03:00
Code Issues 418 Packages Projects Releases 12 Wiki Activity

feat: Enhance notifications popup appearance

Browse Source
This commit is contained in:
Maksim Eltyshev
2025-05-21 13:03:25 +02:00
parent d5fd2fd33b
commit c05dcf45f2
33 changed files with 112 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/notifications/NotificationsStep/Item.jsx
View File

@@ -16,6 +16,7 @@ import entryActions from '../../../entry-actions';
import Paths from '../../../constants/Paths';
import { StaticUserIds } from '../../../constants/StaticUsers';
import { NotificationTypes } from '../../../constants/Enums';
import TimeAgo from '../../common/TimeAgo';
import UserAvatar from '../../users/UserAvatar';
import styles from './Item.module.scss';
@@ -67,7 +68,7 @@ const Item = React.memo(({ id, onClose }) => {
toList: toListName,
}}
>
{creatorUserName}
<span className={styles.author}>{creatorUserName}</span>
{' moved '}
<Link to={Paths.CARDS.replace(':id', notification.cardId)} onClick={onClose}>
{cardName}
@@ -93,7 +94,7 @@ const Item = React.memo(({ id, onClose }) => {
card: cardName,
}}
>
{creatorUserName}
<span className={styles.author}>{creatorUserName}</span>
{` left a new comment «${commentText}» to `}
<Link to={Paths.CARDS.replace(':id', notification.cardId)} onClick={onClose}>
{cardName}
@@ -112,7 +113,7 @@ const Item = React.memo(({ id, onClose }) => {
card: cardName,
}}
>
{creatorUserName}
<span className={styles.author}>{creatorUserName}</span>
{` added you to `}
<Link to={Paths.CARDS.replace(':id', notification.cardId)} onClick={onClose}>
{cardName}
@@ -128,7 +129,12 @@ const Item = React.memo(({ id, onClose }) => {
return (
<div className={styles.wrapper}>
<UserAvatar id={notification.creatorUserId} size="large" />
<span className={styles.content}>{contentNode}</span>
<span className={styles.content}>
<div>{contentNode}</div>
<span className={styles.date}>
<TimeAgo date={notification.createdAt} />
</span>
</span>
<Button
type="button"
icon="trash alternate outline"