Unfloyded/Legamunt
0
0
Fork 0
Code Activity

feat(compose): More space on mobile devices (#4282)

Browse source 
* feat(compose): More space on mobile devices

* feat(compose): Hide navigation when typing on mobile devices

* fix(compose): Make animation faster

* fix(navigation_bar): Remove hardcoded title

* fix(compose): Prevent accidental bluring

* fix(compose): Increase max-height to 600px
This commit is contained in:
Sorin Davidoi 2017-07-21 01:38:24 +02:00 • committed by Eugen Rochko
parent 4b911fea03
commit c1bc5e14eb
6 changed files with 114 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/javascript/mastodon/features/compose/components/navigation_bar.js
View file

@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Avatar from '../../../components/avatar';
import IconButton from '../../../components/icon_button';
import Permalink from '../../../components/permalink';
import { FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -9,6 +11,7 @@ export default class NavigationBar extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
onClose: PropTypes.func.isRequired,
};
render () {
@ -25,6 +28,8 @@ export default class NavigationBar extends ImmutablePureComponent {
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
</div>
<IconButton title='' icon='close' onClick={this.props.onClose} />
</div>
);
}

13
app/javascript/mastodon/features/compose/index.js
View file

@ -11,6 +11,7 @@ import SearchContainer from './containers/search_container';
import Motion from 'react-motion/lib/Motion';
import spring from 'react-motion/lib/spring';
import SearchResultsContainer from './containers/search_results_container';
import { changeComposing } from '../../actions/compose';
const messages = defineMessages({
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@ -47,6 +48,14 @@ export default class Compose extends React.PureComponent {
this.props.dispatch(unmountCompose());
}
onFocus = () => {
this.props.dispatch(changeComposing(true));
}
onBlur = () => {
this.props.dispatch(changeComposing(false));
}
render () {
const { multiColumn, showSearch, intl } = this.props;
@ -82,8 +91,8 @@ export default class Compose extends React.PureComponent {
<SearchContainer />
<div className='drawer__pager'>
<div className='drawer__inner'>
<NavigationContainer />
<div className='drawer__inner' onFocus={this.onFocus}>
<NavigationContainer onClose={this.onBlur} />
<ComposeFormContainer />
</div>

15
app/javascript/mastodon/features/ui/index.js
View file

@ -43,6 +43,7 @@ import '../../components/status';
const mapStateToProps = state => ({
systemFontUi: state.getIn(['meta', 'system_font_ui']),
isComposing: state.getIn(['compose', 'is_composing']),
});
@connect(mapStateToProps)
@ -52,6 +53,7 @@ export default class UI extends React.PureComponent {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
systemFontUi: PropTypes.bool,
isComposing: PropTypes.bool,
};
state = {
@ -133,6 +135,19 @@ export default class UI extends React.PureComponent {
this.props.dispatch(refreshNotifications());
}
shouldComponentUpdate (nextProps) {
if (nextProps.isComposing !== this.props.isComposing) {
// Avoid expensive update just to toggle a class
this.node.classList.toggle('is-composing', nextProps.isComposing);
return false;
}
// Why isn't this working?!?
// return super.shouldComponentUpdate(nextProps, nextState);
return true;
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
document.removeEventListener('dragenter', this.handleDragEnter);