cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Do not add margin light when opening modal on mobile (#11830)

This commit is contained in:
Yamagishi Kazutoshi 2019-09-29 21:30:58 +09:00 committed by Eugen Rochko
parent 163ed91af3
commit 0a49b26793
3 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/mastodon/containers/media_container.js
View File

@ -2,17 +2,17 @@ import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IntlProvider, addLocaleData } from 'react-intl'; import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from '../locales'; import { List as ImmutableList, fromJS } from 'immutable';
import MediaGallery from '../components/media_gallery'; import { getLocale } from 'mastodon/locales';
import Video from '../features/video'; import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
import Card from '../features/status/components/card'; import MediaGallery from 'mastodon/components/media_gallery';
import Poll from 'mastodon/components/poll'; import Poll from 'mastodon/components/poll';
import Hashtag from 'mastodon/components/hashtag'; import Hashtag from 'mastodon/components/hashtag';
import ModalRoot from 'mastodon/components/modal_root';
import MediaModal from 'mastodon/features/ui/components/media_modal';
import Video from 'mastodon/features/video';
import Card from 'mastodon/features/status/components/card';
import Audio from 'mastodon/features/audio'; import Audio from 'mastodon/features/audio';
import ModalRoot from '../components/modal_root';
import { getScrollbarWidth } from '../features/ui/components/modal_root';
import MediaModal from '../features/ui/components/media_modal';
import { List as ImmutableList, fromJS } from 'immutable';
const { localeData, messages } = getLocale(); const { localeData, messages } = getLocale();
addLocaleData(localeData); addLocaleData(localeData);

25
app/javascript/mastodon/features/ui/components/modal_root.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Base from '../../../components/modal_root'; import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
import Base from 'mastodon/components/modal_root';
import BundleContainer from '../containers/bundle_container'; import BundleContainer from '../containers/bundle_container';
import BundleModalError from './bundle_modal_error'; import BundleModalError from './bundle_modal_error';
import ModalLoading from './modal_loading'; import ModalLoading from './modal_loading';
@ -32,28 +33,6 @@ const MODAL_COMPONENTS = {
'LIST_ADDER':ListAdder, 'LIST_ADDER':ListAdder,
}; };
let cachedScrollbarWidth = null;
export const getScrollbarWidth = () => {
if (cachedScrollbarWidth !== null) {
return cachedScrollbarWidth;
}
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll';
document.body.appendChild(outer);
const inner = document.createElement('div');
outer.appendChild(inner);
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
cachedScrollbarWidth = scrollbarWidth;
outer.parentNode.removeChild(outer);
return scrollbarWidth;
};
export default class ModalRoot extends React.PureComponent { export default class ModalRoot extends React.PureComponent {
static propTypes = { static propTypes = {

36
app/javascript/mastodon/utils/scrollbar.js Normal file
View File

@ -0,0 +1,36 @@
import { isMobile } from '../is_mobile';
/** @type {number | null} */
let cachedScrollbarWidth = null;
/**
* @return {number}
*/
const getActualScrollbarWidth = () => {
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll';
document.body.appendChild(outer);
const inner = document.createElement('div');
outer.appendChild(inner);
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
outer.parentNode.removeChild(outer);
return scrollbarWidth;
};
/**
* @return {number}
*/
export const getScrollbarWidth = () => {
if (cachedScrollbarWidth !== null) {
return cachedScrollbarWidth;
}
const scrollbarWidth = isMobile(window.innerWidth) ? 0 : getActualScrollbarWidth();
cachedScrollbarWidth = scrollbarWidth;
return scrollbarWidth;
};