Local-only option and dropdown all working
parent
d7405f4ced
commit
3f7c0b66f4
|
@ -24,6 +24,7 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
|
||||||
export const COMPOSE_MOUNT = 'COMPOSE_MOUNT';
|
export const COMPOSE_MOUNT = 'COMPOSE_MOUNT';
|
||||||
export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
|
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_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
|
||||||
export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
|
export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
|
||||||
export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_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() {
|
export function changeComposeSensitivity() {
|
||||||
return {
|
return {
|
||||||
type: COMPOSE_SENSITIVITY_CHANGE,
|
type: COMPOSE_SENSITIVITY_CHANGE,
|
||||||
|
|
|
@ -1,12 +1,30 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import IconButton from '../../../components/icon_button';
|
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 = {
|
const iconStyle = {
|
||||||
height: null,
|
height: null,
|
||||||
lineHeight: '27px',
|
lineHeight: '27px',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@injectIntl
|
||||||
export default class AdvancedOptionsDropdown extends React.PureComponent {
|
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 = () => {
|
onToggleDropdown = () => {
|
||||||
this.setState({ open: !this.state.open });
|
this.setState({ open: !this.state.open });
|
||||||
};
|
};
|
||||||
|
@ -31,30 +49,43 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
|
||||||
open: false,
|
open: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleClick = (e) => {
|
||||||
|
const option = e.currentTarget.getAttribute('data-index');
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.onChange(option);
|
||||||
|
}
|
||||||
|
|
||||||
setRef = (c) => {
|
setRef = (c) => {
|
||||||
this.node = c;
|
this.node = c;
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { open } = this.state;
|
const { open } = this.state;
|
||||||
|
const { intl, values } = this.props;
|
||||||
|
|
||||||
const options = [
|
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) => {
|
const optionElems = options.map((option) => {
|
||||||
return <div role='button' className='advanced-options-dropdown__option'>
|
const active = values.get(option.key) ? 'active' : '';
|
||||||
<div className='advanced-options-dropdown__option__icon'>
|
return (
|
||||||
<IconButton icon={option.icon} />
|
<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>
|
||||||
<div className='advanced-options-dropdown__option__content'>
|
);
|
||||||
<strong>{option.shortText}</strong>
|
|
||||||
{option.longText}
|
|
||||||
</div>
|
|
||||||
</div>;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}>
|
return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}>
|
||||||
<div className='advanced-options-dropdown__value'>
|
<div className='advanced-options-dropdown__value'>
|
||||||
<IconButton className='advanced-options-dropdown__value'
|
<IconButton className='advanced-options-dropdown__value'
|
||||||
|
title={intl.formatMessage(messages.advanced_options_icon_title)}
|
||||||
icon='ellipsis-h' active={open}
|
icon='ellipsis-h' active={open}
|
||||||
size={18} inverted
|
size={18} inverted
|
||||||
style={iconStyle}
|
style={iconStyle}
|
||||||
|
|
|
@ -36,6 +36,9 @@ export default class ComposeForm extends ImmutablePureComponent {
|
||||||
suggestions: ImmutablePropTypes.list,
|
suggestions: ImmutablePropTypes.list,
|
||||||
spoiler: PropTypes.bool,
|
spoiler: PropTypes.bool,
|
||||||
privacy: PropTypes.string,
|
privacy: PropTypes.string,
|
||||||
|
advanced_options: ImmutablePropTypes.contains({
|
||||||
|
do_not_federate: PropTypes.bool,
|
||||||
|
}),
|
||||||
spoiler_text: PropTypes.string,
|
spoiler_text: PropTypes.string,
|
||||||
focusDate: PropTypes.instanceOf(Date),
|
focusDate: PropTypes.instanceOf(Date),
|
||||||
preselectDate: PropTypes.instanceOf(Date),
|
preselectDate: PropTypes.instanceOf(Date),
|
||||||
|
|
|
@ -1,3 +1,17 @@
|
||||||
|
import { connect } from 'react-redux';
|
||||||
import AdvancedOptionsDropdown from '../components/advanced_options_dropdown';
|
import AdvancedOptionsDropdown from '../components/advanced_options_dropdown';
|
||||||
|
import { changeComposeAdvancedOption } from '../../../actions/compose';
|
||||||
|
|
||||||
export default AdvancedOptionsDropdown;
|
const mapStateToProps = state => ({
|
||||||
|
values: state.getIn(['compose', 'advanced_options']),
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({
|
||||||
|
|
||||||
|
onChange (option) {
|
||||||
|
dispatch(changeComposeAdvancedOption(option));
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(AdvancedOptionsDropdown);
|
|
@ -15,6 +15,7 @@ const mapStateToProps = state => ({
|
||||||
text: state.getIn(['compose', 'text']),
|
text: state.getIn(['compose', 'text']),
|
||||||
suggestion_token: state.getIn(['compose', 'suggestion_token']),
|
suggestion_token: state.getIn(['compose', 'suggestion_token']),
|
||||||
suggestions: state.getIn(['compose', 'suggestions']),
|
suggestions: state.getIn(['compose', 'suggestions']),
|
||||||
|
advanced_options: state.getIn(['compose', 'advanced_options']),
|
||||||
spoiler: state.getIn(['compose', 'spoiler']),
|
spoiler: state.getIn(['compose', 'spoiler']),
|
||||||
spoiler_text: state.getIn(['compose', 'spoiler_text']),
|
spoiler_text: state.getIn(['compose', 'spoiler_text']),
|
||||||
privacy: state.getIn(['compose', 'privacy']),
|
privacy: state.getIn(['compose', 'privacy']),
|
||||||
|
|
|
@ -16,6 +16,7 @@ import {
|
||||||
COMPOSE_SUGGESTIONS_CLEAR,
|
COMPOSE_SUGGESTIONS_CLEAR,
|
||||||
COMPOSE_SUGGESTIONS_READY,
|
COMPOSE_SUGGESTIONS_READY,
|
||||||
COMPOSE_SUGGESTION_SELECT,
|
COMPOSE_SUGGESTION_SELECT,
|
||||||
|
COMPOSE_ADVANCED_OPTIONS_CHANGE,
|
||||||
COMPOSE_SENSITIVITY_CHANGE,
|
COMPOSE_SENSITIVITY_CHANGE,
|
||||||
COMPOSE_SPOILERNESS_CHANGE,
|
COMPOSE_SPOILERNESS_CHANGE,
|
||||||
COMPOSE_SPOILER_TEXT_CHANGE,
|
COMPOSE_SPOILER_TEXT_CHANGE,
|
||||||
|
@ -29,6 +30,9 @@ import uuid from '../uuid';
|
||||||
|
|
||||||
const initialState = Immutable.Map({
|
const initialState = Immutable.Map({
|
||||||
mounted: false,
|
mounted: false,
|
||||||
|
advanced_options: Immutable.Map({
|
||||||
|
do_not_federate: false
|
||||||
|
}),
|
||||||
sensitive: false,
|
sensitive: false,
|
||||||
spoiler: false,
|
spoiler: false,
|
||||||
spoiler_text: '',
|
spoiler_text: '',
|
||||||
|
@ -140,6 +144,11 @@ export default function compose(state = initialState, action) {
|
||||||
return state.set('mounted', true);
|
return state.set('mounted', true);
|
||||||
case COMPOSE_UNMOUNT:
|
case COMPOSE_UNMOUNT:
|
||||||
return state.set('mounted', false);
|
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:
|
case COMPOSE_SENSITIVITY_CHANGE:
|
||||||
return state
|
return state
|
||||||
.set('sensitive', !state.get('sensitive'))
|
.set('sensitive', !state.get('sensitive'))
|
||||||
|
|
Loading…
Reference in New Issue