From 6a48efe16c062b8c82975573400e44d817ab548b Mon Sep 17 00:00:00 2001 From: kibigo! Date: Mon, 27 Nov 2017 14:05:03 -0800 Subject: Adds spoiler hotkey support to detailed statuses --- .../features/status/components/detailed_status.js | 4 +++- app/javascript/themes/glitch/features/status/index.js | 17 ++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) (limited to 'app') 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} />
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} />