diff options
author | Claire <claire.github-309c@sitedethib.com> | 2021-03-25 00:31:15 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-25 00:31:15 +0100 |
commit | a2a85d5ae03282c6f9cbf452b9b8f7d948a9f380 (patch) | |
tree | f3f15ea30de78e0fabaa5135a3b3c7b51053e4b6 /app/javascript/flavours/glitch/features/ui/components | |
parent | d7c1c41859549212a6d34ad869fded16acc17b48 (diff) | |
parent | 5ea53b6158c42660aa61da2a49a3bbf9e2e406d0 (diff) |
Merge pull request #1516 from ClearlyClaire/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/columns_area.js | 21 |
1 files changed, 19 insertions, 2 deletions
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 640be19ab..b41de58d7 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 { <div className='columns-area__panels'> <div className='columns-area__panels__pane columns-area__panels__pane--compositional'> <div className='columns-area__panels__pane__inner'> - <ComposePanel /> + {renderComposePanel && <ComposePanel />} </div> </div> |