mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-11-27 11:51:08 +00:00
Proper comment-node depth coloring.
This commit is contained in:
parent
25fa97a20a
commit
858366c57b
4 changed files with 20 additions and 4 deletions
6
ui/src/components/comment-node.tsx
vendored
6
ui/src/components/comment-node.tsx
vendored
|
@ -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) {
|
||||
|
|
15
ui/src/components/post.tsx
vendored
15
ui/src/components/post.tsx
vendored
|
@ -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 (
|
||||
|
|
1
ui/src/interfaces.ts
vendored
1
ui/src/interfaces.ts
vendored
|
@ -208,6 +208,7 @@ export interface Comment {
|
|||
saved?: boolean;
|
||||
user_mention_id?: number; // For mention type
|
||||
recipient_id?: number;
|
||||
depth?: number;
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
|
|
2
ui/src/utils.ts
vendored
2
ui/src/utils.ts
vendored
|
@ -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)`;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue