From b12399de5fcbf75a18e515fce074788c850e6e6d Mon Sep 17 00:00:00 2001 From: abias <abias1122@gmail.com> Date: Sat, 3 Jun 2023 22:02:07 -0400 Subject: [PATCH] Make comments nested lists --- src/assets/css/main.css | 5 ++ .../components/comment/comment-node.tsx | 47 +++++++------------ .../components/comment/comment-nodes.tsx | 28 +++++++++-- 3 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index a0d7239..5315aa3 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -213,6 +213,11 @@ blockquote { overflow-y: auto; } +.comments { + list-style: none; + padding: 0; +} + .thumbnail { object-fit: cover; min-height: 60px; diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 7ed5e8f..35ef33a 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -159,18 +159,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { } render() { - let node = this.props.node; - let cv = this.props.node.comment_view; + const node = this.props.node; + const cv = this.props.node.comment_view; - let purgeTypeText = + const purgeTypeText = this.state.purgeType == PurgeType.Comment ? i18n.t("purge_comment") : `${i18n.t("purge")} ${cv.creator.name}`; - let canMod_ = + const canMod_ = canMod(cv.creator.id, this.props.moderators, this.props.admins) && cv.community.local; - let canModOnSelf = + const canModOnSelf = canMod( cv.creator.id, this.props.moderators, @@ -178,59 +178,46 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { UserService.Instance.myUserInfo, true ) && cv.community.local; - let canAdmin_ = + const canAdmin_ = canAdmin(cv.creator.id, this.props.admins) && cv.community.local; - let canAdminOnSelf = + const canAdminOnSelf = canAdmin( cv.creator.id, this.props.admins, UserService.Instance.myUserInfo, true ) && cv.community.local; - let isMod_ = isMod(cv.creator.id, this.props.moderators); - let isAdmin_ = + const isMod_ = isMod(cv.creator.id, this.props.moderators); + const isAdmin_ = isAdmin(cv.creator.id, this.props.admins) && cv.community.local; - let amCommunityCreator_ = amCommunityCreator( + const amCommunityCreator_ = amCommunityCreator( cv.creator.id, this.props.moderators ); - let borderColor = this.props.node.depth - ? colorList[(this.props.node.depth - 1) % colorList.length] - : colorList[0]; - let moreRepliesBorderColor = this.props.node.depth + const moreRepliesBorderColor = this.props.node.depth ? colorList[this.props.node.depth % colorList.length] : colorList[0]; - let showMoreChildren = + const showMoreChildren = this.props.viewType == CommentViewType.Tree && !this.state.collapsed && node.children.length == 0 && node.comment_view.counts.child_count > 0; return ( - <div - className={`comment ${ - this.props.node.depth && !this.props.noIndent ? "ml-1" : "" - }`} - > + <li className="comment" role="comment"> <div id={`comment-${cv.comment.id}`} className={classNames(`details comment-node py-2`, { - "border-top border-light": !this.props.noBorder, mark: this.isCommentNew || this.props.node.comment_view.comment.distinguished, })} - style={ - !this.props.noIndent && this.props.node.depth - ? `border-left: 2px ${borderColor} solid !important` - : "" - } > <div className={classNames({ - "ml-2": !this.props.noIndent && this.props.node.depth, + "ml-2": !this.props.noIndent, })} > <div className="d-flex flex-wrap align-items-center text-muted small"> @@ -1024,11 +1011,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { allLanguages={this.props.allLanguages} siteLanguages={this.props.siteLanguages} hideImages={this.props.hideImages} + isChild={!this.props.noIndent} + depth={this.props.node.depth + 1} /> )} {/* A collapsed clearfix */} - {this.state.collapsed && <div className="row col-12"></div>} - </div> + {this.state.collapsed && <div className="row col-12" />} + </li> ); } diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index ba8997a..11960da 100644 --- a/src/shared/components/comment/comment-nodes.tsx +++ b/src/shared/components/comment/comment-nodes.tsx @@ -1,6 +1,8 @@ +import classNames from "classnames"; import { Component } from "inferno"; import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client"; import { CommentNodeI, CommentViewType } from "../../interfaces"; +import { colorList } from "../../utils"; import { CommentNode } from "./comment-node"; interface CommentNodesProps { @@ -20,6 +22,8 @@ interface CommentNodesProps { allLanguages: Language[]; siteLanguages: number[]; hideImages?: boolean; + isChild?: boolean; + depth?: number; } export class CommentNodes extends Component<CommentNodesProps, any> { @@ -28,10 +32,24 @@ export class CommentNodes extends Component<CommentNodesProps, any> { } render() { - let maxComments = this.props.maxCommentsShown ?? this.props.nodes.length; + const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length; - return ( - <div className="comments"> + const borderColor = this.props.depth + ? colorList[this.props.depth % colorList.length] + : colorList[0]; + + return this.props.nodes.length > 0 ? ( + <ul + className={classNames("comments", { + "ms-2": !!this.props.isChild, + "border-top border-light": !this.props.noBorder, + })} + style={{ + "border-left-color": borderColor, + "border-left-style": "solid", + "border-left-width": `2px`, + }} + > {this.props.nodes.slice(0, maxComments).map(node => ( <CommentNode key={node.comment_view.comment.id} @@ -52,7 +70,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> { hideImages={this.props.hideImages} /> ))} - </div> - ); + </ul> + ) : null; } } -- 2.44.1