From 654228106614e74d65741287b554ff1eae6fc751 Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 24 Mar 2021 10:19:07 +0100 Subject: [PATCH] [Glitch] Fix compose form behavior in mobile view Port c9a92dd35a20a1ab32706204b2bc6b942279af13 to glitch-soc Signed-off-by: Claire --- .../compose/components/compose_form.js | 10 ++++++++- .../features/ui/components/columns_area.js | 21 +++++++++++++++++-- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 164f4a960d..d4804a3c28 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -199,6 +199,14 @@ class ComposeForm extends ImmutablePureComponent { } } + componentDidMount () { + this._updateFocusAndSelection({ }); + } + + componentDidUpdate (prevProps) { + this._updateFocusAndSelection(prevProps); + } + // This statement does several things: // - If we're beginning a reply, and, // - 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 // the first; this provides a convenient shortcut to drop // everyone else from the conversation. - componentDidUpdate (prevProps) { + _updateFocusAndSelection = (prevProps) => { const { textarea, spoilerText, diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 640be19aba..b41de58d70 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -70,8 +70,12 @@ class ColumnsArea extends ImmutablePureComponent { openSettings: PropTypes.func, }; + // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS + mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)'); + state = { shouldAnimate: false, + renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches), } componentWillReceiveProps() { @@ -85,6 +89,11 @@ class ColumnsArea extends ImmutablePureComponent { 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.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); @@ -114,6 +123,10 @@ class ColumnsArea extends ImmutablePureComponent { if (!this.props.singleColumn) { this.node.removeEventListener('wheel', this.handleWheel); } + + if (this.mediaQuery) { + this.mediaQuery.removeEventListener('change', this.handleLayoutChange); + } } handleChildrenContentChange() { @@ -123,6 +136,10 @@ class ColumnsArea extends ImmutablePureComponent { } } + handleLayoutChange = (e) => { + this.setState({ renderComposePanel: !e.matches }); + } + handleSwipe = (index) => { this.pendingIndex = index; @@ -186,7 +203,7 @@ class ColumnsArea extends ImmutablePureComponent { render () { 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); @@ -205,7 +222,7 @@ class ColumnsArea extends ImmutablePureComponent {
- + {renderComposePanel && }