Some comment-node additions

- Hiding extra vote counts if no downvotes.
- Showing numbers on actions if there are.
This commit is contained in:
Dessalines 2020-03-06 09:55:32 -05:00
parent 15e91e4b4c
commit 08af66ba28
4 changed files with 58 additions and 51 deletions

View file

@ -117,7 +117,7 @@
} }
blockquote { blockquote {
border-left: 1px solid var(--secondary); border-left: 2px solid var(--secondary);
margin: 0.5em 5px; margin: 0.5em 5px;
padding: 0.1em 5px; padding: 0.1em 5px;
} }

View file

@ -125,7 +125,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}`} }`}
> >
{!node.comment.parent_id && !this.props.noIndent && ( {!node.comment.parent_id && !this.props.noIndent && (
<hr class="d-sm-none my-2" /> <>
<hr class="d-sm-none my-2" />
<div class="d-none d-sm-block d-sm-none my-3" />
</>
)} )}
<div <div
id={`comment-${node.comment.id}`} id={`comment-${node.comment.id}`}
@ -135,7 +138,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
style={ style={
!this.props.noIndent && !this.props.noIndent &&
this.props.node.comment.parent_id && this.props.node.comment.parent_id &&
`border-left: 1px ${this.state.borderColor} solid !important` `border-left: 2px ${this.state.borderColor} solid !important`
} }
> >
<div <div
@ -182,34 +185,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{i18n.t('banned')} {i18n.t('banned')}
</li> </li>
)} )}
<li className="list-inline-item"></li>
<span
class="unselectable pointer mr-2"
data-tippy-content={i18n.t('number_of_points', {
count: this.state.score,
})}
>
<li className="list-inline-item">
<span className={this.scoreColor}>
<svg className="small icon icon-inline mr-1">
<use xlinkHref="#icon-zap"></use>
</svg>
{this.state.score}
</span>
</li>
<li className="list-inline-item">
<svg class="small icon icon-inline mr-1">
<use xlinkHref="#icon-arrow-up"></use>
</svg>
{this.state.upvotes}
</li>
<li className="list-inline-item">
<svg class="small icon icon-inline mr-1">
<use xlinkHref="#icon-arrow-down"></use>
</svg>
{this.state.downvotes}
</li>
</span>
{this.props.showCommunity && ( {this.props.showCommunity && (
<li className="list-inline-item"> <li className="list-inline-item">
<span> {i18n.t('to')} </span> <span> {i18n.t('to')} </span>
@ -219,6 +194,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</li> </li>
)} )}
<li className="list-inline-item"></li> <li className="list-inline-item"></li>
<li className="list-inline-item">
<span
className={`unselectable pointer ${this.scoreColor}`}
onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={i18n.t('number_of_points', {
count: this.state.score,
})}
>
<svg class="icon icon-inline mr-1">
<use xlinkHref="#icon-zap"></use>
</svg>
{this.state.score}
</span>
</li>
<li className="list-inline-item"></li>
<li className="list-inline-item"> <li className="list-inline-item">
<span> <span>
<MomentTime data={node.comment} /> <MomentTime data={node.comment} />
@ -230,11 +220,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
onClick={linkEvent(this, this.handleCommentCollapse)} onClick={linkEvent(this, this.handleCommentCollapse)}
> >
{this.state.collapsed ? ( {this.state.collapsed ? (
<svg class="icon"> <svg class="icon icon-inline">
<use xlinkHref="#icon-plus-square"></use> <use xlinkHref="#icon-plus-square"></use>
</svg> </svg>
) : ( ) : (
<svg class="icon"> <svg class="icon icon-inline">
<use xlinkHref="#icon-minus-square"></use> <use xlinkHref="#icon-minus-square"></use>
</svg> </svg>
)} )}
@ -292,9 +282,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
onClick={linkEvent(node, this.handleCommentUpvote)} onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={i18n.t('upvote')} data-tippy-content={i18n.t('upvote')}
> >
<svg class="icon"> <svg class="icon icon-inline">
<use xlinkHref="#icon-arrow-up"></use> <use xlinkHref="#icon-arrow-up"></use>
</svg> </svg>
{this.state.upvotes !== this.state.score && (
<span class="ml-1">{this.state.upvotes}</span>
)}
</button> </button>
</li> </li>
{WebSocketService.Instance.site.enable_downvotes && ( {WebSocketService.Instance.site.enable_downvotes && (
@ -311,9 +304,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
data-tippy-content={i18n.t('downvote')} data-tippy-content={i18n.t('downvote')}
> >
<svg class="icon"> <svg class="icon icon-inline">
<use xlinkHref="#icon-arrow-down"></use> <use xlinkHref="#icon-arrow-down"></use>
</svg> </svg>
{this.state.upvotes !== this.state.score && (
<span class="ml-1">{this.state.downvotes}</span>
)}
</button> </button>
</li> </li>
)} )}
@ -328,19 +324,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</svg> </svg>
</span> </span>
</li> </li>
{!this.myComment && (
<li className="list-inline-item-action">
<Link
class="text-muted"
to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
title={i18n.t('message').toLowerCase()}
>
<svg class="icon">
<use xlinkHref="#icon-mail"></use>
</svg>
</Link>
</li>
)}
<li className="list-inline-item-action"> <li className="list-inline-item-action">
<Link <Link
className="text-muted" className="text-muted"
@ -366,6 +349,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</li> </li>
) : ( ) : (
<> <>
{!this.myComment && (
<li className="list-inline-item-action">
<Link
class="text-muted"
to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
title={i18n.t('message').toLowerCase()}
>
<svg class="icon">
<use xlinkHref="#icon-mail"></use>
</svg>
</Link>
</li>
)}
<li className="list-inline-item-action"> <li className="list-inline-item-action">
<span <span
class="pointer" class="pointer"

View file

@ -211,7 +211,7 @@ export class Post extends Component<any, PostState> {
sortRadios() { sortRadios() {
return ( return (
<div class="btn-group btn-group-toggle mb-3"> <div class="btn-group btn-group-toggle">
<label <label
className={`btn btn-sm btn-secondary pointer ${this.state className={`btn btn-sm btn-secondary pointer ${this.state
.commentSort === CommentSortType.Hot && 'active'}`} .commentSort === CommentSortType.Hot && 'active'}`}

15
ui/src/utils.ts vendored
View file

@ -768,8 +768,19 @@ export function postSort(
} }
} }
export const colorList: Array<string> = [...Array(10)].map(() => randomHsl()); export const colorList: Array<string> = [
hsl(0),
hsl(100),
hsl(150),
hsl(200),
hsl(250),
hsl(300),
];
export function randomHsl() { function hsl(num: number) {
return `hsla(${num}, 35%, 50%, 1)`;
}
function randomHsl() {
return `hsla(${Math.random() * 360}, 100%, 50%, 1)`; return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
} }