Merge pull request #1072 from LemmyNet/comment-depth

Comment depth

src/assets/css/main.css

@@ -218,6 +218,11 @@ blockquote {
   overflow-y: auto;
 }
 
+.comments {
+  list-style: none;
+  padding: 0;
+}
+
 .thumbnail {
   object-fit: cover;
   min-height: 60px;

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

src/shared/components/comment/comment-node.tsx

@@ -270,9 +270,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       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];
@@ -284,26 +281,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       node.comment_view.counts.child_count > 0;
 
     return (
-      <div
+      <li className="comment" role="comment">
-        className={`comment ${
-          this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
-        }`}
-      >
         <div
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
             "border-top border-light": !this.props.noBorder,
             mark: this.isCommentNew || this.commentView.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">
@@ -959,9 +947,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         </div>
         {showMoreChildren && (
           <div
-            className={`details ml-1 comment-node py-2 ${
+            className={classNames("details ml-1 comment-node py-2", {
-              !this.props.noBorder ? "border-top border-light" : ""
+              "border-top border-light": !this.props.noBorder,
-            }`}
+            })}
             style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
           >
             <button
@@ -1169,6 +1157,8 @@ 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}
             finished={this.props.finished}
             onCommentReplyRead={this.props.onCommentReplyRead}
             onPersonMentionRead={this.props.onPersonMentionRead}
@@ -1192,8 +1182,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           />
         )}
         {/* A collapsed clearfix */}
-        {this.state.collapsed && <div className="row col-12"></div>}
+        {this.state.collapsed && <div className="row col-12" />}
-      </div>
+      </li>
     );
   }
 
@@ -1211,6 +1201,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
   linkBtn(small = false) {
     const cv = this.commentView;
+
     const classnames = classNames("btn btn-link btn-animate text-muted", {
       "btn-sm": small,
     });

src/shared/components/comment/comment-nodes.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component } from "inferno";
 import {
   AddAdmin,
@@ -25,6 +26,7 @@ import {
   TransferCommunity,
 } from "lemmy-js-client";
 import { CommentNodeI, CommentViewType } from "../../interfaces";
+import { colorList } from "../../utils";
 import { CommentNode } from "./comment-node";
 
 interface CommentNodesProps {
@@ -44,6 +46,8 @@ interface CommentNodesProps {
   allLanguages: Language[];
   siteLanguages: number[];
   hideImages?: boolean;
+  isChild?: boolean;
+  depth?: number;
   finished: Map<CommentId, boolean | undefined>;
   onSaveComment(form: SaveComment): void;
   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
@@ -74,49 +78,61 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
   render() {
     const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
 
+    const borderColor = this.props.depth
+      ? colorList[this.props.depth % colorList.length]
+      : colorList[0];
+
     return (
-      <div className="comments">
+      this.props.nodes.length > 0 && (
-        {this.props.nodes.slice(0, maxComments).map(node => (
+        <ul
-          <CommentNode
+          className={classNames("comments", {
-            key={node.comment_view.comment.id}
+            "ms-1": !!this.props.isChild,
-            node={node}
+            "border-top border-light": !this.props.noBorder,
-            noBorder={this.props.noBorder}
+          })}
-            noIndent={this.props.noIndent}
+          style={`border-left: 2px solid ${borderColor} !important;`}
-            viewOnly={this.props.viewOnly}
+        >
-            locked={this.props.locked}
+          {this.props.nodes.slice(0, maxComments).map(node => (
-            moderators={this.props.moderators}
+            <CommentNode
-            admins={this.props.admins}
+              key={node.comment_view.comment.id}
-            markable={this.props.markable}
+              node={node}
-            showContext={this.props.showContext}
+              noBorder={this.props.noBorder}
-            showCommunity={this.props.showCommunity}
+              noIndent={this.props.noIndent}
-            enableDownvotes={this.props.enableDownvotes}
+              viewOnly={this.props.viewOnly}
-            viewType={this.props.viewType}
+              locked={this.props.locked}
-            allLanguages={this.props.allLanguages}
+              moderators={this.props.moderators}
-            siteLanguages={this.props.siteLanguages}
+              admins={this.props.admins}
-            hideImages={this.props.hideImages}
+              markable={this.props.markable}
-            onCommentReplyRead={this.props.onCommentReplyRead}
+              showContext={this.props.showContext}
-            onPersonMentionRead={this.props.onPersonMentionRead}
+              showCommunity={this.props.showCommunity}
-            finished={this.props.finished}
+              enableDownvotes={this.props.enableDownvotes}
-            onCreateComment={this.props.onCreateComment}
+              viewType={this.props.viewType}
-            onEditComment={this.props.onEditComment}
+              allLanguages={this.props.allLanguages}
-            onCommentVote={this.props.onCommentVote}
+              siteLanguages={this.props.siteLanguages}
-            onBlockPerson={this.props.onBlockPerson}
+              hideImages={this.props.hideImages}
-            onSaveComment={this.props.onSaveComment}
+              onCommentReplyRead={this.props.onCommentReplyRead}
-            onDeleteComment={this.props.onDeleteComment}
+              onPersonMentionRead={this.props.onPersonMentionRead}
-            onRemoveComment={this.props.onRemoveComment}
+              finished={this.props.finished}
-            onDistinguishComment={this.props.onDistinguishComment}
+              onCreateComment={this.props.onCreateComment}
-            onAddModToCommunity={this.props.onAddModToCommunity}
+              onEditComment={this.props.onEditComment}
-            onAddAdmin={this.props.onAddAdmin}
+              onCommentVote={this.props.onCommentVote}
-            onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+              onBlockPerson={this.props.onBlockPerson}
-            onBanPerson={this.props.onBanPerson}
+              onSaveComment={this.props.onSaveComment}
-            onTransferCommunity={this.props.onTransferCommunity}
+              onDeleteComment={this.props.onDeleteComment}
-            onFetchChildren={this.props.onFetchChildren}
+              onRemoveComment={this.props.onRemoveComment}
-            onCommentReport={this.props.onCommentReport}
+              onDistinguishComment={this.props.onDistinguishComment}
-            onPurgePerson={this.props.onPurgePerson}
+              onAddModToCommunity={this.props.onAddModToCommunity}
-            onPurgeComment={this.props.onPurgeComment}
+              onAddAdmin={this.props.onAddAdmin}
-          />
+              onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
-        ))}
+              onBanPerson={this.props.onBanPerson}
-      </div>
+              onTransferCommunity={this.props.onTransferCommunity}
+              onFetchChildren={this.props.onFetchChildren}
+              onCommentReport={this.props.onCommentReport}
+              onPurgePerson={this.props.onPurgePerson}
+              onPurgeComment={this.props.onPurgeComment}
+            />
+          ))}
+        </ul>
+      )
     );
   }
 }

src/shared/utils.ts

@@ -1128,7 +1128,7 @@ export const colorList: string[] = [
 ];
 
 function hsl(num: number) {
-  return `hsla(${num}, 35%, 50%, 1)`;
+  return `hsla(${num}, 35%, 50%, 0.5)`;
 }
 
 export function hostname(url: string): string {