mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add verification check to comment block

Browse Source 
closes #60
This commit is contained in:
igoradamenko
2018-06-11 15:17:11 +03:00
parent 1ac77dbf37
commit 4cf40b2f65
8 changed files with 99 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/components/comment/__verification/_active/comment__verification_active.scss
+3
View File
@@ -0,0 +1,3 @@
.comment__verification_active {
background-image: url('comment__verification_active.svg');
}
web/app/components/comment/__verification/_active/comment__verification_active.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g fill="none" fill-rule="evenodd">
<path fill="#4fbbd6" d="M5.823 14.822l-1.28.206a.824.824 0 0 1-.9-.52l-.463-1.212a.824.824 0 0 0-.476-.476l-1.212-.462a.824.824 0 0 1-.52-.9l.206-1.281a.824.824 0 0 0-.175-.65L.185 8.52a.824.824 0 0 1 0-1.04l.818-1.006a.824.824 0 0 0 .175-.65L.972 4.542a.824.824 0 0 1 .52-.9l1.212-.463a.824.824 0 0 0 .476-.476l.462-1.212a.824.824 0 0 1 .9-.52l1.281.206a.824.824 0 0 0 .65-.175L7.48.185a.824.824 0 0 1 1.04 0l1.006.818a.824.824 0 0 0 .65.175l1.281-.206a.824.824 0 0 1 .9.52l.463 1.212c.084.22.257.392.476.476l1.212.462c.365.14.582.515.52.9l-.206 1.281a.824.824 0 0 0 .175.65l.818 1.007a.824.824 0 0 1 0 1.04l-.818 1.006a.824.824 0 0 0-.175.65l.206 1.281a.824.824 0 0 1-.52.9l-1.212.463a.824.824 0 0 0-.476.476l-.462 1.212a.824.824 0 0 1-.9.52l-1.281-.206a.824.824 0 0 0-.65.175l-1.007.818a.824.824 0 0 1-1.04 0l-1.006-.818a.824.824 0 0 0-.65-.175z"/>
<path stroke="#FFF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M4.755 8.252L7 10.5l4.495-4.495"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

web/app/components/comment/__verification/_clickable/comment__verification_clickable.scss
+3
View File
@@ -0,0 +1,3 @@
.comment__verification_clickable {
cursor: pointer;
}
web/app/components/comment/__verification/comment__verification.scss
+13
View File
@@ -0,0 +1,13 @@
.comment__verification {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
vertical-align: middle;
background: url('comment__verification.svg') center no-repeat;
background-size: cover;
&:hover {
opacity: .75;
}
}
web/app/components/comment/__verification/comment__verification.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g fill="none" fill-rule="evenodd">
<path fill="#BBB" d="M5.823 14.822l-1.28.206a.824.824 0 0 1-.9-.52l-.463-1.212a.824.824 0 0 0-.476-.476l-1.212-.462a.824.824 0 0 1-.52-.9l.206-1.281a.824.824 0 0 0-.175-.65L.185 8.52a.824.824 0 0 1 0-1.04l.818-1.006a.824.824 0 0 0 .175-.65L.972 4.542a.824.824 0 0 1 .52-.9l1.212-.463a.824.824 0 0 0 .476-.476l.462-1.212a.824.824 0 0 1 .9-.52l1.281.206a.824.824 0 0 0 .65-.175L7.48.185a.824.824 0 0 1 1.04 0l1.006.818a.824.824 0 0 0 .65.175l1.281-.206a.824.824 0 0 1 .9.52l.463 1.212c.084.22.257.392.476.476l1.212.462c.365.14.582.515.52.9l-.206 1.281a.824.824 0 0 0 .175.65l.818 1.007a.824.824 0 0 1 0 1.04l-.818 1.006a.824.824 0 0 0-.175.65l.206 1.281a.824.824 0 0 1-.52.9l-1.212.463a.824.824 0 0 0-.476.476l-.462 1.212a.824.824 0 0 1-.9.52l-1.281-.206a.824.824 0 0 0-.65.175l-1.007.818a.824.824 0 0 1-1.04 0l-1.006-.818a.824.824 0 0 0-.65-.175z"/>
<path stroke="#FFF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M4.755 8.252L7 10.5l4.495-4.495"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

web/app/components/comment/comment.jsx
+62 -1
View File
@@ -15,6 +15,7 @@ export default class Comment extends Component {
isReplying: false,
isEditing: false,
isUserIdVisible: false,
isUserVerified: false,
editTimeLeft: null,
};
@@ -33,6 +34,8 @@ export default class Comment extends Component {
this.onReply = this.onReply.bind(this);
this.onPinClick = this.onPinClick.bind(this);
this.onUnpinClick = this.onUnpinClick.bind(this);
this.onVerifyClick = this.onVerifyClick.bind(this);
this.onUnverifyClick = this.onUnverifyClick.bind(this);
this.onBlockClick = this.onBlockClick.bind(this);
this.onUnblockClick = this.onUnblockClick.bind(this);
this.onDeleteClick = this.onDeleteClick.bind(this);
@@ -151,6 +154,30 @@ export default class Comment extends Component {
}
}
onVerifyClick() {
const { id, user: { id: userId } } = this.props.data;
if (confirm('Do you want to verify this user?')) {
this.setState({ isUserVerified: true });
api.verify({ id: userId }).then(() => {
api.getComment({ id }).then(comment => store.replaceComment(comment));
});
}
}
onUnverifyClick() {
const { id, user: { id: userId } } = this.props.data;
if (confirm('Do you want to unverify this user?')) {
this.setState({ isUserVerified: false });
api.unverify({ id: userId }).then(() => {
api.getComment({ id }).then(comment => store.replaceComment(comment));
});
}
}
onBlockClick() {
const { id, user: { id: userId } } = this.props.data;
@@ -272,7 +299,20 @@ export default class Comment extends Component {
}
}
render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isReplying, isEditing, editTimeLeft }) {
render(props, {
guest,
isUserIdVisible,
userBlocked,
pinned,
score,
scoreIncreased,
scoreDecreased,
deleted,
isReplying,
isEditing,
isUserVerified,
editTimeLeft,
}) {
const { data, mods = {} } = props;
const isAdmin = !guest && store.get('user').admin;
const isGuest = guest || !Object.keys(store.get('user')).length;
@@ -314,6 +354,7 @@ export default class Comment extends Component {
...data.user,
picture: data.user.picture.indexOf(API_BASE) === 0 ? `${BASE_URL}${data.user.picture}` : data.user.picture,
isDefaultPicture: !data.user.picture.length,
verified: data.user.verified || isUserVerified,
},
};
@@ -364,6 +405,26 @@ export default class Comment extends Component {
isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
}
{
isAdmin && (
<span
onClick={o.user.verified ? this.onUnverifyClick : this.onVerifyClick}
aria-label="Toggle verification"
title={o.user.verified ? 'Verified user' : 'Unverified user'}
className={b('comment__verification', {}, { active: o.user.verified, clickable: true })}
/>
)
}
{
!isAdmin && !!o.user.verified && (
<span
title="Verified user"
className={b('comment__verification', {}, { active: true })}
/>
)
}
<a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">{o.time}</a>
{
web/app/components/comment/index.js
+4
View File
@@ -28,6 +28,10 @@ require('./__time/comment__time.scss');
require('./__user-id/comment__user-id.scss');
require('./__username/comment__username.scss');
require('./__verification/comment__verification.scss');
require('./__verification/_active/comment__verification_active.scss');
require('./__verification/_clickable/comment__verification_clickable.scss');
require('./__vote/comment__vote.scss');
require('./__vote/_disabled/comment__vote_disabled.scss');
require('./__vote/_selected/comment__vote_selected.scss');
web/app/components/root/root.jsx
+2
View File
@@ -1,3 +1,5 @@
import 'mimic';
import { h, Component } from 'preact';
import api from 'common/api';