fedi/lemmy
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-11-14 03:24:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better vote arrows

Browse source
This commit is contained in:
Dessalines 2019-04-24 08:26:49 -07:00
parent f670ed3f29
commit e71637bc92
3 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/src/components/comment-node.tsx
View file

@ -57,9 +57,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
return (
<div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}>
<div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
<div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>▲</div>
<div className={`pointer ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>
<svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
</div>
<div>{node.comment.score}</div>
<div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>▼</div>
<div className={`pointer ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>
<svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
</div>
</div>
<div id={`comment-${node.comment.id}`} className="details ml-4">
<ul class="list-inline mb-0 text-muted small">

10
ui/src/components/post-listing.tsx
View file

@ -58,11 +58,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return (
<div class="listing">
<div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
<div className={`pointer upvote ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>▲</div>
<div className={`pointer ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>
<svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
</div>
<div>{post.score}</div>
<div className={`pointer downvote ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>▼</div>
<div className={`pointer ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>
<svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
</div>
</div>
<div className="pt-1 ml-4">
<div className="ml-4">
{post.url
? <div className="mb-0">
<h5 className="d-inline"><a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a>

8
ui/src/components/symbols.tsx
View file

@ -10,6 +10,14 @@ export class Symbols extends Component<any, any> {
return (
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-arrow-down" viewBox="0 0 26 28">
<title>arrow-down</title>
<path d="M25.172 13c0 0.531-0.219 1.047-0.578 1.406l-10.172 10.187c-0.375 0.359-0.891 0.578-1.422 0.578s-1.047-0.219-1.406-0.578l-10.172-10.187c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l1.156-1.172c0.375-0.359 0.891-0.578 1.422-0.578s1.047 0.219 1.406 0.578l4.594 4.594v-11c0-1.094 0.906-2 2-2h2c1.094 0 2 0.906 2 2v11l4.594-4.594c0.359-0.359 0.875-0.578 1.406-0.578s1.047 0.219 1.422 0.578l1.172 1.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</symbol>
<symbol id="icon-arrow-up" viewBox="0 0 26 28">
<title>arrow-up</title>
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</symbol>
<symbol id="icon-mail" viewBox="0 0 32 32">
<title>mail</title>
<path d="M28 5h-24c-2.209 0-4 1.792-4 4v13c0 2.209 1.791 4 4 4h24c2.209 0 4-1.791 4-4v-13c0-2.208-1.791-4-4-4zM2 10.25l6.999 5.25-6.999 5.25v-10.5zM30 22c0 1.104-0.898 2-2 2h-24c-1.103 0-2-0.896-2-2l7.832-5.875 4.368 3.277c0.533 0.398 1.166 0.6 1.8 0.6 0.633 0 1.266-0.201 1.799-0.6l4.369-3.277 7.832 5.875zM30 20.75l-7-5.25 7-5.25v10.5zM17.199 18.602c-0.349 0.262-0.763 0.4-1.199 0.4s-0.851-0.139-1.2-0.4l-12.8-9.602c0-1.103 0.897-2 2-2h24c1.102 0 2 0.897 2 2l-12.801 9.602z"></path>