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 () {
this.props.onMention(this.props.status.get('account'));
this.props.onMention(this.props.status.get('account'), this.context.router);
},
handleBlockClick () {

View file

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

View file

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

View file

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

View file

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

View file

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