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:
parent
85f8c52f04
commit
df66c1a109
3 changed files with 36 additions and 28 deletions
|
@ -78,8 +78,8 @@ const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions },
|
|||
if (!isOpened) {
|
||||
return (
|
||||
<>
|
||||
{text}
|
||||
{actions}
|
||||
{text}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -38,6 +38,12 @@
|
|||
|
||||
.title {
|
||||
padding-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: -1em;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.user {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue