diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-04-26 11:34:14 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-26 11:34:14 -0400 |
commit | f4ed38272be7cce814e3d3e7e5a2d1f352279e19 (patch) | |
tree | 4e26499478b18d2338be90f21428f1bd76481b89 /app/javascript/flavours/glitch/components/status.js | |
parent | 8f12afb5996c58ddf41ceaa20f6c4e036273d3a6 (diff) | |
parent | b383c0688a0939d25b9184e61dac72cda71f6926 (diff) |
Merge pull request #401 from ThibG/glitch-soc/features/unfold-thread
Port the “unfold thread” feature from Mastodon's UI to glitch-soc flavour
Diffstat (limited to 'app/javascript/flavours/glitch/components/status.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/status.js | 78 |
1 files changed, 44 insertions, 34 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 120772201..a6c08ba1c 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -47,10 +47,12 @@ export default class Status extends ImmutablePureComponent { onMoveDown: PropTypes.func, getScrollPosition: PropTypes.func, updateScrollBottom: PropTypes.func, + expanded: PropTypes.bool, }; state = { - isExpanded: null, + isExpanded: this.props.expanded, + isCollapsed: false, autoCollapsed: false, } @@ -71,6 +73,7 @@ export default class Status extends ImmutablePureComponent { updateOnStates = [ 'isExpanded', + 'isCollapsed', ] // If our settings have changed to disable collapsed statuses, then we @@ -83,18 +86,21 @@ export default class Status extends ImmutablePureComponent { // uncollapse our status accordingly. componentWillReceiveProps (nextProps) { if (!nextProps.settings.getIn(['collapsed', 'enabled'])) { - if (this.state.isExpanded === false) { - this.setExpansion(null); + if (this.state.isCollapsed) { + this.setCollapsed(false); } } else if ( nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined - ) this.setExpansion(nextProps.collapse ? false : null); + ) this.setCollapsed(nextProps.collapse); + if (nextProps.expanded !== this.props.expanded && + nextProps.expanded !== undefined + ) this.setExpansion(nextProps.expanded); } // When mounting, we just check to see if our status should be collapsed, // and collapse it if so. We don't need to worry about whether collapsing - // is enabled here, because `setExpansion()` already takes that into + // is enabled here, because `setCollapsed()` already takes that into // account. // The cases where a status should be collapsed are: @@ -138,7 +144,7 @@ export default class Status extends ImmutablePureComponent { return false; } }()) { - this.setExpansion(false); + this.setCollapsed(true); // Hack to fix timeline jumps on second rendering when auto-collapsing this.setState({ autoCollapsed: true }); } @@ -164,23 +170,26 @@ export default class Status extends ImmutablePureComponent { } } - // `setExpansion()` sets the value of `isExpanded` in our state. It takes - // one argument, `value`, which gives the desired value for `isExpanded`. - // The default for this argument is `null`. + // `setCollapsed()` sets the value of `isCollapsed` in our state, that is, + // whether the toot is collapsed or not. - // `setExpansion()` automatically checks for us whether toot collapsing + // `setCollapsed()` automatically checks for us whether toot collapsing // is enabled, so we don't have to. + setCollapsed = (value) => { + if (this.props.settings.getIn(['collapsed', 'enabled'])) { + this.setState({ isCollapsed: value }); + if (value) { + this.setExpansion(false); + } + } else { + this.setState({ isCollapsed: false }); + } + } + setExpansion = (value) => { - switch (true) { - case value === undefined || value === null: - this.setState({ isExpanded: null }); - break; - case !value && this.props.settings.getIn(['collapsed', 'enabled']): - this.setState({ isExpanded: false }); - break; - case !!value: - this.setState({ isExpanded: true }); - break; + this.setState({ isExpanded: value }); + if (value) { + this.setCollapsed(false); } } @@ -192,7 +201,7 @@ export default class Status extends ImmutablePureComponent { parseClick = (e, destination) => { const { router } = this.context; const { status } = this.props; - const { isExpanded } = this.state; + const { isCollapsed } = this.state; if (!router) return; if (destination === undefined) { destination = `/statuses/${ @@ -200,9 +209,9 @@ export default class Status extends ImmutablePureComponent { }`; } if (e.button === 0) { - if (isExpanded === false) this.setExpansion(null); + if (isCollapsed) this.setCollapsed(false); else if (e.shiftKey) { - this.setExpansion(false); + this.setCollapsed(true); document.getSelection().removeAllRanges(); } else router.history.push(destination); e.preventDefault(); @@ -219,7 +228,7 @@ export default class Status extends ImmutablePureComponent { handleExpandedToggle = () => { if (this.props.status.get('spoiler_text')) { - this.setExpansion(this.state.isExpanded ? null : true); + this.setExpansion(!this.state.isExpanded); } }; @@ -278,6 +287,7 @@ export default class Status extends ImmutablePureComponent { handleRef, parseClick, setExpansion, + setCollapsed, } = this; const { router } = this.context; const { @@ -295,7 +305,7 @@ export default class Status extends ImmutablePureComponent { featured, ...other } = this.props; - const { isExpanded } = this.state; + const { isExpanded, isCollapsed } = this.state; let background = null; let attachments = null; let media = null; @@ -414,8 +424,8 @@ export default class Status extends ImmutablePureComponent { }; const computedClass = classNames('status', `status-${status.get('visibility')}`, { - collapsed: isExpanded === false, - 'has-background': isExpanded === false && background, + collapsed: isCollapsed, + 'has-background': isCollapsed && background, muted, }, 'focusable'); @@ -423,7 +433,7 @@ export default class Status extends ImmutablePureComponent { <HotKeys handlers={handlers}> <div className={computedClass} - style={isExpanded === false && background ? { backgroundImage: `url(${background})` } : null} + style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null} {...selectorAttribs} ref={handleRef} tabIndex='0' @@ -439,11 +449,11 @@ export default class Status extends ImmutablePureComponent { notificationId={this.props.notificationId} /> ) : null} - {!muted || isExpanded !== false ? ( + {!muted || !isCollapsed ? ( <StatusHeader status={status} friend={account} - collapsed={isExpanded === false} + collapsed={isCollapsed} parseClick={parseClick} /> ) : null} @@ -452,8 +462,8 @@ export default class Status extends ImmutablePureComponent { status={status} mediaIcon={mediaIcon} collapsible={settings.getIn(['collapsed', 'enabled'])} - collapsed={isExpanded === false} - setExpansion={setExpansion} + collapsed={isCollapsed} + setCollapsed={setCollapsed} /> </header> <StatusContent @@ -461,11 +471,11 @@ export default class Status extends ImmutablePureComponent { media={media} mediaIcon={mediaIcon} expanded={isExpanded} - setExpansion={setExpansion} + onExpandedToggle={this.handleExpandedToggle} parseClick={parseClick} disabled={!router} /> - {isExpanded !== false || !muted ? ( + {!isCollapsed || !muted ? ( <StatusActionBar {...other} status={status} |