this.props.moderators
);
+
const borderColor = this.props.node.depth
? colorList[(this.props.node.depth - 1) % colorList.length]
: colorList[0];
node.comment_view.counts.child_count > 0;
return (
- <div
- className={`comment ${
- this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
- }`}
- >
+ <li className="comment" role="comment">
<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">
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}
/>
)}
{/* A collapsed clearfix */}
- {this.state.collapsed && <div className="row col-12"></div>}
- </div>
+ {this.state.collapsed && <div className="row col-12" />}
+ </li>
);
}
+import classNames from "classnames";
import { Component } from "inferno";
import {
AddAdmin,
TransferCommunity,
} from "lemmy-js-client";
import { CommentNodeI, CommentViewType } from "../../interfaces";
+import { colorList } from "../../utils";
import { CommentNode } from "./comment-node";
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;
render() {
const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
- return (
- <div className="comments">
+ const borderColor = this.props.depth
+ ? colorList[this.props.depth % colorList.length]
+ : colorList[0];
+
+ return this.props.nodes.length > 0 ? (
+ <ul
+ className={classNames("comments", {
+ "ms-1": !!this.props.isChild,
+ "border-top border-light": !this.props.noBorder,
+ })}
+ style={`border-left: 2px solid ${borderColor} !important;`}
+ >
{this.props.nodes.slice(0, maxComments).map(node => (
<CommentNode
key={node.comment_view.comment.id}
onPurgeComment={this.props.onPurgeComment}
/>
))}
- </div>
- );
+ </ul>
+ ) : null;
}
}