[Glitch] Fix compose form behavior in mobile view
Port c9a92dd35a
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
lolsob-rspec
parent
72e78a9d65
commit
6542281066
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue