diff --git a/web/app/components/comment/__user-id/comment__user-id.scss b/web/app/components/comment/__user-id/comment__user-id.scss
new file mode 100644
index 00000000..5fea35bb
--- /dev/null
+++ b/web/app/components/comment/__user-id/comment__user-id.scss
@@ -0,0 +1,4 @@
+.comment__user-id {
+ color: #888;
+ font-weight: 400;
+}
diff --git a/web/app/components/comment/__username/comment__username.scss b/web/app/components/comment/__username/comment__username.scss
index 34b12dd2..2e0683a8 100644
--- a/web/app/components/comment/__username/comment__username.scss
+++ b/web/app/components/comment/__username/comment__username.scss
@@ -3,10 +3,9 @@
font-weight: 700;
text-decoration: none;
color: #777;
+ cursor: pointer;
- &:link {
- &:hover {
- text-decoration: underline;
- }
+ &:hover {
+ opacity: .75;
}
}
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index 1f10c748..17dcde07 100644
--- a/web/app/components/comment/comment.jsx
+++ b/web/app/components/comment/comment.jsx
@@ -13,6 +13,7 @@ export default class Comment extends Component {
this.state = {
isInputVisible: false,
+ isUserIdVisible: false,
};
this.updateState(props);
@@ -20,6 +21,7 @@ export default class Comment extends Component {
this.decreaseScore = this.decreaseScore.bind(this);
this.increaseScore = this.increaseScore.bind(this);
this.toggleInputVisibility = this.toggleInputVisibility.bind(this);
+ this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
this.onReply = this.onReply.bind(this);
this.onPinClick = this.onPinClick.bind(this);
this.onUnpinClick = this.onUnpinClick.bind(this);
@@ -73,6 +75,10 @@ export default class Comment extends Component {
}
}
+ toggleUserIdVisibility() {
+ this.setState({ isUserIdVisible: !this.state.isUserIdVisible });
+ }
+
onPinClick() {
const { id } = this.props.data;
@@ -175,7 +181,7 @@ export default class Comment extends Component {
});
}
- render(props, { guest, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
+ render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
const { data, mix, mods = {} } = props;
const isAdmin = !guest && store.get('user').admin;
const isGuest = guest || !Object.keys(store.get('user')).length;
@@ -242,7 +248,15 @@ export default class Comment extends Component {
alt=""
/>
- {o.user.name}
+ {o.user.name}
+
+ {
+ isUserIdVisible && ({o.user.id})
+ }
{o.time}
diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js
index 202e79c7..83277664 100644
--- a/web/app/components/comment/index.js
+++ b/web/app/components/comment/index.js
@@ -22,6 +22,7 @@ require('./__score-value/comment__score-value.scss');
require('./__status/comment__status.scss');
require('./__text/comment__text.scss');
require('./__time/comment__time.scss');
+require('./__user-id/comment__user-id.scss');
require('./__username/comment__username.scss');
require('./__vote/comment__vote.scss');