alwaysPrepend: PropTypes.bool,
emptyMessage: PropTypes.node,
children: PropTypes.node,
+ bindToDocument: PropTypes.bool,
};
static defaultProps = {
handleScroll = throttle(() => {
if (this.node) {
- const { scrollTop, scrollHeight, clientHeight } = this.node;
+ const scrollTop = this.getScrollTop();
+ const scrollHeight = this.getScrollHeight();
+ const clientHeight = this.getClientHeight();
const offset = scrollHeight - scrollTop - clientHeight;
if (400 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
scrollToTopOnMouseIdle = false;
setScrollTop = newScrollTop => {
- if (this.node.scrollTop !== newScrollTop) {
+ if (this.getScrollTop() !== newScrollTop) {
this.lastScrollWasSynthetic = true;
- this.node.scrollTop = newScrollTop;
+
+ if (this.props.bindToDocument) {
+ document.scrollingElement.scrollTop = newScrollTop;
+ } else {
+ this.node.scrollTop = newScrollTop;
+ }
}
};
this.mouseIdleTimer =
setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY);
- if (!this.mouseMovedRecently && this.node.scrollTop === 0) {
+ if (!this.mouseMovedRecently && this.getScrollTop() === 0) {
// Only set if we just started moving and are scrolled to the top.
this.scrollToTopOnMouseIdle = true;
}
}
getScrollPosition = () => {
- if (this.node && (this.node.scrollTop > 0 || this.mouseMovedRecently)) {
- return {height: this.node.scrollHeight, top: this.node.scrollTop};
+ if (this.node && (this.getScrollTop() > 0 || this.mouseMovedRecently)) {
+ return { height: this.getScrollHeight(), top: this.getScrollTop() };
} else {
return null;
}
}
+ getScrollTop = () => {
+ return this.props.bindToDocument ? document.scrollingElement.scrollTop : this.node.scrollTop;
+ }
+
+ getScrollHeight = () => {
+ return this.props.bindToDocument ? document.scrollingElement.scrollHeight : this.node.scrollHeight;
+ }
+
+ getClientHeight = () => {
+ return this.props.bindToDocument ? document.scrollingElement.clientHeight : this.node.clientHeight;
+ }
+
updateScrollBottom = (snapshot) => {
- const newScrollTop = this.node.scrollHeight - snapshot;
+ const newScrollTop = this.getScrollHeight() - snapshot;
this.setScrollTop(newScrollTop);
}
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
const pendingChanged = (prevProps.numPending > 0) !== (this.props.numPending > 0);
- if (pendingChanged || someItemInserted && (this.node.scrollTop > 0 || this.mouseMovedRecently)) {
- return this.node.scrollHeight - this.node.scrollTop;
+ if (pendingChanged || someItemInserted && (this.getScrollTop() > 0 || this.mouseMovedRecently)) {
+ return this.getScrollHeight() - this.getScrollTop();
} else {
return null;
}
componentDidUpdate (prevProps, prevState, snapshot) {
// Reset the scroll position when a new child comes in in order not to
// jerk the scrollbar around if you're already scrolled down the page.
- if (snapshot !== null) this.updateScrollBottom(snapshot);
+ if (snapshot !== null) {
+ this.updateScrollBottom(snapshot);
+ }
}
componentWillUnmount () {
}
attachScrollListener () {
- this.node.addEventListener('scroll', this.handleScroll);
- this.node.addEventListener('wheel', this.handleWheel);
+ if (this.props.bindToDocument) {
+ document.addEventListener('scroll', this.handleScroll);
+ document.addEventListener('wheel', this.handleWheel);
+ } else {
+ this.node.addEventListener('scroll', this.handleScroll);
+ this.node.addEventListener('wheel', this.handleWheel);
+ }
}
detachScrollListener () {
- this.node.removeEventListener('scroll', this.handleScroll);
- this.node.removeEventListener('wheel', this.handleWheel);
+ if (this.props.bindToDocument) {
+ document.removeEventListener('scroll', this.handleScroll);
+ document.removeEventListener('wheel', this.handleWheel);
+ } else {
+ this.node.removeEventListener('scroll', this.handleScroll);
+ this.node.removeEventListener('wheel', this.handleWheel);
+ }
}
getFirstChildKey (props) {
import Hashtag from 'flavours/glitch/components/hashtag';
import Audio from 'flavours/glitch/features/audio';
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 { List as ImmutableList, fromJS } from 'immutable';
handleOpenMedia = (media, index) => {
document.body.classList.add('with-modals--active');
+ document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
+
this.setState({ media, index });
}
const media = ImmutableList([video]);
document.body.classList.add('with-modals--active');
+ document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
+
this.setState({ media, time });
}
handleCloseMedia = () => {
document.body.classList.remove('with-modals--active');
+ document.documentElement.style.marginRight = 0;
+
this.setState({ media: null, index: null, time: null });
}
hasMore: PropTypes.bool,
withReplies: PropTypes.bool,
isAccount: PropTypes.bool,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}
render () {
- const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount } = this.props;
+ const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, multiColumn } = this.props;
if (!isAccount) {
return (
hasMore={hasMore}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.account_timeline' defaultMessage='No toots here!' />}
+ bindToDocument={!multiColumn}
/>
</Column>
);
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
intl: PropTypes.object.isRequired,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}, 300, { leading: true });
render () {
- const { intl, accountIds, hasMore } = this.props;
+ const { intl, accountIds, hasMore, multiColumn } = this.props;
if (!accountIds) {
return (
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />
timelineId={`community${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
+ bindToDocument={!multiColumn}
/>
</Column>
);
hasMore: PropTypes.bool,
domains: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}, 300, { leading: true });
render () {
- const { intl, domains, hasMore } = this.props;
+ const { intl, domains, hasMore, multiColumn } = this.props;
if (!domains) {
return (
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{domains.map(domain =>
<DomainContainer key={domain} domain={domain} />
isLoading={isLoading}
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
/>
</Column>
);
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
+ multiColumn: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
}
render () {
- const { intl, accountIds } = this.props;
+ const { intl, accountIds, multiColumn } = this.props;
if (!accountIds) {
return (
<ScrollableList
scrollKey='favourites'
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
hasMore: PropTypes.bool,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}, 300, { leading: true });
render () {
- const { intl, accountIds, hasMore } = this.props;
+ const { intl, accountIds, hasMore, multiColumn } = this.props;
if (!accountIds) {
return (
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountAuthorizeContainer key={id} id={id} />
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
isAccount: PropTypes.bool,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}
render () {
- const { accountIds, hasMore, isAccount } = this.props;
+ const { accountIds, hasMore, isAccount, multiColumn } = this.props;
if (!isAccount) {
return (
prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
alwaysPrepend
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
isAccount: PropTypes.bool,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}
render () {
- const { accountIds, hasMore, isAccount } = this.props;
+ const { accountIds, hasMore, isAccount, multiColumn } = this.props;
if (!isAccount) {
return (
prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
alwaysPrepend
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
timelineId={`hashtag:${id}`}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
+ bindToDocument={!multiColumn}
/>
</Column>
);
onLoadMore={this.handleLoadMore}
timelineId='home'
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} or use search to get started and meet other users.' values={{ public: <Link to='/timelines/public'><FormattedMessage id='empty_column.home.public_timeline' defaultMessage='the public timeline' /></Link> }} />}
+ bindToDocument={!multiColumn}
/>
</Column>
);
timelineId={`list:${id}`}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet.' />}
+ bindToDocument={!multiColumn}
/>
</Column>
);
dispatch: PropTypes.func.isRequired,
lists: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}
render () {
- const { intl, lists } = this.props;
+ const { intl, lists, multiColumn } = this.props;
if (!lists) {
return (
<ScrollableList
scrollKey='lists'
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{lists.map(list =>
<ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />
hasMore: PropTypes.bool,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}, 300, { leading: true });
render () {
- const { intl, accountIds, hasMore } = this.props;
+ const { intl, accountIds, hasMore, multiColumn } = this.props;
if (!accountIds) {
return (
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />
onScrollToTop={this.handleScrollToTop}
onScroll={this.handleScroll}
shouldUpdateScroll={shouldUpdateScroll}
+ bindToDocument={!multiColumn}
>
{scrollableContent}
</ScrollableList>
statusIds: ImmutablePropTypes.list.isRequired,
intl: PropTypes.object.isRequired,
hasMore: PropTypes.bool.isRequired,
+ multiColumn: PropTypes.bool,
};
componentWillMount () {
}
render () {
- const { intl, statusIds, hasMore } = this.props;
+ const { intl, statusIds, hasMore, multiColumn } = this.props;
return (
<Column icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
statusIds={statusIds}
scrollKey='pinned_statuses'
hasMore={hasMore}
+ bindToDocument={!multiColumn}
/>
</Column>
);
trackScroll={!pinned}
scrollKey={`public_timeline-${columnId}`}
emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
+ bindToDocument={!multiColumn}
/>
</Column>
);
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
accountIds: ImmutablePropTypes.list,
+ multiColumn: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
}
render () {
- const { intl, accountIds } = this.props;
+ const { intl, accountIds, multiColumn } = this.props;
if (!accountIds) {
return (
<ScrollableList
scrollKey='reblogs'
emptyMessage={emptyMessage}
+ bindToDocument={!multiColumn}
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withNote={false} />
'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 {
static propTypes = {
componentDidUpdate (prevProps, prevState, { visible }) {
if (visible) {
document.body.classList.add('with-modals--active');
+ document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
} else {
document.body.classList.remove('with-modals--active');
+ document.documentElement.style.marginRight = 0;
}
}
componentWillMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
+
+ if (this.state.mobile) {
+ document.body.classList.toggle('layout-single-column', true);
+ document.body.classList.toggle('layout-multiple-columns', false);
+ } else {
+ document.body.classList.toggle('layout-single-column', false);
+ document.body.classList.toggle('layout-multiple-columns', true);
+ }
}
- componentDidUpdate (prevProps) {
+ componentDidUpdate (prevProps, prevState) {
if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
this.node.handleChildrenContentChange();
}
+
+ if (prevState.mobile !== this.state.mobile) {
+ document.body.classList.toggle('layout-single-column', this.state.mobile);
+ document.body.classList.toggle('layout-multiple-columns', !this.state.mobile);
+ }
}
componentWillUnmount () {
new Rellax('.parallax', { speed: -1 });
}
- if (document.body.classList.contains('with-modals')) {
- const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
- const scrollbarWidthStyle = document.createElement('style');
- scrollbarWidthStyle.id = 'scrollbar-width';
- document.head.appendChild(scrollbarWidthStyle);
- scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0);
- }
-
delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
body {
font-family: $font-sans-serif, sans-serif;
- background: darken($ui-base-color, 8%);
+ background: darken($ui-base-color, 7%);
font-size: 13px;
line-height: 18px;
font-weight: 400;
}
&.app-body {
- position: absolute;
- width: 100%;
- height: 100%;
padding: 0;
- background: $ui-base-color;
+
+ &.layout-single-column {
+ height: auto;
+ min-height: 100%;
+ overflow-y: scroll;
+ }
+
+ &.layout-multiple-columns {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
&.with-modals--active {
overflow-y: hidden;
&--active {
overflow-y: hidden;
- margin-right: 13px;
}
}
& > div {
display: flex;
width: 100%;
- height: 100%;
align-items: center;
justify-content: center;
outline: 0 !important;
justify-content: center;
width: 100%;
height: 100%;
+ min-height: 100vh;
&__pane {
height: 100%;
}
&__inner {
+ position: fixed;
width: 285px;
pointer-events: auto;
height: 100%;
flex-direction: column;
width: 100%;
height: 100%;
- background: darken($ui-base-color, 7%);
}
.column {
top: 15px;
}
+ .scrollable {
+ overflow: visible;
+ }
+
@media screen and (min-width: $no-gap-breakpoint) {
padding: 10px 0;
}
cat aescling's git repositories / mastodon.git / commitdiff