diff --git a/web/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss b/web/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss index 54360eeb..919150b5 100644 --- a/web/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss +++ b/web/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss @@ -1,5 +1,8 @@ .comment__action_type_collapse { display: inline-block; + position: absolute; + top: 6px; + right: 68px; box-sizing: border-box; width: 12px; height: 12px; diff --git a/web/app/components/comment/__info/comment__info.scss b/web/app/components/comment/__info/comment__info.scss index dbf9b6cc..5c9a269d 100644 --- a/web/app/components/comment/__info/comment__info.scss +++ b/web/app/components/comment/__info/comment__info.scss @@ -1,6 +1,6 @@ .comment__info { margin-bottom: 6px; - padding-right: 64px; + padding-right: 84px; font-size: 14px; line-height: 16px; } diff --git a/web/app/components/comment/_collapsed/comment_collapsed.scss b/web/app/components/comment/_collapsed/comment_collapsed.scss new file mode 100644 index 00000000..fd690f61 --- /dev/null +++ b/web/app/components/comment/_collapsed/comment_collapsed.scss @@ -0,0 +1,5 @@ +.comment_collapsed { + .comment__text, .comment__actions { + display: none; + } +} diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 85554b69..65f4a043 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -262,6 +262,11 @@ export default class Comment extends Component { } toggleCollapse() { + this.setState({ + isEditing: false, + isReplying: false, + }); + if (this.props.onCollapseToggle) { this.props.onCollapseToggle(); } @@ -385,6 +390,16 @@ export default class Comment extends Component { ) } + { + !mods.disabled && ( + {mods.collapsed ? '+' : '−'} + ) + } + {mods.collapsed ? '+' : '−'} - ) - } - { !deleted && isAdmin && ( diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js index 68cf4b71..96b755ae 100644 --- a/web/app/components/comment/index.js +++ b/web/app/components/comment/index.js @@ -34,8 +34,9 @@ require('./__vote/_selected/comment__vote_selected.scss'); require('./__vote/_type/_down/comment__vote_type_down.scss'); require('./__vote/_type/_up/comment__vote_type_up.scss'); -require('./_level/comment_level.scss'); +require('./_collapsed/comment_collapsed.scss'); require('./_editing/comment_editing.scss'); +require('./_level/comment_level.scss'); require('./_replying/comment_replying.scss'); require('./_useless/comment_useless.scss'); diff --git a/web/app/components/thread/thread.jsx b/web/app/components/thread/thread.jsx index 0ca3b3da..f22bbe21 100644 --- a/web/app/components/thread/thread.jsx +++ b/web/app/components/thread/thread.jsx @@ -2,6 +2,7 @@ import { h, Component } from 'preact'; import { LS_COLLAPSE_KEY } from 'common/constants'; import { siteId, url } from 'common/settings'; +import store from 'common/store'; import Comment from 'components/comment'; @@ -23,10 +24,15 @@ export default class Thread extends Component { } updateCollapsedState(comment) { + const config = store.get('config') || {}; + const score = comment.score || 0; + this.lsCollapsedID = `${siteId}_${url}_${comment.id}`; this.state = { - collapsed: getCollapsedComments().includes(this.lsCollapsedID), + collapsed: !this.state.isCollapsedChanged && score <= config.critical_score + || getCollapsedComments().includes(this.lsCollapsedID), + isCollapsedChanged: true, }; } @@ -49,7 +55,7 @@ export default class Thread extends Component { } render(props, { collapsed }) { - const { data: { comment, replies = [] }, mix, mods = {} } = props; + const { data: { comment, replies = [] }, mods = {} } = props; return (