Some comment-node additions
- Hiding extra vote counts if no downvotes. - Showing numbers on actions if there are.
This commit is contained in:
Dessalines
parent
c0a293c268
commit
64cad8bc3e
4 changed files with 58 additions and 51 deletions
2
ui/assets/css/main.css
vendored
2
ui/assets/css/main.css
vendored
|
|
@ -117,7 +117,7 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 1px solid var(--secondary);
|
||||
border-left: 2px solid var(--secondary);
|
||||
margin: 0.5em 5px;
|
||||
padding: 0.1em 5px;
|
||||
}
|
||||
|
|
|
|||
88
ui/src/components/comment-node.tsx
vendored
88
ui/src/components/comment-node.tsx
vendored
|
|
@ -125,7 +125,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
}`}
|
||||
>
|
||||
{!node.comment.parent_id && !this.props.noIndent && (
|
||||
<>
|
||||
<hr class="d-sm-none my-2" />
|
||||
<div class="d-none d-sm-block d-sm-none my-3" />
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
id={`comment-${node.comment.id}`}
|
||||
|
|
@ -135,7 +138,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
style={
|
||||
!this.props.noIndent &&
|
||||
this.props.node.comment.parent_id &&
|
||||
`border-left: 1px ${this.state.borderColor} solid !important`
|
||||
`border-left: 2px ${this.state.borderColor} solid !important`
|
||||
}
|
||||
>
|
||||
<div
|
||||
|
|
@ -182,34 +185,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{i18n.t('banned')}
|
||||
</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 && (
|
||||
<li className="list-inline-item">
|
||||
<span> {i18n.t('to')} </span>
|
||||
|
|
@ -219,6 +194,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</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">
|
||||
<span>
|
||||
<MomentTime data={node.comment} />
|
||||
|
|
@ -230,11 +220,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
onClick={linkEvent(this, this.handleCommentCollapse)}
|
||||
>
|
||||
{this.state.collapsed ? (
|
||||
<svg class="icon">
|
||||
<svg class="icon icon-inline">
|
||||
<use xlinkHref="#icon-plus-square"></use>
|
||||
</svg>
|
||||
) : (
|
||||
<svg class="icon">
|
||||
<svg class="icon icon-inline">
|
||||
<use xlinkHref="#icon-minus-square"></use>
|
||||
</svg>
|
||||
)}
|
||||
|
|
@ -292,9 +282,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
onClick={linkEvent(node, this.handleCommentUpvote)}
|
||||
data-tippy-content={i18n.t('upvote')}
|
||||
>
|
||||
<svg class="icon">
|
||||
<svg class="icon icon-inline">
|
||||
<use xlinkHref="#icon-arrow-up"></use>
|
||||
</svg>
|
||||
{this.state.upvotes !== this.state.score && (
|
||||
<span class="ml-1">{this.state.upvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
{WebSocketService.Instance.site.enable_downvotes && (
|
||||
|
|
@ -311,9 +304,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
data-tippy-content={i18n.t('downvote')}
|
||||
>
|
||||
<svg class="icon">
|
||||
<svg class="icon icon-inline">
|
||||
<use xlinkHref="#icon-arrow-down"></use>
|
||||
</svg>
|
||||
{this.state.upvotes !== this.state.score && (
|
||||
<span class="ml-1">{this.state.downvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -328,19 +324,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</svg>
|
||||
</span>
|
||||
</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">
|
||||
<Link
|
||||
className="text-muted"
|
||||
|
|
@ -366,6 +349,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</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">
|
||||
<span
|
||||
class="pointer"
|
||||
|
|
|
|||
2
ui/src/components/post.tsx
vendored
2
ui/src/components/post.tsx
vendored
|
|
@ -211,7 +211,7 @@ export class Post extends Component<any, PostState> {
|
|||
|
||||
sortRadios() {
|
||||
return (
|
||||
<div class="btn-group btn-group-toggle mb-3">
|
||||
<div class="btn-group btn-group-toggle">
|
||||
<label
|
||||
className={`btn btn-sm btn-secondary pointer ${this.state
|
||||
.commentSort === CommentSortType.Hot && 'active'}`}
|
||||
|
|
|
|||
15
ui/src/utils.ts
vendored
15
ui/src/utils.ts
vendored
|
|
@ -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)`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue