From: Dessalines <tyhou13@gmx.com>
Date: Fri, 16 Jul 2021 17:04:35 +0000 (-0400)
Subject: Use better comment collapse icon, and add text. Fixes #318
X-Git-Url: http://these/git/?a=commitdiff_plain;h=0c45d61eeb16e3f30a3c33c2a89ed85f2de96eb2;p=lemmy-ui.git

Use better comment collapse icon, and add text. Fixes #318
---

diff --git a/src/shared/components/comment-node.tsx b/src/shared/components/comment-node.tsx
index 0e7db68..33518f8 100644
--- a/src/shared/components/comment-node.tsx
+++ b/src/shared/components/comment-node.tsx
@@ -193,11 +193,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               <button
                 class="btn btn-sm text-muted"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
-                aria-label={
-                  this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
-                }
+                aria-label={this.expandText}
+                data-tippy-content={this.expandText}
               >
-                {this.state.collapsed ? "+" : "—"}
+                {this.state.collapsed ? (
+                  <Icon icon="plus-square" classes="icon-inline" />
+                ) : (
+                  <Icon icon="minus-square" classes="icon-inline" />
+                )}
               </button>
               {/* This is an expanding spacer for mobile */}
               <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
@@ -1232,6 +1235,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   handleCommentCollapse(i: CommentNode) {
     i.state.collapsed = !i.state.collapsed;
     i.setState(i.state);
+    setupTippy();
   }
 
   handleViewSource(i: CommentNode) {
@@ -1270,4 +1274,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     return `${points} • ${upvotes} • ${downvotes}`;
   }
+
+  get expandText(): string {
+    return this.state.collapsed ? i18n.t("expand") : i18n.t("collapse");
+  }
 }