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: Reorder comment components and improve layout for better readability

Browse source
This commit is contained in:
SedationH 2024-10-27 14:23:56 +08:00
parent 85f8c52f04
commit df66c1a109
3 changed files with 36 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/CardModal/Activities/CommentEdit.jsx
View file

@ -78,8 +78,8 @@ const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions },
if (!isOpened) { if (!isOpened) {
return ( return (
<> <>
{text}
{actions} {actions}
{text}
</> </>
); );
} }

56
client/src/components/CardModal/Activities/ItemComment.jsx
View file

@ -31,15 +31,6 @@ const ItemComment = React.memo(
<User name={user.name} avatarUrl={user.avatarUrl} /> <User name={user.name} avatarUrl={user.avatarUrl} />
</span> </span>
<div className={classNames(styles.content)}> <div className={classNames(styles.content)}>
<div className={styles.title}>
<span className={styles.author}>{user.name}</span>
<span className={styles.date}>
{t(`format:${getDateFormat(createdAt)}`, {
postProcess: 'formatDate',
value: createdAt,
})}
</span>
</div>
<CommentEdit <CommentEdit
ref={commentEdit} ref={commentEdit}
defaultData={data} defaultData={data}
@ -50,28 +41,39 @@ const ItemComment = React.memo(
</div> </div>
} }
actions={ actions={
canEdit && ( <div className={styles.title}>
<Comment.Actions> <span>
<Comment.Action <span className={styles.author}>{user.name}</span>
as="button" <span className={styles.date}>
content={t('action.edit')} {t(`format:${getDateFormat(createdAt)}`, {
disabled={!isPersisted} postProcess: 'formatDate',
onClick={handleEditClick} value: createdAt,
/> })}
<DeletePopup </span>
title="common.deleteComment" </span>
content="common.areYouSureYouWantToDeleteThisComment" {canEdit && (
buttonContent="action.deleteComment" <Comment.Actions>
onConfirm={onDelete}
>
<Comment.Action <Comment.Action
as="button" as="button"
content={t('action.delete')} content={t('action.edit')}
disabled={!isPersisted} disabled={!isPersisted}
onClick={handleEditClick}
/> />
</DeletePopup> <DeletePopup
</Comment.Actions> title="common.deleteComment"
) content="common.areYouSureYouWantToDeleteThisComment"
buttonContent="action.deleteComment"
onConfirm={onDelete}
>
<Comment.Action
as="button"
content={t('action.delete')}
disabled={!isPersisted}
/>
</DeletePopup>
</Comment.Actions>
)}
</div>
} }
/> />
</div> </div>

6
client/src/components/CardModal/Activities/ItemComment.module.scss
View file

@ -38,6 +38,12 @@
.title { .title {
padding-bottom: 4px; padding-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: -1em;
background: #f5f6f7;
} }
.user { .user {