Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 05:09:43 +02:00
Code Issues Releases Activity

fix: Fix notifications popup styles

Browse source
This commit is contained in:
Maksim Eltyshev 2022-11-20 15:30:07 +01:00
parent ed767e7664
commit 4aff3a702c
2 changed files with 46 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

32
client/src/components/Header/NotificationsPopup.jsx
View file

@ -1,3 +1,4 @@
import truncate from 'lodash/truncate';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from 'react-i18next';
@ -47,23 +48,26 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
{activity.data.toList.name} {activity.data.toList.name}
</Trans> </Trans>
); );
case ActivityTypes.COMMENT_CARD: case ActivityTypes.COMMENT_CARD: {
const commentText = truncate(activity.data.text);
return ( return (
<Trans <Trans
i18nKey="common.userLeftNewCommentToCard" i18nKey="common.userLeftNewCommentToCard"
values={{ values={{
user: activity.user.name, user: activity.user.name,
comment: activity.data.text, comment: commentText,
card: card.name, card: card.name,
}} }}
> >
{activity.user.name} {activity.user.name}
{` left a new comment «${activity.data.text}» to `} {` left a new comment «${commentText}» to `}
<Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}> <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
{card.name} {card.name}
</Link> </Link>
</Trans> </Trans>
); );
}
default: default:
} }
@ -80,9 +84,10 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
})} })}
</Popup.Header> </Popup.Header>
<Popup.Content> <Popup.Content>
{items.length > 0 {items.length > 0 ? (
? items.map((item) => ( <div className={styles.wrapper}>
<div key={item.id} className={styles.wrapper}> {items.map((item) => (
<div key={item.id} className={styles.item}>
{item.card && item.activity ? ( {item.card && item.activity ? (
<> <>
<User <User
@ -90,20 +95,23 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
avatarUrl={item.activity.user.avatarUrl} avatarUrl={item.activity.user.avatarUrl}
size="large" size="large"
/> />
<span className={styles.content}>{renderItemContent(item)}</span> <span className={styles.itemContent}>{renderItemContent(item)}</span>
</> </>
) : ( ) : (
<div className={styles.deletedContent}>{t('common.cardOrActionAreDeleted')}</div> <div className={styles.itemDeleted}>{t('common.cardOrActionAreDeleted')}</div>
)} )}
<Button <Button
type="button" type="button"
icon="close" icon="trash alternate outline"
className={styles.button} className={styles.itemButton}
onClick={() => handleDelete(item.id)} onClick={() => handleDelete(item.id)}
/> />
</div> </div>
)) ))}
: t('common.noUnreadNotifications')} </div>
) : (
t('common.noUnreadNotifications')
)}
</Popup.Content> </Popup.Content>
</> </>
); );

33
client/src/components/Header/NotificationsPopup.module.scss
View file

@ -1,5 +1,13 @@
:global(#app) { :global(#app) {
.button { .item {
padding: 12px;
&:hover {
background: #f0f0f0;
}
}
.itemButton {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
float: right; float: right;
@ -7,7 +15,7 @@
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
min-height: auto; min-height: auto;
padding: 5px 0; padding: 0;
transition: background 0.3s ease; transition: background 0.3s ease;
width: 20px; width: 20px;
@ -16,7 +24,7 @@
} }
} }
.content { .itemContent {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
min-height: 36px; min-height: 36px;
@ -27,7 +35,7 @@
word-break: break-word; word-break: break-word;
} }
.deletedContent { .itemDeleted {
display: inline-block; display: inline-block;
line-height: 20px; line-height: 20px;
min-height: 20px; min-height: 20px;
@ -38,10 +46,21 @@
.wrapper { .wrapper {
margin: 0 -12px; margin: 0 -12px;
padding: 12px; max-height: 60vh;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
&:hover { &::-webkit-scrollbar {
background: #f0f0f0; width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
} }
} }
} }