diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-24 08:26:49 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-24 08:26:49 -0700 |
commit | 93ea88856800c7f5c795e1796d55f6c3a18c9153 (patch) | |
tree | 933c948f1b1ec4e8402b2fe9ed196abab091962f /ui/src/components | |
parent | c9dce03b23576656f9583179c89de78bedfd088a (diff) |
Better vote arrows
Diffstat (limited to 'ui/src/components')
-rw-r--r-- | ui/src/components/comment-node.tsx | 8 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 10 | ||||
-rw-r--r-- | ui/src/components/symbols.tsx | 8 |
3 files changed, 21 insertions, 5 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index af44e41e..88d6476d 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -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"> diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 93e88071..73395fa8 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -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> diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index e038b13c..1085a4da 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -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> |