Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 13:19:44 +02:00
Code Issues Releases 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

2
client/src/components/activities/Activities/Item.module.scss
View file

@ -6,7 +6,6 @@
:global(#app) {
.author {
color: #17394d;
display: inline-block;
font-weight: bold;
line-height: 20px;
}
@ -21,7 +20,6 @@
.date {
color: #6b808c;
display: inline-block;
font-size: 12px;
line-height: 20px;
}

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"

13
client/src/components/notifications/NotificationsStep/Item.module.scss
View file

@ -4,6 +4,11 @@
*/
:global(#app) {
.author {
color: #17394d;
font-weight: bold;
}
.button {
background: transparent;
box-shadow: none;
@ -23,7 +28,7 @@
.content {
display: inline-block;
font-size: 12px;
font-size: 13px;
min-height: 36px;
overflow: hidden;
padding: 0 4px 0 8px;
@ -32,6 +37,12 @@
word-break: break-word;
}
.date {
color: #6b808c;
font-size: 12px;
line-height: 20px;
}
.wrapper {
padding: 12px;