1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-24 07:39:44 +02:00

feat: Reorder comment components and improve layout for better readability

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

View file

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

View file

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

View file

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