Comment action icons. Also only show on hover

crosshare-org · May 8, 2024 · ff34c9a · ff34c9a
1 parent 3a56a6f
commit ff34c9a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/app/components/Comments.module.css b/app/components/Comments.module.css
@@ -48,3 +48,32 @@
 .publishDate {
   font-style: italic;
 }
+
+.commentView {
+  margin-top: 1em;
+}
+
+.actionButton {
+  display: inline-flex;
+  align-items: center;
+}
+
+.actionButton:hover {
+  text-decoration: underline;
+}
+
+.actionButton svg {
+  margin-right: 0.5em;
+}
+
+.actionButtons {
+  visibility: hidden;
+}
+
+.commentView:hover > .actionButtons {
+  visibility: visible;
+}
+
+.commentView:has(.commentView:hover) > .actionButtons {
+  visibility: hidden;
+}
diff --git a/app/components/Comments.tsx b/app/components/Comments.tsx
@@ -11,6 +11,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { FaComment, FaFlag, FaTrash } from 'react-icons/fa';
 import { ConstructorPageT } from '../lib/constructorPage';
 import {
   CommentDeletionT,
@@ -119,7 +120,7 @@ interface CommentProps {
 }
 const CommentView = (props: CommentProps) => {
   return (
-    <div className="marginTop1em">
+    <div className={styles.commentView}>
       <div>
         <CommentFlair
           publishTime={Math.max(
@@ -143,6 +144,15 @@ const CommentView = (props: CommentProps) => {
   );
 };
 
+function ActionButton(props: { icon: ReactNode; text: ReactNode }) {
+  return (
+    <span className={styles.actionButton}>
+      {props.icon}
+      {props.text}
+    </span>
+  );
+}
+
 const CommentWithReplies = (
   props: PartialBy<CommentFormProps, 'user'> & {
     comment: CommentOrLocalComment;
@@ -172,7 +182,7 @@ const CommentWithReplies = (
           onClick={() => {
             setShowingForm(true);
           }}
-          text={t`Reply`}
+          text={<ActionButton icon={<FaComment />} text={t`Reply`} />}
         />
       );
     }
@@ -182,7 +192,7 @@ const CommentWithReplies = (
           onClick={() => {
             setShowingDeleteOverlay(true);
           }}
-          text={'Delete'}
+          text={<ActionButton icon={<FaTrash />} text={t`Delete`} />}
         />
       );
     }
@@ -192,7 +202,7 @@ const CommentWithReplies = (
           onClick={() => {
             setShowingReportOverlay(true);
           }}
-          text={'Report'}
+          text={<ActionButton icon={<FaFlag />} text={t`Report`} />}
         />
       );
     }
@@ -283,10 +293,14 @@ const CommentWithReplies = (
           />
         </div>
       ) : (
-        <div>
+        <div className={styles.actionButtons}>
           {actionButtons.map((btn, idx) => (
             <Fragment key={idx}>
-              {!!idx && <> &middot; </>}
+              {!!idx && (
+                <span className="marginLeft0-5em marginRight0-5em">
+                  &middot;
+                </span>
+              )}
               {btn}
             </Fragment>
           ))}