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

[Glitch] Do not add margin light when opening modal on mobile 

Port 03e29f4c51 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
lolsob-rspec
Yamagishi Kazutoshi 2019-09-29 21:30:58 +09:00 committed by Thibaut Girka
parent 150a9f09d0
commit 35e165c1db
3 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/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 { List as ImmutableList, fromJS } from 'immutable';
import { getLocale } from 'mastodon/locales'; import { getLocale } from 'mastodon/locales';
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
import MediaGallery from 'flavours/glitch/components/media_gallery'; import MediaGallery from 'flavours/glitch/components/media_gallery';
import Video from 'flavours/glitch/features/video';
import Card from 'flavours/glitch/features/status/components/card';
import Poll from 'flavours/glitch/components/poll'; import Poll from 'flavours/glitch/components/poll';
import Hashtag from 'flavours/glitch/components/hashtag'; import Hashtag from 'flavours/glitch/components/hashtag';
import Audio from 'flavours/glitch/features/audio';
import ModalRoot from 'flavours/glitch/components/modal_root'; import ModalRoot from 'flavours/glitch/components/modal_root';
import { getScrollbarWidth } from 'flavours/glitch/features/ui/components/modal_root';
import MediaModal from 'flavours/glitch/features/ui/components/media_modal'; import MediaModal from 'flavours/glitch/features/ui/components/media_modal';
import { List as ImmutableList, fromJS } from 'immutable'; import Video from 'flavours/glitch/features/video';
import Card from 'flavours/glitch/features/status/components/card';
import Audio from 'flavours/glitch/features/audio';
const { localeData, messages } = getLocale(); const { localeData, messages } = getLocale();
addLocaleData(localeData); addLocaleData(localeData);

25
app/javascript/flavours/glitch/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 'flavours/glitch/util/scrollbar';
import Base from 'flavours/glitch/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';
@ -46,28 +47,6 @@ const MODAL_COMPONENTS = {
'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor, 'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor,
}; };
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/flavours/glitch/util/scrollbar.js Normal file
View File

@ -0,0 +1,36 @@
import { isMobile } from 'flavours/glitch/util/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;
};