feat: Improve UX of comment actions (#924)

Closes #915
plankanban · Oct 27, 2024 · 814b581 · 814b581
1 parent f372113
commit 814b581
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 34 deletions.
diff --git a/client/src/components/CardModal/Activities/CommentEdit.jsx b/client/src/components/CardModal/Activities/CommentEdit.jsx
@@ -10,7 +10,7 @@ import { focusEnd } from '../../../utils/element-helpers';
 
 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 [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(null);
@@ -76,7 +76,12 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
   }, [isOpened]);
 
   if (!isOpened) {
-    return children;
+    return (
+      <>
+        {actions}
+        {text}
+      </>
+    );
   }
 
   return (
@@ -101,9 +106,10 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
 });
 
 CommentEdit.propTypes = {
-  children: PropTypes.element.isRequired,
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
+  text: PropTypes.element.isRequired,
+  actions: PropTypes.element.isRequired,
 };
 
 export default React.memo(CommentEdit);
diff --git a/client/src/components/CardModal/Activities/ItemComment.jsx b/client/src/components/CardModal/Activities/ItemComment.jsx
@@ -31,44 +31,51 @@ 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} onUpdate={onUpdate}>
-            <>
+          <CommentEdit
+            ref={commentEdit}
+            defaultData={data}
+            onUpdate={onUpdate}
+            text={
               <div className={styles.text}>
                 <Markdown linkTarget="_blank">{data.text}</Markdown>
               </div>
-              {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}
-                  >
+            }
+            actions={
+              <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>
-              )}
-            </>
-          </CommentEdit>
+                    <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>
       </Comment>
     );

diff --git a/client/src/components/CardModal/Activities/ItemComment.module.scss b/client/src/components/CardModal/Activities/ItemComment.module.scss
@@ -38,6 +38,12 @@
 
   .title {
     padding-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: -1em;
+    background: #f5f6f7;
   }
 
   .user {