Proper comment-node depth coloring.

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 19c8342377013d640e5e8049e8ef3cddda1a4877..db3c589d18839486a687976b0dd7d7153be60bb6 100644 (file)
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -27,7 +27,7 @@ import {
   pictshareAvatarThumbnail,
   showAvatars,
   setupTippy,
-  randomHsl,
+  colorList,
 } from '../utils';
 import moment from 'moment';
 import { MomentTime } from './moment-time';
@@ -94,7 +94,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     score: this.props.node.comment.score,
     upvotes: this.props.node.comment.upvotes,
     downvotes: this.props.node.comment.downvotes,
-    borderColor: randomHsl(),
+    borderColor: this.props.node.comment.depth
+      ? colorList[this.props.node.comment.depth % colorList.length]
+      : colorList[0],
   };
 
   constructor(props: any, context: any) {

diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index faee23ed09c0d0f4e0705e1ade4db30266b4be4c..e6b4a206d483b697fe2a7c6ba4f662f65bc79aab 100644 (file)
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -311,16 +311,27 @@ export class Post extends Component<any, PostState> {
     }
     let tree: Array<CommentNodeI> = [];
     for (let comment of this.state.comments) {
+      let child = map.get(comment.id);
       if (comment.parent_id) {
-        map.get(comment.parent_id).children.push(map.get(comment.id));
+        let parent_ = map.get(comment.parent_id);
+        parent_.children.push(child);
       } else {
-        tree.push(map.get(comment.id));
+        tree.push(child);
       }
+
+      this.setDepth(child);
     }
 
     return tree;
   }
 
+  setDepth(node: CommentNodeI, i: number = 0): void {
+    for (let child of node.children) {
+      child.comment.depth = i;
+      this.setDepth(child, i + 1);
+    }
+  }
+
   commentsTree() {
     let nodes = this.buildCommentsTree();
     return (

diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index 5baadb170d1231ca5bf15bd3a17dd90d262e2450..eb58ca11613739e4707d8d12e1ccd20d873839a5 100644 (file)
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -208,6 +208,7 @@ export interface Comment {
   saved?: boolean;
   user_mention_id?: number; // For mention type
   recipient_id?: number;
+  depth?: number;
 }
 
 export interface Category {

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index bdd629c77d83569374c04fdbe86e465d1fcd9efb..058be6ae3902502ca43a4aceb337ead64f0a7032 100644 (file)
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -768,6 +768,8 @@ export function postSort(
   }
 }
 
+export const colorList: Array<string> = [...Array(10)].map(() => randomHsl());
+
 export function randomHsl() {
   return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
 }