Expanded posts replies shows visual indicator to close replies + some…

… css tweaks (#473)
NEAR-DevHub · Nov 15, 2023 · 5970195 · 5970195
1 parent 25fca6f
commit 5970195
Showing 1 changed file with 44 additions and 24 deletions.
diff --git a/src/devhub/entity/post/Post.jsx b/src/devhub/entity/post/Post.jsx
@@ -12,10 +12,18 @@ if (!href) {
 
 const ButtonWithHover = styled.button`
   background-color: #fff;
+  transition: all 300ms;
+  border-radius: 0.5rem;
+
   &:hover {
     background-color: #e9ecef;
     color: #000;
   }
+
+  &:disabled {
+    background-color: #fff;
+    color: #b7b7b7;
+  }
 `;
 
 const postId = props.post.id ?? (props.id ? parseInt(props.id) : 0);
@@ -401,18 +409,27 @@ const buttonsFooter = props.isPreview ? null : (
             )}
           </ul>
         </div>
-        <ButtonWithHover
-          type="button"
-          class="btn"
-          style={{ border: "0px" }}
-          data-bs-toggle="collapse"
-          href={`#collapseChildPosts${postId}`}
-          aria-expanded={defaultExpanded}
-          aria-controls={`collapseChildPosts${postId}`}
-        >
-          <i class="bi bi-chevron-down"> </i>{" "}
-          {`Expand Replies (${childPostIds.length})`}
-        </ButtonWithHover>
+        {childPostIds.length > 0 && (
+          <ButtonWithHover
+            type="button"
+            class="btn"
+            style={{ border: "0px" }}
+            data-bs-toggle="collapse"
+            href={`#collapseChildPosts${postId}`}
+            aria-expanded={defaultExpanded}
+            aria-controls={`collapseChildPosts${postId}`}
+            onClick={() =>
+              State.update({ expandReplies: !state.expandReplies })
+            }
+          >
+            <i
+              class={`bi bi-chevron-${state.expandReplies ? "up" : "down"}`}
+            ></i>{" "}
+            {`${state.expandReplies ? "Collapse" : "Expand"} Replies (${
+              childPostIds.length
+            })`}
+          </ButtonWithHover>
+        )}
 
         {isUnderPost || !parentId ? (
           <div key="link-to-parent"></div>
@@ -701,18 +718,20 @@ const postsList =
         id={`collapseChildPosts${postId}`}
       >
         {childPostIds.map((childId) => (
-          <Widget
-            src="${REPL_DEVHUB}/widget/devhub.entity.post.Post"
-            props={{
-              id: childId,
-              isUnderPost: true,
-              onDraftStateChange,
-              draftState,
-              expandParent: () =>
-                State.update({ childrenOfChildPostsHasDraft: true }),
-              referral: `subpost${childId}of${postId}`,
-            }}
-          />
+          <div key={childId} style={{ marginBottom: "0.5rem" }}>
+            <Widget
+              src="${REPL_DEVHUB}/widget/devhub.entity.post.Post"
+              props={{
+                id: childId,
+                isUnderPost: true,
+                onDraftStateChange,
+                draftState,
+                expandParent: () =>
+                  State.update({ childrenOfChildPostsHasDraft: true }),
+                referral: `subpost${childId}of${postId}`,
+              }}
+            />
+          </div>
         ))}
       </div>
     </div>
@@ -729,6 +748,7 @@ const needClamp = isInList && contentArray.length > 5;
 
 initState({
   clamp: needClamp,
+  expandReplies: defaultExpanded,
 });
 
 const clampedContent = needClamp