LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 11:21:26 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Dessalines 2021-07-16 13:04:35 -04:00
parent 40a14b5ebe
commit 0c45d61eeb
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/shared/components/comment-node.tsx
View file

@ -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");
}
}