diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-11-27 14:05:03 -0800 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-11-27 14:05:03 -0800 |
commit | 6a48efe16c062b8c82975573400e44d817ab548b (patch) | |
tree | 777ebc16c05f119227809c96212e601643de733e /app/javascript/themes/glitch/features | |
parent | f3c3df62ab0f460ec9eea558a09aefc161a9d8d5 (diff) |
Adds spoiler hotkey support to detailed statuses
Diffstat (limited to 'app/javascript/themes/glitch/features')
-rw-r--r-- | app/javascript/themes/glitch/features/status/components/detailed_status.js | 4 | ||||
-rw-r--r-- | app/javascript/themes/glitch/features/status/index.js | 17 |
2 files changed, 19 insertions, 2 deletions
diff --git a/app/javascript/themes/glitch/features/status/components/detailed_status.js b/app/javascript/themes/glitch/features/status/components/detailed_status.js index 7606bfbf3..df78ce4b6 100644 --- a/app/javascript/themes/glitch/features/status/components/detailed_status.js +++ b/app/javascript/themes/glitch/features/status/components/detailed_status.js @@ -41,7 +41,7 @@ export default class DetailedStatus extends ImmutablePureComponent { render () { const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status; - const { settings } = this.props; + const { expanded, setExpansion, settings } = this.props; let media = ''; let mediaIcon = null; @@ -109,6 +109,8 @@ export default class DetailedStatus extends ImmutablePureComponent { status={status} media={media} mediaIcon={mediaIcon} + expanded={expanded} + setExpansion={setExpansion} /> <div className='detailed-status__meta'> diff --git a/app/javascript/themes/glitch/features/status/index.js b/app/javascript/themes/glitch/features/status/index.js index 57af94a9a..8561bd4de 100644 --- a/app/javascript/themes/glitch/features/status/index.js +++ b/app/javascript/themes/glitch/features/status/index.js @@ -71,6 +71,7 @@ export default class Status extends ImmutablePureComponent { state = { fullscreen: false, + isExpanded: null, }; componentWillMount () { @@ -88,6 +89,12 @@ export default class Status extends ImmutablePureComponent { } } + handleExpandedToggle = () => { + if (this.props.status.get('spoiler_text')) { + this.setExpansion(this.state.isExpanded ? null : true); + } + }; + handleFavouriteClick = (status) => { if (status.get('favourited')) { this.props.dispatch(unfavourite(status)); @@ -241,6 +248,10 @@ export default class Status extends ImmutablePureComponent { )); } + setExpansion = value => { + this.setState({ isExpanded: value ? true : null }); + } + setRef = c => { this.node = c; } @@ -272,8 +283,9 @@ export default class Status extends ImmutablePureComponent { render () { let ancestors, descendants; + const { setExpansion } = this; const { status, settings, ancestorsIds, descendantsIds } = this.props; - const { fullscreen } = this.state; + const { fullscreen, isExpanded } = this.state; if (status === null) { return ( @@ -300,6 +312,7 @@ export default class Status extends ImmutablePureComponent { boost: this.handleHotkeyBoost, mention: this.handleHotkeyMention, openProfile: this.handleHotkeyOpenProfile, + toggleSpoiler: this.handleExpandedToggle, }; return ( @@ -317,6 +330,8 @@ export default class Status extends ImmutablePureComponent { settings={settings} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} + expanded={isExpanded} + setExpansion={setExpansion} /> <ActionBar |