LemmyNet/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-12-25 12:21:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Proper comment-node depth coloring.

Browse source
This commit is contained in:
Dessalines 2020-03-05 15:10:46 -05:00
parent a5c58eb090
commit d903ecb6d3
4 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/src/components/comment-node.tsx vendored
View file

@ -27,7 +27,7 @@ import {
pictshareAvatarThumbnail, pictshareAvatarThumbnail,
showAvatars, showAvatars,
setupTippy, setupTippy,
randomHsl, colorList,
} from '../utils'; } from '../utils';
import moment from 'moment'; import moment from 'moment';
import { MomentTime } from './moment-time'; import { MomentTime } from './moment-time';
@ -94,7 +94,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
score: this.props.node.comment.score, score: this.props.node.comment.score,
upvotes: this.props.node.comment.upvotes, upvotes: this.props.node.comment.upvotes,
downvotes: this.props.node.comment.downvotes, 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) { constructor(props: any, context: any) {

15
ui/src/components/post.tsx vendored
View file

@ -311,16 +311,27 @@ export class Post extends Component<any, PostState> {
} }
let tree: Array<CommentNodeI> = []; let tree: Array<CommentNodeI> = [];
for (let comment of this.state.comments) { for (let comment of this.state.comments) {
let child = map.get(comment.id);
if (comment.parent_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 { } else {
tree.push(map.get(comment.id)); tree.push(child);
} }
this.setDepth(child);
} }
return tree; 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() { commentsTree() {
let nodes = this.buildCommentsTree(); let nodes = this.buildCommentsTree();
return ( return (

1
ui/src/interfaces.ts vendored
View file

@ -208,6 +208,7 @@ export interface Comment {
saved?: boolean; saved?: boolean;
user_mention_id?: number; // For mention type user_mention_id?: number; // For mention type
recipient_id?: number; recipient_id?: number;
depth?: number;
} }
export interface Category { export interface Category {

2
ui/src/utils.ts vendored
View file

@ -768,6 +768,8 @@ export function postSort(
} }
} }
export const colorList: Array<string> = [...Array(10)].map(() => randomHsl());
export function randomHsl() { export function randomHsl() {
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`; return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
} }