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');