diff --git a/web/app/common/constants.js b/web/app/common/constants.js index b22bf9ca..0be1d55f 100644 --- a/web/app/common/constants.js +++ b/web/app/common/constants.js @@ -2,6 +2,7 @@ const BASE_URL = 'https://remark42.radio-t.com'; const API_BASE = '/api/v1'; const NODE_ID = 'remark42'; const COUNTER_NODE_CLASSNAME = 'remark42__counter'; +const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-'; const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments'; const DEFAULT_LAST_COMMENTS_MAX = 15; const DEFAULT_MAX_COMMENT_SIZE = 1000; @@ -12,6 +13,7 @@ module.exports = { NODE_ID, COUNTER_NODE_CLASSNAME, LAST_COMMENTS_NODE_CLASSNAME, + COMMENT_NODE_CLASSNAME_PREFIX, DEFAULT_LAST_COMMENTS_MAX, DEFAULT_MAX_COMMENT_SIZE, }; diff --git a/web/app/components/comment/__link-to-parent/_focused/comment__link-to-parent__focused.svg b/web/app/components/comment/__link-to-parent/_focused/comment__link-to-parent__focused.svg new file mode 100644 index 00000000..cc4a5d38 --- /dev/null +++ b/web/app/components/comment/__link-to-parent/_focused/comment__link-to-parent__focused.svg @@ -0,0 +1,3 @@ + diff --git a/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss b/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss new file mode 100644 index 00000000..a7ebce68 --- /dev/null +++ b/web/app/components/comment/__link-to-parent/comment__link-to-parent.scss @@ -0,0 +1,13 @@ +.comment__link-to-parent { + display: inline-block; + height: 12px; + width: 16px; + margin-left: 8px; + vertical-align: -2px; + background: url('comment__link-to-parent.svg') center no-repeat; + cursor: pointer; + + &:hover { + background-image: url('./_focused/comment__link-to-parent__focused.svg'); + } +} diff --git a/web/app/components/comment/__link-to-parent/comment__link-to-parent.svg b/web/app/components/comment/__link-to-parent/comment__link-to-parent.svg new file mode 100644 index 00000000..d0a2e68e --- /dev/null +++ b/web/app/components/comment/__link-to-parent/comment__link-to-parent.svg @@ -0,0 +1,3 @@ + diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 72d6426d..7edcddee 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -1,7 +1,7 @@ import { h, Component } from 'preact'; import api from 'common/api'; -import { API_BASE, BASE_URL } from 'common/constants'; +import { API_BASE, BASE_URL, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants'; import { url } from 'common/settings'; import store from 'common/store'; @@ -22,6 +22,7 @@ export default class Comment extends Component { this.increaseScore = this.increaseScore.bind(this); this.toggleInputVisibility = this.toggleInputVisibility.bind(this); this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this); + this.scrollToParent = this.scrollToParent.bind(this); this.onReply = this.onReply.bind(this); this.onPinClick = this.onPinClick.bind(this); this.onUnpinClick = this.onUnpinClick.bind(this); @@ -181,6 +182,14 @@ export default class Comment extends Component { }); } + scrollToParent(e) { + const { data: { pid } } = this.props; + + e.preventDefault(); + + window.location.hash = `#${COMMENT_NODE_CLASSNAME_PREFIX}${pid}`; + } + render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) { const { data, mix, mods = {} } = props; const isAdmin = !guest && store.get('user').admin; @@ -224,10 +233,10 @@ export default class Comment extends Component { if (mods.view === 'preview') { return ( -