this.props.moderators
);
- const borderColor = this.props.node.depth
- ? colorList[(this.props.node.depth - 1) % colorList.length]
- : colorList[0];
const moreRepliesBorderColor = this.props.node.depth
? colorList[this.props.node.depth % 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">
</div>
{showMoreChildren && (
<div
- className={`details ml-1 comment-node py-2 ${
- !this.props.noBorder ? "border-top border-light" : ""
- }`}
+ className={classNames("details ml-1 comment-node py-2", {
+ "border-top border-light": !this.props.noBorder,
+ })}
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
>
<button
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>
);
}
linkBtn(small = false) {
const cv = this.commentView;
+
const classnames = classNames("btn btn-link btn-animate text-muted", {
"btn-sm": small,
});
+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;
+ const borderColor = this.props.depth
+ ? colorList[this.props.depth % colorList.length]
+ : colorList[0];
+
return (
- <div className="comments">
- {this.props.nodes.slice(0, maxComments).map(node => (
- <CommentNode
- key={node.comment_view.comment.id}
- node={node}
- noBorder={this.props.noBorder}
- noIndent={this.props.noIndent}
- viewOnly={this.props.viewOnly}
- locked={this.props.locked}
- moderators={this.props.moderators}
- admins={this.props.admins}
- markable={this.props.markable}
- showContext={this.props.showContext}
- showCommunity={this.props.showCommunity}
- enableDownvotes={this.props.enableDownvotes}
- viewType={this.props.viewType}
- allLanguages={this.props.allLanguages}
- siteLanguages={this.props.siteLanguages}
- hideImages={this.props.hideImages}
- onCommentReplyRead={this.props.onCommentReplyRead}
- onPersonMentionRead={this.props.onPersonMentionRead}
- finished={this.props.finished}
- onCreateComment={this.props.onCreateComment}
- onEditComment={this.props.onEditComment}
- onCommentVote={this.props.onCommentVote}
- onBlockPerson={this.props.onBlockPerson}
- onSaveComment={this.props.onSaveComment}
- onDeleteComment={this.props.onDeleteComment}
- onRemoveComment={this.props.onRemoveComment}
- onDistinguishComment={this.props.onDistinguishComment}
- onAddModToCommunity={this.props.onAddModToCommunity}
- onAddAdmin={this.props.onAddAdmin}
- onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
- onBanPerson={this.props.onBanPerson}
- onTransferCommunity={this.props.onTransferCommunity}
- onFetchChildren={this.props.onFetchChildren}
- onCommentReport={this.props.onCommentReport}
- onPurgePerson={this.props.onPurgePerson}
- onPurgeComment={this.props.onPurgeComment}
- />
- ))}
- </div>
+ 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}
+ node={node}
+ noBorder={this.props.noBorder}
+ noIndent={this.props.noIndent}
+ viewOnly={this.props.viewOnly}
+ locked={this.props.locked}
+ moderators={this.props.moderators}
+ admins={this.props.admins}
+ markable={this.props.markable}
+ showContext={this.props.showContext}
+ showCommunity={this.props.showCommunity}
+ enableDownvotes={this.props.enableDownvotes}
+ viewType={this.props.viewType}
+ allLanguages={this.props.allLanguages}
+ siteLanguages={this.props.siteLanguages}
+ hideImages={this.props.hideImages}
+ onCommentReplyRead={this.props.onCommentReplyRead}
+ onPersonMentionRead={this.props.onPersonMentionRead}
+ finished={this.props.finished}
+ onCreateComment={this.props.onCreateComment}
+ onEditComment={this.props.onEditComment}
+ onCommentVote={this.props.onCommentVote}
+ onBlockPerson={this.props.onBlockPerson}
+ onSaveComment={this.props.onSaveComment}
+ onDeleteComment={this.props.onDeleteComment}
+ onRemoveComment={this.props.onRemoveComment}
+ onDistinguishComment={this.props.onDistinguishComment}
+ onAddModToCommunity={this.props.onAddModToCommunity}
+ onAddAdmin={this.props.onAddAdmin}
+ onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+ onBanPerson={this.props.onBanPerson}
+ onTransferCommunity={this.props.onTransferCommunity}
+ onFetchChildren={this.props.onFetchChildren}
+ onCommentReport={this.props.onCommentReport}
+ onPurgePerson={this.props.onPurgePerson}
+ onPurgeComment={this.props.onPurgeComment}
+ />
+ ))}
+ </ul>
+ )
);
}
}