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

feat: Improve UX of comment actions (#924)

Browse source 
Closes #915
This commit is contained in:
Holden Hu 2024-10-28 04:17:08 +08:00 • committed by GitHub
parent f372113def
commit 814b5810ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 53 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import { focusEnd } from '../../../utils/element-helpers';
import styles from './CommentEdit.module.scss'; import styles from './CommentEdit.module.scss';
const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref) => { const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions }, ref) => {
const [t] = useTranslation(); const [t] = useTranslation();
const [isOpened, setIsOpened] = useState(false); const [isOpened, setIsOpened] = useState(false);
const [data, handleFieldChange, setData] = useForm(null); const [data, handleFieldChange, setData] = useForm(null);
@ -76,7 +76,12 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
}, [isOpened]); }, [isOpened]);
if (!isOpened) { if (!isOpened) {
return children; return (
<>
{actions}
{text}
</>
);
} }
return ( return (
@ -101,9 +106,10 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
}); });
CommentEdit.propTypes = { CommentEdit.propTypes = {
children: PropTypes.element.isRequired,
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
onUpdate: PropTypes.func.isRequired, onUpdate: PropTypes.func.isRequired,
text: PropTypes.element.isRequired,
actions: PropTypes.element.isRequired,
}; };
export default React.memo(CommentEdit); export default React.memo(CommentEdit);

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

@ -31,7 +31,18 @@ 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)}>
<CommentEdit
ref={commentEdit}
defaultData={data}
onUpdate={onUpdate}
text={
<div className={styles.text}>
<Markdown linkTarget="_blank">{data.text}</Markdown>
</div>
}
actions={
<div className={styles.title}> <div className={styles.title}>
<span>
<span className={styles.author}>{user.name}</span> <span className={styles.author}>{user.name}</span>
<span className={styles.date}> <span className={styles.date}>
{t(`format:${getDateFormat(createdAt)}`, { {t(`format:${getDateFormat(createdAt)}`, {
@ -39,12 +50,7 @@ const ItemComment = React.memo(
value: createdAt, value: createdAt,
})} })}
</span> </span>
</div> </span>
<CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
<>
<div className={styles.text}>
<Markdown linkTarget="_blank">{data.text}</Markdown>
</div>
{canEdit && ( {canEdit && (
<Comment.Actions> <Comment.Actions>
<Comment.Action <Comment.Action
@ -67,8 +73,9 @@ const ItemComment = React.memo(
</DeletePopup> </DeletePopup>
</Comment.Actions> </Comment.Actions>
)} )}
</> </div>
</CommentEdit> }
/>
</div> </div>
</Comment> </Comment>
); );

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 {