From b12399de5fcbf75a18e515fce074788c850e6e6d Mon Sep 17 00:00:00 2001 From: abias Date: Sat, 3 Jun 2023 22:02:07 -0400 Subject: [PATCH 1/4] 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 a0d72394..5315aa37 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 7ed5e8f4..35ef33ac 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 { } 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 { 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 ( -
+
  • @@ -1024,11 +1011,13 @@ export class CommentNode extends Component { 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 &&
    } -
    + {this.state.collapsed &&
    } +
    • ); } diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index ba8997ac..11960da1 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 { @@ -28,10 +32,24 @@ export class CommentNodes extends Component { } render() { - let maxComments = this.props.maxCommentsShown ?? this.props.nodes.length; + const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length; - return ( -
    + const borderColor = this.props.depth + ? colorList[this.props.depth % colorList.length] + : colorList[0]; + + return this.props.nodes.length > 0 ? ( +
      {this.props.nodes.slice(0, maxComments).map(node => ( { hideImages={this.props.hideImages} /> ))} -
    - ); + + ) : null; } } From 48c16cc977957db400920ec355e9b5e535dda33a Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Sat, 3 Jun 2023 23:49:49 -0400 Subject: [PATCH 2/4] Make comment depth easier to track visually --- src/shared/components/comment/comment-nodes.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index 11960da1..64477fdf 100644 --- a/src/shared/components/comment/comment-nodes.tsx +++ b/src/shared/components/comment/comment-nodes.tsx @@ -41,14 +41,10 @@ export class CommentNodes extends Component { return this.props.nodes.length > 0 ? (
      {this.props.nodes.slice(0, maxComments).map(node => ( Date: Wed, 14 Jun 2023 20:52:31 -0400 Subject: [PATCH 3/4] Make comment border colors semi-transparent --- src/server/index.tsx | 2 +- src/shared/components/comment/comment-node.tsx | 11 ++++------- src/shared/utils.ts | 2 +- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/server/index.tsx b/src/server/index.tsx index 43024076..06dc33a4 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -156,7 +156,7 @@ server.get("/*", async (req, res) => { site = try_site.data; initializeSite(site); - if (path != "/setup" && !site.site_view.local_site.site_setup) { + if (path !== "/setup" && !site.site_view.local_site.site_setup) { return res.redirect("/setup"); } diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 51826462..0380a726 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -270,10 +270,6 @@ export class CommentNode extends Component { this.props.moderators ); - - const borderColor = this.props.node.depth - ? colorList[(this.props.node.depth - 1) % colorList.length] - : colorList[0]; const moreRepliesBorderColor = this.props.node.depth ? colorList[this.props.node.depth % colorList.length] : colorList[0]; @@ -951,9 +947,9 @@ export class CommentNode extends Component {
    {showMoreChildren && (