mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-09-10 00:18:49 -06:00
Adding left border color, removing indent.
This commit is contained in:
parent
c999579c05
commit
eeef752a5c
29
ui/src/components/comment-node.tsx
vendored
29
ui/src/components/comment-node.tsx
vendored
@ -27,6 +27,7 @@ import {
|
|||||||
pictshareAvatarThumbnail,
|
pictshareAvatarThumbnail,
|
||||||
showAvatars,
|
showAvatars,
|
||||||
setupTippy,
|
setupTippy,
|
||||||
|
randomHsl,
|
||||||
} from '../utils';
|
} from '../utils';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { MomentTime } from './moment-time';
|
import { MomentTime } from './moment-time';
|
||||||
@ -54,6 +55,7 @@ interface CommentNodeState {
|
|||||||
score: number;
|
score: number;
|
||||||
upvotes: number;
|
upvotes: number;
|
||||||
downvotes: number;
|
downvotes: number;
|
||||||
|
borderColor: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CommentNodeProps {
|
interface CommentNodeProps {
|
||||||
@ -92,6 +94,7 @@ 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(),
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
@ -116,7 +119,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`comment ${
|
className={`comment ${
|
||||||
node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''
|
node.comment.parent_id && !this.props.noIndent ? 'ml-2' : ''
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -124,7 +127,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
className={`details comment-node mb-1 ${
|
className={`details comment-node mb-1 ${
|
||||||
this.isCommentNew ? 'mark' : ''
|
this.isCommentNew ? 'mark' : ''
|
||||||
}`}
|
}`}
|
||||||
|
style={
|
||||||
|
!this.props.noIndent &&
|
||||||
|
`border-left: 1px solid; border-color: ${this.state.borderColor} !important`
|
||||||
|
}
|
||||||
>
|
>
|
||||||
|
<div class={`${!this.props.noIndent && 'ml-2'}`}>
|
||||||
<ul class="list-inline mb-1 text-muted small">
|
<ul class="list-inline mb-1 text-muted small">
|
||||||
<li className="list-inline-item">
|
<li className="list-inline-item">
|
||||||
<Link
|
<Link
|
||||||
@ -135,7 +143,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
<img
|
<img
|
||||||
height="32"
|
height="32"
|
||||||
width="32"
|
width="32"
|
||||||
src={pictshareAvatarThumbnail(node.comment.creator_avatar)}
|
src={pictshareAvatarThumbnail(
|
||||||
|
node.comment.creator_avatar
|
||||||
|
)}
|
||||||
class="rounded-circle mr-1"
|
class="rounded-circle mr-1"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -236,7 +246,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
) : (
|
) : (
|
||||||
<div
|
<div
|
||||||
className="md-div"
|
className="md-div"
|
||||||
dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)}
|
dangerouslySetInnerHTML={mdToHtml(
|
||||||
|
this.commentUnlessRemoved
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<ul class="list-inline mb-0 text-muted font-weight-bold h5">
|
<ul class="list-inline mb-0 text-muted font-weight-bold h5">
|
||||||
@ -283,7 +295,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
? 'text-danger'
|
? 'text-danger'
|
||||||
: 'text-muted'
|
: 'text-muted'
|
||||||
}`}
|
}`}
|
||||||
onClick={linkEvent(node, this.handleCommentDownvote)}
|
onClick={linkEvent(
|
||||||
|
node,
|
||||||
|
this.handleCommentDownvote
|
||||||
|
)}
|
||||||
data-tippy-content={i18n.t('downvote')}
|
data-tippy-content={i18n.t('downvote')}
|
||||||
>
|
>
|
||||||
<svg class="icon">
|
<svg class="icon">
|
||||||
@ -382,7 +397,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
<li className="list-inline-item-action">
|
<li className="list-inline-item-action">
|
||||||
<span
|
<span
|
||||||
class="pointer"
|
class="pointer"
|
||||||
onClick={linkEvent(this, this.handleEditClick)}
|
onClick={linkEvent(
|
||||||
|
this,
|
||||||
|
this.handleEditClick
|
||||||
|
)}
|
||||||
data-tippy-content={i18n.t('edit')}
|
data-tippy-content={i18n.t('edit')}
|
||||||
>
|
>
|
||||||
<svg class="icon icon-inline">
|
<svg class="icon icon-inline">
|
||||||
@ -673,6 +691,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{this.state.showRemoveDialog && (
|
{this.state.showRemoveDialog && (
|
||||||
<form
|
<form
|
||||||
class="form-inline"
|
class="form-inline"
|
||||||
|
4
ui/src/utils.ts
vendored
4
ui/src/utils.ts
vendored
@ -767,3 +767,7 @@ export function postSort(
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function randomHsl() {
|
||||||
|
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user