Merge pull request #369 (nice)

This commit is contained in:
Eugen Rochko 2016-12-24 01:28:37 +01:00
commit 60f2da1b2f
4 changed files with 50 additions and 10 deletions

View file

@ -24,6 +24,7 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
export const COMPOSE_VISIBILITY_CHANGE = 'COMPOSE_VISIBILITY_CHANGE';
export const COMPOSE_LISTABILITY_CHANGE = 'COMPOSE_LISTABILITY_CHANGE';
export function changeCompose(text) {
return {
@ -67,14 +68,14 @@ export function submitCompose() {
in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')),
sensitive: getState().getIn(['compose', 'sensitive']),
visibility: getState().getIn(['compose', 'private']) ? 'private' : 'public'
visibility: getState().getIn(['compose', 'private']) ? 'private' : (getState().getIn(['compose', 'unlisted']) ? 'unlisted' : 'public')
}).then(function (response) {
dispatch(submitComposeSuccess({ ...response.data }));
// To make the app more responsive, immediately get the status into the columns
dispatch(updateTimeline('home', { ...response.data }));
if (response.data.in_reply_to_id === null && !getState().getIn(['compose', 'private'])) {
if (response.data.in_reply_to_id === null && !getState().getIn(['compose', 'private']) && !getState().getIn(['compose', 'unlisted'])) {
dispatch(updateTimeline('public', { ...response.data }));
}
}).catch(function (error) {
@ -223,3 +224,10 @@ export function changeComposeVisibility(checked) {
checked
};
};
export function changeComposeListability(checked) {
return {
type: COMPOSE_LISTABILITY_CHANGE,
checked
};
};

View file

@ -10,6 +10,7 @@ import { debounce } from 'react-decoration';
import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Toggle from 'react-toggle';
import { Motion, spring } from 'react-motion';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@ -24,9 +25,11 @@ const ComposeForm = React.createClass({
suggestions: ImmutablePropTypes.list,
sensitive: React.PropTypes.bool,
unlisted: React.PropTypes.bool,
private: React.PropTypes.bool,
is_submitting: React.PropTypes.bool,
is_uploading: React.PropTypes.bool,
in_reply_to: ImmutablePropTypes.map,
media_count: React.PropTypes.number,
onChange: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired,
onCancelReply: React.PropTypes.func.isRequired,
@ -34,7 +37,8 @@ const ComposeForm = React.createClass({
onFetchSuggestions: React.PropTypes.func.isRequired,
onSuggestionSelected: React.PropTypes.func.isRequired,
onChangeSensitivity: React.PropTypes.func.isRequired,
onChangeVisibility: React.PropTypes.func.isRequired
onChangeVisibility: React.PropTypes.func.isRequired,
onChangeListability: React.PropTypes.func.isRequired,
},
mixins: [PureRenderMixin],
@ -74,6 +78,10 @@ const ComposeForm = React.createClass({
this.props.onChangeVisibility(e.target.checked);
},
handleChangeListability (e) {
this.props.onChangeListability(e.target.checked);
},
componentDidUpdate (prevProps) {
if (prevProps.in_reply_to !== this.props.in_reply_to) {
this.autosuggestTextarea.textarea.focus();
@ -121,10 +129,23 @@ const ComposeForm = React.createClass({
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span>
</label>
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle' }}>
<Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark content as sensitive' /></span>
</label>
<Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.private ? 0 : 100), height: spring(this.props.private ? 0 : 39.5) }}>
{({ opacity, height }) =>
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
<Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} />
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.unlisted' defaultMessage='Do not display in public timeline' /></span>
</label>
}
</Motion>
<Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}>
{({ opacity, height }) =>
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
<Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.sensitive' defaultMessage='Mark content as sensitive' /></span>
</label>
}
</Motion>
</div>
);
}

View file

@ -8,7 +8,8 @@ import {
fetchComposeSuggestions,
selectComposeSuggestion,
changeComposeSensitivity,
changeComposeVisibility
changeComposeVisibility,
changeComposeListability
} from '../../../actions/compose';
import { makeGetStatus } from '../../../selectors';
@ -21,10 +22,12 @@ const makeMapStateToProps = () => {
suggestion_token: state.getIn(['compose', 'suggestion_token']),
suggestions: state.getIn(['compose', 'suggestions']),
sensitive: state.getIn(['compose', 'sensitive']),
unlisted: state.getIn(['compose', 'unlisted']),
private: state.getIn(['compose', 'private']),
is_submitting: state.getIn(['compose', 'is_submitting']),
is_uploading: state.getIn(['compose', 'is_uploading']),
in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to']))
in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
media_count: state.getIn(['compose', 'media_attachments']).size
};
};
@ -63,6 +66,10 @@ const mapDispatchToProps = function (dispatch) {
onChangeVisibility (checked) {
dispatch(changeComposeVisibility(checked));
},
onChangeListability (checked) {
dispatch(changeComposeListability(checked));
}
}
};

View file

@ -17,7 +17,8 @@ import {
COMPOSE_SUGGESTIONS_READY,
COMPOSE_SUGGESTION_SELECT,
COMPOSE_SENSITIVITY_CHANGE,
COMPOSE_VISIBILITY_CHANGE
COMPOSE_VISIBILITY_CHANGE,
COMPOSE_LISTABILITY_CHANGE
} from '../actions/compose';
import { TIMELINE_DELETE } from '../actions/timelines';
import { ACCOUNT_SET_SELF } from '../actions/accounts';
@ -26,6 +27,7 @@ import Immutable from 'immutable';
const initialState = Immutable.Map({
mounted: false,
sensitive: false,
unlisted: false,
private: false,
text: '',
in_reply_to: null,
@ -93,6 +95,8 @@ export default function compose(state = initialState, action) {
return state.set('sensitive', action.checked);
case COMPOSE_VISIBILITY_CHANGE:
return state.set('private', action.checked);
case COMPOSE_LISTABILITY_CHANGE:
return state.set('unlisted', action.checked);
case COMPOSE_CHANGE:
return state.set('text', action.text);
case COMPOSE_REPLY: