From: SleeplessOne1917 <abias1122@gmail.com> Date: Mon, 10 Jul 2023 23:16:03 +0000 (+0000) Subject: Comment border tweak (#1820) X-Git-Url: http://these/git/%22%7Burl%7D/%7BdonateLemmyUrl%7D?a=commitdiff_plain;h=2911cd8cdb348629a97d60239723b1925210df0a;p=lemmy-ui.git Comment border tweak (#1820) * Tweak border depth * Tweak top level margins --- diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 6c7d5c0..7b7f29e 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -114,7 +114,7 @@ interface CommentNodeProps { moderators?: CommunityModeratorView[]; admins?: PersonView[]; noBorder?: boolean; - noIndent?: boolean; + isTopLevel?: boolean; viewOnly?: boolean; locked?: boolean; markable?: boolean; @@ -292,11 +292,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { mark: this.isCommentNew || this.commentView.comment.distinguished, })} > - <div - className={classNames({ - "ms-2": !this.props.noIndent, - })} - > + <div className="ms-2"> <div className="d-flex flex-wrap align-items-center text-muted small"> <button className="btn btn-sm btn-link text-muted me-2" @@ -1136,7 +1132,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { allLanguages={this.props.allLanguages} siteLanguages={this.props.siteLanguages} hideImages={this.props.hideImages} - isChild={!this.props.noIndent} + isChild={!this.props.isTopLevel} depth={this.props.node.depth + 1} finished={this.props.finished} onCommentReplyRead={this.props.onCommentReplyRead} diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index 495b6bb..2e60309 100644 --- a/src/shared/components/comment/comment-nodes.tsx +++ b/src/shared/components/comment/comment-nodes.tsx @@ -35,7 +35,7 @@ interface CommentNodesProps { admins?: PersonView[]; maxCommentsShown?: number; noBorder?: boolean; - noIndent?: boolean; + isTopLevel?: boolean; viewOnly?: boolean; locked?: boolean; markable?: boolean; @@ -86,7 +86,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> { this.props.nodes.length > 0 && ( <ul className={classNames("comments", { - "ms-1": !!this.props.isChild, + "ms-1": this.props.depth && this.props.depth > 1, "border-top border-light": !this.props.noBorder, })} style={ @@ -100,7 +100,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> { key={node.comment_view.comment.id} node={node} noBorder={this.props.noBorder} - noIndent={this.props.noIndent} + isTopLevel={this.props.isTopLevel} viewOnly={this.props.viewOnly} locked={this.props.locked} moderators={this.props.moderators} diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index b88d6f6..f89eb83 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -448,7 +448,7 @@ export class Community extends Component< nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)} viewType={CommentViewType.Flat} finished={this.state.finished} - noIndent + isTopLevel showContext enableDownvotes={enableDownvotes(site_res)} moderators={communityRes.moderators} diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 741dfa5..5d949f3 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -718,7 +718,7 @@ export class Home extends Component<any, HomeState> { nodes={commentsToFlatNodes(comments)} viewType={CommentViewType.Flat} finished={this.state.finished} - noIndent + isTopLevel showCommunity showContext enableDownvotes={enableDownvotes(siteRes)} diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx index b2b74b6..6af64f5 100644 --- a/src/shared/components/person/person-details.tsx +++ b/src/shared/components/person/person-details.tsx @@ -252,7 +252,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> { viewType={CommentViewType.Flat} admins={this.props.admins} finished={this.props.finished} - noIndent + isTopLevel showCommunity showContext enableDownvotes={this.props.enableDownvotes} diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index eeb713a..003ad71 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -542,7 +542,7 @@ export class Post extends Component<any, PostState> { nodes={commentsToFlatNodes(commentsRes.data.comments)} viewType={this.state.commentViewType} maxCommentsShown={this.state.maxCommentsShown} - noIndent + isTopLevel locked={postRes.data.post_view.post.locked} moderators={postRes.data.moderators} admins={this.state.siteRes.admins} diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 99b1803..36bfca8 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -721,7 +721,7 @@ export class Search extends Component<any, SearchState> { viewType={CommentViewType.Flat} viewOnly locked - noIndent + isTopLevel enableDownvotes={enableDownvotes(this.state.siteRes)} allLanguages={this.state.siteRes.all_languages} siteLanguages={this.state.siteRes.discussion_languages} @@ -782,7 +782,7 @@ export class Search extends Component<any, SearchState> { viewType={CommentViewType.Flat} viewOnly locked - noIndent + isTopLevel enableDownvotes={enableDownvotes(siteRes)} allLanguages={siteRes.all_languages} siteLanguages={siteRes.discussion_languages}