From 0a49b26793d467589be09305e15ff9cc97cdd200 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sun, 29 Sep 2019 21:30:58 +0900 Subject: [PATCH] Do not add margin light when opening modal on mobile (#11830) --- .../mastodon/containers/media_container.js | 16 ++++----- .../features/ui/components/modal_root.js | 25 ++----------- app/javascript/mastodon/utils/scrollbar.js | 36 +++++++++++++++++++ 3 files changed, 46 insertions(+), 31 deletions(-) create mode 100644 app/javascript/mastodon/utils/scrollbar.js diff --git a/app/javascript/mastodon/containers/media_container.js b/app/javascript/mastodon/containers/media_container.js index db340032ae..ba55ecbc7b 100644 --- a/app/javascript/mastodon/containers/media_container.js +++ b/app/javascript/mastodon/containers/media_container.js @@ -2,17 +2,17 @@ import React, { PureComponent, Fragment } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { IntlProvider, addLocaleData } from 'react-intl'; -import { getLocale } from '../locales'; -import MediaGallery from '../components/media_gallery'; -import Video from '../features/video'; -import Card from '../features/status/components/card'; +import { List as ImmutableList, fromJS } from 'immutable'; +import { getLocale } from 'mastodon/locales'; +import { getScrollbarWidth } from 'mastodon/utils/scrollbar'; +import MediaGallery from 'mastodon/components/media_gallery'; import Poll from 'mastodon/components/poll'; 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 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(); addLocaleData(localeData); diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 06f9e1bc4d..5fc37368bd 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -1,6 +1,7 @@ import React from 'react'; 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 BundleModalError from './bundle_modal_error'; import ModalLoading from './modal_loading'; @@ -32,28 +33,6 @@ const MODAL_COMPONENTS = { '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 { static propTypes = { diff --git a/app/javascript/mastodon/utils/scrollbar.js b/app/javascript/mastodon/utils/scrollbar.js new file mode 100644 index 0000000000..6f0ee010b5 --- /dev/null +++ b/app/javascript/mastodon/utils/scrollbar.js @@ -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; +};