From 9614abc7131488836b708247d5179917f4d5448d Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 20 Oct 2018 19:28:54 +0200 Subject: [PATCH] Update mediaGallery component's width when opening CWs --- .../flavours/glitch/components/media_gallery.js | 10 ++++++++++ app/javascript/flavours/glitch/components/status.js | 1 + 2 files changed, 11 insertions(+) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 6133181025..e8dfd6f8e7 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -215,6 +215,7 @@ export default class MediaGallery extends React.PureComponent { standalone: PropTypes.bool, letterbox: PropTypes.bool, fullwidth: PropTypes.bool, + hidden: PropTypes.bool, media: ImmutablePropTypes.list.isRequired, size: PropTypes.object, onOpenMedia: PropTypes.func.isRequired, @@ -235,6 +236,14 @@ export default class MediaGallery extends React.PureComponent { } } + componentDidUpdate (prevProps) { + if (this.node && this.node.offsetWidth) { + this.setState({ + width: this.node.offsetWidth, + }); + } + } + handleOpen = () => { this.setState({ visible: !this.state.visible }); } @@ -244,6 +253,7 @@ export default class MediaGallery extends React.PureComponent { } handleRef = (node) => { + this.node = node; if (node /*&& this.isStandaloneEligible()*/) { // offsetWidth triggers a layout, so only calculate when we need to this.setState({ diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 665aa457ad..449532ea40 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -465,6 +465,7 @@ export default class Status extends ImmutablePureComponent { sensitive={status.get('sensitive')} letterbox={settings.getIn(['media', 'letterbox'])} fullwidth={settings.getIn(['media', 'fullwidth'])} + hidden={isCollapsed || !isExpanded} onOpenMedia={this.props.onOpenMedia} /> )}