diff options
Diffstat (limited to 'app/assets/javascripts/components/features')
-rw-r--r-- | app/assets/javascripts/components/features/compose/components/compose_form.jsx | 31 | ||||
-rw-r--r-- | app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx | 11 |
2 files changed, 35 insertions, 7 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index 6a0e6778d..760b0efd1 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -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> ); } diff --git a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx index 885d7a47f..1d8f20ca7 100644 --- a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx +++ b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx @@ -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)); } } }; |