CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

Hide unlisted toggle when private is active, hide nsfw toggle when no files added

Browse Source
This commit is contained in:
Eugen Rochko 2016-12-24 01:22:47 +01:00
parent 538d109a82
commit 0bc6da89d2
3 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/components/actions/compose.jsx
View File

@ -24,7 +24,7 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE'; export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
export const COMPOSE_VISIBILITY_CHANGE = 'COMPOSE_VISIBILITY_CHANGE'; export const COMPOSE_VISIBILITY_CHANGE = 'COMPOSE_VISIBILITY_CHANGE';
export const COMPOSE_LISTABILITY_CHANGE = 'COMPOSE_LISTABILITY_CHANGE'; export const COMPOSE_LISTABILITY_CHANGE = 'COMPOSE_LISTABILITY_CHANGE';
export function changeCompose(text) { export function changeCompose(text) {
return { return {
@ -75,7 +75,7 @@ export function submitCompose() {
// To make the app more responsive, immediately get the status into the columns // To make the app more responsive, immediately get the status into the columns
dispatch(updateTimeline('home', { ...response.data })); 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 })); dispatch(updateTimeline('public', { ...response.data }));
} }
}).catch(function (error) { }).catch(function (error) {

31
app/assets/javascripts/components/features/compose/components/compose_form.jsx
View File

@ -10,6 +10,7 @@ import { debounce } from 'react-decoration';
import UploadButtonContainer from '../containers/upload_button_container'; import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { Motion, spring } from 'react-motion';
const messages = defineMessages({ const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@ -24,9 +25,11 @@ const ComposeForm = React.createClass({
suggestions: ImmutablePropTypes.list, suggestions: ImmutablePropTypes.list,
sensitive: React.PropTypes.bool, sensitive: React.PropTypes.bool,
unlisted: React.PropTypes.bool, unlisted: React.PropTypes.bool,
private: React.PropTypes.bool,
is_submitting: React.PropTypes.bool, is_submitting: React.PropTypes.bool,
is_uploading: React.PropTypes.bool, is_uploading: React.PropTypes.bool,
in_reply_to: ImmutablePropTypes.map, in_reply_to: ImmutablePropTypes.map,
media_count: React.PropTypes.number,
onChange: React.PropTypes.func.isRequired, onChange: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired, onSubmit: React.PropTypes.func.isRequired,
onCancelReply: React.PropTypes.func.isRequired, onCancelReply: React.PropTypes.func.isRequired,
@ -74,7 +77,7 @@ const ComposeForm = React.createClass({
handleChangeVisibility (e) { handleChangeVisibility (e) {
this.props.onChangeVisibility(e.target.checked); this.props.onChangeVisibility(e.target.checked);
}, },
handleChangeListability (e) { handleChangeListability (e) {
this.props.onChangeListability(e.target.checked); this.props.onChangeListability(e.target.checked);
}, },
@ -125,18 +128,24 @@ const ComposeForm = React.createClass({
<Toggle checked={this.props.private} onChange={this.handleChangeVisibility} /> <Toggle checked={this.props.private} onChange={this.handleChangeVisibility} />
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span> <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>
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #282c37', paddingTop: '10px' }}>
<Toggle checked={this.props.private} 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>
<span style={{ display: 'block', verticalAlign: 'middle', marginTop: '10px', marginBottom: '10px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.unlisted_caveat' defaultMessage='(Private posts will never display in public timeline.)' /></span> <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>
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle' }}> <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) }}>
<Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} /> {({ opacity, height }) =>
<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 style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}>
</label> <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> </div>
); );
} }

5
app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
View File

@ -26,7 +26,8 @@ const makeMapStateToProps = () => {
private: state.getIn(['compose', 'private']), private: state.getIn(['compose', 'private']),
is_submitting: state.getIn(['compose', 'is_submitting']), is_submitting: state.getIn(['compose', 'is_submitting']),
is_uploading: state.getIn(['compose', 'is_uploading']), 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
}; };
}; };
@ -66,7 +67,7 @@ const mapDispatchToProps = function (dispatch) {
onChangeVisibility (checked) { onChangeVisibility (checked) {
dispatch(changeComposeVisibility(checked)); dispatch(changeComposeVisibility(checked));
}, },
onChangeListability (checked) { onChangeListability (checked) {
dispatch(changeComposeListability(checked)); dispatch(changeComposeListability(checked));
} }