diff --git a/web/app/components/comment/__action/comment__action.scss b/web/app/components/comment/__action/comment__action.scss new file mode 100644 index 00000000..d9703a9c --- /dev/null +++ b/web/app/components/comment/__action/comment__action.scss @@ -0,0 +1,4 @@ +.comment__action { + margin-left: 8px; + cursor: pointer; +} diff --git a/web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss b/web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss new file mode 100644 index 00000000..75ada7bb --- /dev/null +++ b/web/app/components/comment/__controls/_view/_admin/comment__controls_view_admin.scss @@ -0,0 +1,3 @@ +.comment__controls_view_admin { + color: #ff4700; +} diff --git a/web/app/components/comment/__controls/comment__controls.scss b/web/app/components/comment/__controls/comment__controls.scss index ebd3eb42..bcccf357 100644 --- a/web/app/components/comment/__controls/comment__controls.scss +++ b/web/app/components/comment/__controls/comment__controls.scss @@ -1,6 +1,5 @@ .comment__controls { display: inline-block; - margin-left: 8px; color: #06c5c5; @media (hover: hover) { diff --git a/web/app/components/comment/__reply/comment__reply.scss b/web/app/components/comment/__reply/comment__reply.scss deleted file mode 100644 index 31696d41..00000000 --- a/web/app/components/comment/__reply/comment__reply.scss +++ /dev/null @@ -1,3 +0,0 @@ -.comment__reply { - cursor: pointer; -} diff --git a/web/app/components/comment/_pinned/comment_pinned.scss b/web/app/components/comment/_pinned/comment_pinned.scss new file mode 100644 index 00000000..f21be6bc --- /dev/null +++ b/web/app/components/comment/_pinned/comment_pinned.scss @@ -0,0 +1,7 @@ +.comment_pinned { + &, &.comment_view_admin { + .comment__username { + color: #FFD700; + } + } +} diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index b1159b7d..f87a990e 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -14,24 +14,29 @@ export default class Comment extends Component { isInputVisible: false, }; - this.updateScoreState(props); + this.updateState(props); this.decreaseScore = this.decreaseScore.bind(this); this.increaseScore = this.increaseScore.bind(this); this.onReplyClick = this.onReplyClick.bind(this); this.onReply = this.onReply.bind(this); + this.onPinClick = this.onPinClick.bind(this); + this.onUnpinClick = this.onUnpinClick.bind(this); + this.onBlockClick = this.onBlockClick.bind(this); + this.onDeleteClick = this.onDeleteClick.bind(this); } componentWillReceiveProps(nextProps) { - this.updateScoreState(nextProps); + this.updateState(nextProps); } - updateScoreState(props) { - const { score = 0, votes = [] } = props.data; + updateState(props) { + const { pin, score = 0, votes = [] } = props.data; const userId = store.get('user').id; this.setState({ score: score, + pinned: !!pin, scoreIncreased: userId in votes && votes[userId], scoreDecreased: userId in votes && !votes[userId], }); @@ -43,6 +48,34 @@ export default class Comment extends Component { this.setState({ isInputVisible: !isInputVisible }); } + onPinClick() { + const { id } = this.props.data; + + this.setState({ pinned: true }); + + api.pin({ id, url }).then(() => { + api.getComment({ id }).then(comment => store.replaceComment(comment)); + }); + } + + onUnpinClick() { + const { id } = this.props.data; + + this.setState({ pinned: false }); + + api.pin({ id, url }).then(() => { + api.getComment({ id }).then(comment => store.replaceComment(comment)); + }); + } + + onBlockClick() { + console.log('block'); + } + + onDeleteClick() { + console.log('delete'); + } + increaseScore() { const { score, scoreIncreased, scoreDecreased } = this.state; const { id } = this.props.data; @@ -82,8 +115,9 @@ export default class Comment extends Component { this.setState({ isInputVisible: false }); } - render(props, { score, scoreIncreased, scoreDecreased, isInputVisible }) { + render(props, { pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) { const { data, mix, mods = {} } = props; + const isAdmin = store.get('user').admin; const time = new Date(data.time); // TODO: which format for datetime should we choose? @@ -100,9 +134,14 @@ export default class Comment extends Component { }, }; - return ( + const defaultMods = { + pinned, // TODO: add default view mod or don't? -