nutomic/lemmy
Archived
2
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

Some comment-node additions

Browse source 
- 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 c0a293c268
commit 64cad8bc3e
4 changed files with 58 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/assets/css/main.css vendored
View file

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

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

@ -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
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)`;
}