treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Update mediaGallery component's width when opening CWs

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2018-10-20 19:28:54 +02:00 committed by ThibG
parent e4c3ea1809
commit dfa5b0576f
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/components/media_gallery.js
View File

@ -215,6 +215,7 @@ export default class MediaGallery extends React.PureComponent {
standalone: PropTypes.bool, standalone: PropTypes.bool,
letterbox: PropTypes.bool, letterbox: PropTypes.bool,
fullwidth: PropTypes.bool, fullwidth: PropTypes.bool,
hidden: PropTypes.bool,
media: ImmutablePropTypes.list.isRequired, media: ImmutablePropTypes.list.isRequired,
size: PropTypes.object, size: PropTypes.object,
onOpenMedia: PropTypes.func.isRequired, 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 = () => { handleOpen = () => {
this.setState({ visible: !this.state.visible }); this.setState({ visible: !this.state.visible });
} }
@ -244,6 +253,7 @@ export default class MediaGallery extends React.PureComponent {
} }
handleRef = (node) => { handleRef = (node) => {
this.node = node;
if (node /*&& this.isStandaloneEligible()*/) { if (node /*&& this.isStandaloneEligible()*/) {
// offsetWidth triggers a layout, so only calculate when we need to // offsetWidth triggers a layout, so only calculate when we need to
this.setState({ this.setState({

1
app/javascript/flavours/glitch/components/status.js
View File

@ -465,6 +465,7 @@ export default class Status extends ImmutablePureComponent {
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])} fullwidth={settings.getIn(['media', 'fullwidth'])}
hidden={isCollapsed || !isExpanded}
onOpenMedia={this.props.onOpenMedia} onOpenMedia={this.props.onOpenMedia}
/> />
)} )}