gf4/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-08-10 01:08:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

Adding left border color, removing indent.

Browse Source
This commit is contained in:
Dessalines 2020-03-04 23:36:42 -05:00
parent c999579c05
commit eeef752a5c
2 changed files with 454 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/components/comment-node.tsx vendored
View File

@ -27,6 +27,7 @@ import {
pictshareAvatarThumbnail,
showAvatars,
setupTippy,
randomHsl,
} from '../utils';
import moment from 'moment';
import { MomentTime } from './moment-time';
@ -54,6 +55,7 @@ interface CommentNodeState {
score: number;
upvotes: number;
downvotes: number;
borderColor: string;
}
interface CommentNodeProps {
@ -92,6 +94,7 @@ 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(),
};
constructor(props: any, context: any) {
@ -116,7 +119,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
return (
<div
className={`comment ${
node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''
node.comment.parent_id && !this.props.noIndent ? 'ml-2' : ''
}`}
>
<div
@ -124,7 +127,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
className={`details comment-node mb-1 ${
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">
<li className="list-inline-item">
<Link
@ -135,7 +143,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<img
height="32"
width="32"
src={pictshareAvatarThumbnail(node.comment.creator_avatar)}
src={pictshareAvatarThumbnail(
node.comment.creator_avatar
)}
class="rounded-circle mr-1"
/>
)}
@ -236,7 +246,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
) : (
<div
className="md-div"
dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)}
dangerouslySetInnerHTML={mdToHtml(
this.commentUnlessRemoved
)}
/>
)}
<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-muted'
}`}
onClick={linkEvent(node, this.handleCommentDownvote)}
onClick={linkEvent(
node,
this.handleCommentDownvote
)}
data-tippy-content={i18n.t('downvote')}
>
<svg class="icon">
@ -382,7 +397,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<li className="list-inline-item-action">
<span
class="pointer"
onClick={linkEvent(this, this.handleEditClick)}
onClick={linkEvent(
this,
this.handleEditClick
)}
data-tippy-content={i18n.t('edit')}
>
<svg class="icon icon-inline">
@ -673,6 +691,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</div>
)}
</div>
</div>
{this.state.showRemoveDialog && (
<form
class="form-inline"

4
ui/src/utils.ts vendored
View File

@ -767,3 +767,7 @@ export function postSort(
);
}
}
export function randomHsl() {
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
}