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

[Glitch] Show media modal on public timeline 

Port c1427f90f6 to glitch-soc
lolsob-rspec
Thibaut Girka 2018-07-31 23:03:16 +02:00
parent 8c4fc00ece
commit 28cdf3da09
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -423,7 +423,7 @@ export default class Status extends ImmutablePureComponent {
mediaIcon = 'video-camera'; mediaIcon = 'video-camera';
} else { // Media type is 'image' or 'gifv' } else { // Media type is 'image' or 'gifv'
media = ( media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} > <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
{Component => ( {Component => (
<Component <Component
media={attachments} media={attachments}

10
app/javascript/flavours/glitch/containers/timeline_container.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import configureStore from 'flavours/glitch/store/configureStore'; import configureStore from 'flavours/glitch/store/configureStore';
@ -8,6 +9,7 @@ import { getLocale } from 'mastodon/locales';
import PublicTimeline from 'flavours/glitch/features/standalone/public_timeline'; import PublicTimeline from 'flavours/glitch/features/standalone/public_timeline';
import CommunityTimeline from 'flavours/glitch/features/standalone/community_timeline'; import CommunityTimeline from 'flavours/glitch/features/standalone/community_timeline';
import HashtagTimeline from 'flavours/glitch/features/standalone/hashtag_timeline'; import HashtagTimeline from 'flavours/glitch/features/standalone/hashtag_timeline';
import ModalContainer from 'flavours/glitch/features/ui/containers/modal_container';
import initialState from 'flavours/glitch/util/initial_state'; import initialState from 'flavours/glitch/util/initial_state';
const { localeData, messages } = getLocale(); const { localeData, messages } = getLocale();
@ -47,7 +49,13 @@ export default class TimelineContainer extends React.PureComponent {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Provider store={store}> <Provider store={store}>
<Fragment>
{timeline} {timeline}
{ReactDOM.createPortal(
<ModalContainer />,
document.getElementById('modal-container'),
)}
</Fragment>
</Provider> </Provider>
</IntlProvider> </IntlProvider>
); );

11
app/javascript/flavours/glitch/features/ui/components/modal_root.js
View File

@ -44,6 +44,17 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };
getSnapshotBeforeUpdate () {
const visible = !!this.props.type;
return {
overflowY: visible ? 'hidden' : null,
};
}
componentDidUpdate (prevProps, prevState, { overflowY }) {
document.body.style.overflowY = overflowY;
}
renderLoading = modalId => () => { renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null; return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
} }