diff options
6 files changed, 76 insertions, 10 deletions
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 647a52b93..569ddf53e 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -24,6 +24,7 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT'; export const COMPOSE_MOUNT = 'COMPOSE_MOUNT'; export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT'; +export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE'; export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE'; export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE'; export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE'; @@ -244,6 +245,13 @@ export function unmountCompose() { }; }; +export function changeComposeAdvancedOption(option) { + return { + type: COMPOSE_ADVANCED_OPTIONS_CHANGE, + option: option, + }; +} + export function changeComposeSensitivity() { return { type: COMPOSE_SENSITIVITY_CHANGE, diff --git a/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js index 35a340565..904e88477 100644 --- a/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js @@ -1,12 +1,30 @@ import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import IconButton from '../../../components/icon_button'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + local_only_short: { id: 'advanced-options.local-only.short', defaultMessage: 'Local-only'}, + local_only_long: { id: 'advanced-options.local-only.long', defaultMessage: 'bla' }, + advanced_options_icon_title: { id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' }, +}); const iconStyle = { height: null, lineHeight: '27px', }; +@injectIntl export default class AdvancedOptionsDropdown extends React.PureComponent { + static propTypes = { + values: ImmutablePropTypes.contains({ + do_not_federate: PropTypes.bool.isRequired, + }).isRequired, + onChange: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + onToggleDropdown = () => { this.setState({ open: !this.state.open }); }; @@ -31,30 +49,43 @@ export default class AdvancedOptionsDropdown extends React.PureComponent { open: false, }; + handleClick = (e) => { + const option = e.currentTarget.getAttribute('data-index'); + e.preventDefault(); + this.props.onChange(option); + } + setRef = (c) => { this.node = c; } render () { const { open } = this.state; + const { intl, values } = this.props; const options = [ - { icon: 'wifi', shortText: 'Local-only', longText: 'bla' }, + { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' }, ]; const optionElems = options.map((option) => { - return <div role='button' className='advanced-options-dropdown__option'> - <div className='advanced-options-dropdown__option__icon'> - <IconButton icon={option.icon} /> - </div> - <div className='advanced-options-dropdown__option__content'> - <strong>{option.shortText}</strong> - {option.longText} + const active = values.get(option.key) ? 'active' : ''; + return ( + <div role='button' className={`advanced-options-dropdown__option ${active}`} + onClick={this.handleClick} data-index={option.key} key={option.key} > + <div className='advanced-options-dropdown__option__icon'> + <IconButton icon={option.icon} title={intl.formatMessage(option.shortText)} /> + </div> + <div className='advanced-options-dropdown__option__content'> + <strong>{intl.formatMessage(option.shortText)}</strong> + {intl.formatMessage(option.longText)} + </div> </div> - </div>; + ); }); + return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}> <div className='advanced-options-dropdown__value'> <IconButton className='advanced-options-dropdown__value' + title={intl.formatMessage(messages.advanced_options_icon_title)} icon='ellipsis-h' active={open} size={18} inverted style={iconStyle} diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 88ba0347a..3559e4c82 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -36,6 +36,9 @@ export default class ComposeForm extends ImmutablePureComponent { suggestions: ImmutablePropTypes.list, spoiler: PropTypes.bool, privacy: PropTypes.string, + advanced_options: ImmutablePropTypes.contains({ + do_not_federate: PropTypes.bool, + }), spoiler_text: PropTypes.string, focusDate: PropTypes.instanceOf(Date), preselectDate: PropTypes.instanceOf(Date), diff --git a/app/javascript/mastodon/features/compose/containers/advanced_options_container.js b/app/javascript/mastodon/features/compose/containers/advanced_options_container.js index 921436f66..01a9c9a72 100644 --- a/app/javascript/mastodon/features/compose/containers/advanced_options_container.js +++ b/app/javascript/mastodon/features/compose/containers/advanced_options_container.js @@ -1,3 +1,17 @@ +import { connect } from 'react-redux'; import AdvancedOptionsDropdown from '../components/advanced_options_dropdown'; +import { changeComposeAdvancedOption } from '../../../actions/compose'; -export default AdvancedOptionsDropdown; \ No newline at end of file +const mapStateToProps = state => ({ + values: state.getIn(['compose', 'advanced_options']), +}); + +const mapDispatchToProps = dispatch => ({ + + onChange (option) { + dispatch(changeComposeAdvancedOption(option)); + }, + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(AdvancedOptionsDropdown); \ No newline at end of file diff --git a/app/javascript/mastodon/features/compose/containers/compose_form_container.js b/app/javascript/mastodon/features/compose/containers/compose_form_container.js index 12d435ded..1911edbf9 100644 --- a/app/javascript/mastodon/features/compose/containers/compose_form_container.js +++ b/app/javascript/mastodon/features/compose/containers/compose_form_container.js @@ -15,6 +15,7 @@ const mapStateToProps = state => ({ text: state.getIn(['compose', 'text']), suggestion_token: state.getIn(['compose', 'suggestion_token']), suggestions: state.getIn(['compose', 'suggestions']), + advanced_options: state.getIn(['compose', 'advanced_options']), spoiler: state.getIn(['compose', 'spoiler']), spoiler_text: state.getIn(['compose', 'spoiler_text']), privacy: state.getIn(['compose', 'privacy']), diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index d0b47a85c..9713f5ed9 100644 --- a/app/javascript/mastodon/reducers/compose.js +++ b/app/javascript/mastodon/reducers/compose.js @@ -16,6 +16,7 @@ import { COMPOSE_SUGGESTIONS_CLEAR, COMPOSE_SUGGESTIONS_READY, COMPOSE_SUGGESTION_SELECT, + COMPOSE_ADVANCED_OPTIONS_CHANGE, COMPOSE_SENSITIVITY_CHANGE, COMPOSE_SPOILERNESS_CHANGE, COMPOSE_SPOILER_TEXT_CHANGE, @@ -29,6 +30,9 @@ import uuid from '../uuid'; const initialState = Immutable.Map({ mounted: false, + advanced_options: Immutable.Map({ + do_not_federate: false + }), sensitive: false, spoiler: false, spoiler_text: '', @@ -140,6 +144,11 @@ export default function compose(state = initialState, action) { return state.set('mounted', true); case COMPOSE_UNMOUNT: return state.set('mounted', false); + case COMPOSE_ADVANCED_OPTIONS_CHANGE: + return state + .set('advanced_options', + state.get('advanced_options').set(action.option, !state.getIn(['advanced_options', action.option]))) + .set('idempotencyKey', uuid()); case COMPOSE_SENSITIVITY_CHANGE: return state .set('sensitive', !state.get('sensitive')) |