[Glitch] Fix compose form behavior in mobile view

Port 034f37b85a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Claire 2021-03-24 10:19:07 +01:00
parent b61e44461c
commit 5ea53b6158
2 changed files with 28 additions and 3 deletions

View file

@ -199,6 +199,14 @@ class ComposeForm extends ImmutablePureComponent {
} }
} }
componentDidMount () {
this._updateFocusAndSelection({ });
}
componentDidUpdate (prevProps) {
this._updateFocusAndSelection(prevProps);
}
// This statement does several things: // This statement does several things:
// - If we're beginning a reply, and, // - If we're beginning a reply, and,
// - Replying to zero or one users, places the cursor at the end // - Replying to zero or one users, places the cursor at the end
@ -206,7 +214,7 @@ class ComposeForm extends ImmutablePureComponent {
// - Replying to more than one user, selects any usernames past // - Replying to more than one user, selects any usernames past
// the first; this provides a convenient shortcut to drop // the first; this provides a convenient shortcut to drop
// everyone else from the conversation. // everyone else from the conversation.
componentDidUpdate (prevProps) { _updateFocusAndSelection = (prevProps) => {
const { const {
textarea, textarea,
spoilerText, spoilerText,

View file

@ -70,8 +70,12 @@ class ColumnsArea extends ImmutablePureComponent {
openSettings: PropTypes.func, openSettings: PropTypes.func,
}; };
// Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)');
state = { state = {
shouldAnimate: false, shouldAnimate: false,
renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches),
} }
componentWillReceiveProps() { componentWillReceiveProps() {
@ -85,6 +89,11 @@ class ColumnsArea extends ImmutablePureComponent {
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
} }
if (this.mediaQuery) {
this.mediaQuery.addEventListener('change', this.handleLayoutChange);
this.setState({ renderComposePanel: !this.mediaQuery.matches });
}
this.lastIndex = getIndex(this.context.router.history.location.pathname); this.lastIndex = getIndex(this.context.router.history.location.pathname);
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
@ -114,6 +123,10 @@ class ColumnsArea extends ImmutablePureComponent {
if (!this.props.singleColumn) { if (!this.props.singleColumn) {
this.node.removeEventListener('wheel', this.handleWheel); this.node.removeEventListener('wheel', this.handleWheel);
} }
if (this.mediaQuery) {
this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
}
} }
handleChildrenContentChange() { handleChildrenContentChange() {
@ -123,6 +136,10 @@ class ColumnsArea extends ImmutablePureComponent {
} }
} }
handleLayoutChange = (e) => {
this.setState({ renderComposePanel: !e.matches });
}
handleSwipe = (index) => { handleSwipe = (index) => {
this.pendingIndex = index; this.pendingIndex = index;
@ -186,7 +203,7 @@ class ColumnsArea extends ImmutablePureComponent {
render () { render () {
const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder, openSettings } = this.props; const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder, openSettings } = this.props;
const { shouldAnimate } = this.state; const { shouldAnimate, renderComposePanel } = this.state;
const columnIndex = getIndex(this.context.router.history.location.pathname); const columnIndex = getIndex(this.context.router.history.location.pathname);
@ -205,7 +222,7 @@ class ColumnsArea extends ImmutablePureComponent {
<div className='columns-area__panels'> <div className='columns-area__panels'>
<div className='columns-area__panels__pane columns-area__panels__pane--compositional'> <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
<div className='columns-area__panels__pane__inner'> <div className='columns-area__panels__pane__inner'>
<ComposePanel /> {renderComposePanel && <ComposePanel />}
</div> </div>
</div> </div>