From 858366c57b959c0b2bc6e2a43ca194084a1ff0d8 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 5 Mar 2020 15:10:46 -0500 Subject: [PATCH] Proper comment-node depth coloring. --- ui/src/components/comment-node.tsx | 6 ++++-- ui/src/components/post.tsx | 15 +++++++++++++-- ui/src/interfaces.ts | 1 + ui/src/utils.ts | 2 ++ 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 19c834237..db3c589d1 100644 --- 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 { 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 faee23ed0..e6b4a206d 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -311,16 +311,27 @@ export class Post extends Component { } let tree: Array = []; 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 5baadb170..eb58ca116 100644 --- 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 bdd629c77..058be6ae3 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -768,6 +768,8 @@ export function postSort( } } +export const colorList: Array = [...Array(10)].map(() => randomHsl()); + export function randomHsl() { return `hsla(${Math.random() * 360}, 100%, 50%, 1)`; }