LemmyNet/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-11-26 22:31:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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, 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
View file

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