Switch to compose view when tapping 'mention' in dropdown on mobile

This commit is contained in:
blackle 2017-01-08 05:04:01 -05:00
parent 69643338f6
commit d64c454cfe
6 changed files with 25 additions and 5 deletions

View file

@ -49,7 +49,7 @@ const StatusActionBar = React.createClass({
}, },
handleMentionClick () { handleMentionClick () {
this.props.onMention(this.props.status.get('account')); this.props.onMention(this.props.status.get('account'), this.context.router);
}, },
handleBlockClick () { handleBlockClick () {

View file

@ -15,6 +15,7 @@ import { blockAccount } from '../actions/accounts';
import { deleteStatus } from '../actions/statuses'; import { deleteStatus } from '../actions/statuses';
import { openMedia } from '../actions/modal'; import { openMedia } from '../actions/modal';
import { createSelector } from 'reselect' import { createSelector } from 'reselect'
import { isMobile } from '../is_mobile'
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
statusBase: state.getIn(['statuses', props.id]), statusBase: state.getIn(['statuses', props.id]),
@ -86,8 +87,11 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(deleteStatus(status.get('id'))); dispatch(deleteStatus(status.get('id')));
}, },
onMention (account) { onMention (account, router) {
dispatch(mentionCompose(account)); dispatch(mentionCompose(account));
if (isMobile(window.innerWidth)) {
router.push('/statuses/new');
}
}, },
onOpenMedia (url) { onOpenMedia (url) {

View file

@ -20,6 +20,7 @@ import LoadingIndicator from '../../components/loading_indicator';
import ActionBar from './components/action_bar'; import ActionBar from './components/action_bar';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
import ColumnBackButton from '../../components/column_back_button'; import ColumnBackButton from '../../components/column_back_button';
import { isMobile } from '../../is_mobile'
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
const getAccount = makeGetAccount(); const getAccount = makeGetAccount();
@ -34,6 +35,10 @@ const makeMapStateToProps = () => {
const Account = React.createClass({ const Account = React.createClass({
contextTypes: {
router: React.PropTypes.object
},
propTypes: { propTypes: {
params: React.PropTypes.object.isRequired, params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired, dispatch: React.PropTypes.func.isRequired,
@ -71,6 +76,9 @@ const Account = React.createClass({
handleMention () { handleMention () {
this.props.dispatch(mentionCompose(this.props.account)); this.props.dispatch(mentionCompose(this.props.account));
if (isMobile(window.innerWidth)) {
this.context.router.push('/statuses/new');
}
}, },
render () { render () {

View file

@ -23,6 +23,7 @@ import { ScrollContainer } from 'react-router-scroll';
import ColumnBackButton from '../../components/column_back_button'; import ColumnBackButton from '../../components/column_back_button';
import StatusContainer from '../../containers/status_container'; import StatusContainer from '../../containers/status_container';
import { openMedia } from '../../actions/modal'; import { openMedia } from '../../actions/modal';
import { isMobile } from '../../is_mobile'
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
@ -80,6 +81,9 @@ const Status = React.createClass({
handleMentionClick (account) { handleMentionClick (account) {
this.props.dispatch(mentionCompose(account)); this.props.dispatch(mentionCompose(account));
if (isMobile(window.innerWidth)) {
this.context.router.push('/statuses/new');
}
}, },
handleOpenMedia (url) { handleOpenMedia (url) {

View file

@ -11,6 +11,7 @@ import Notifications from '../notifications';
import { debounce } from 'react-decoration'; import { debounce } from 'react-decoration';
import { uploadCompose } from '../../actions/compose'; import { uploadCompose } from '../../actions/compose';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { isMobile } from '../../is_mobile'
const UI = React.createClass({ const UI = React.createClass({
@ -64,11 +65,9 @@ const UI = React.createClass({
}, },
render () { render () {
const layoutBreakpoint = 1024;
let mountedColumns; let mountedColumns;
if (this.state.width <= layoutBreakpoint) { if (isMobile(this.state.width)) {
mountedColumns = ( mountedColumns = (
<ColumnsArea> <ColumnsArea>
{this.props.children} {this.props.children}

View file

@ -0,0 +1,5 @@
const LAYOUT_BREAKPOINT = 1024;
export function isMobile(width) {
return width <= LAYOUT_BREAKPOINT;
};