bigbuffet-rw/app/soapbox/features/preferences/index.js

144 lines
4.4 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
2020-04-16 14:13:22 -07:00
import ImmutablePropTypes from 'react-immutable-proptypes';
2020-05-28 15:52:07 -07:00
import { changeSetting } from 'soapbox/actions/settings';
import Column from '../ui/components/column';
2020-04-20 18:20:07 -07:00
import {
SimpleForm,
FieldsGroup,
RadioGroup,
RadioItem,
2020-04-20 18:33:27 -07:00
SelectDropdown,
2020-05-28 15:52:07 -07:00
} from 'soapbox/features/forms';
2020-04-20 17:33:19 -07:00
import SettingsCheckbox from './components/settings_checkbox';
const messages = defineMessages({
heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
});
2020-04-16 14:13:22 -07:00
const mapStateToProps = state => ({
settings: state.get('settings'),
});
export default @connect(mapStateToProps)
@injectIntl
class Preferences extends ImmutablePureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
2020-04-16 14:13:22 -07:00
settings: ImmutablePropTypes.map,
};
2020-06-04 16:32:46 -07:00
onSelectChange = path => {
return e => {
this.props.dispatch(changeSetting(path, e.target.value));
};
};
2020-04-16 14:13:22 -07:00
onDefaultPrivacyChange = e => {
const { dispatch } = this.props;
dispatch(changeSetting(['defaultPrivacy'], e.target.value));
}
render() {
2020-04-16 14:13:22 -07:00
const { settings, intl } = this.props;
return (
2020-04-21 17:24:57 -07:00
<Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
2020-04-20 18:20:07 -07:00
<SimpleForm>
2020-04-20 17:33:19 -07:00
<FieldsGroup>
2020-04-20 18:33:27 -07:00
<SelectDropdown
2020-06-04 16:32:46 -07:00
label='Theme'
2020-06-02 10:16:26 -07:00
items={{ light: 'Light', dark: 'Dark' }}
defaultValue={settings.get('themeMode')}
2020-06-04 16:32:46 -07:00
onChange={this.onSelectChange(['themeMode'])}
/>
</FieldsGroup>
<FieldsGroup>
<SelectDropdown
label='Language'
items={{ en: 'English', es: 'Español', fr: 'Français' }}
defaultValue={settings.get('language')}
onChange={this.onSelectChange(['locale'])}
2020-04-20 18:33:27 -07:00
/>
2020-04-20 17:33:19 -07:00
</FieldsGroup>
2020-04-20 16:52:33 -07:00
2020-04-20 17:33:19 -07:00
<FieldsGroup>
2020-04-20 18:20:07 -07:00
<RadioGroup label='Post privacy' onChange={this.onDefaultPrivacyChange}>
<RadioItem
label='Public'
hint='Everyone can see'
checked={settings.get('defaultPrivacy') === 'public'}
value='public'
/>
<RadioItem
label='Unlisted'
hint='Everyone can see, but not listed on public timelines'
checked={settings.get('defaultPrivacy') === 'unlisted'}
value='unlisted'
/>
<RadioItem
label='Followers-only'
hint='Only show to followers'
checked={settings.get('defaultPrivacy') === 'private'}
value='private'
/>
</RadioGroup>
2020-04-20 17:33:19 -07:00
</FieldsGroup>
<FieldsGroup>
<SettingsCheckbox
label='Show confirmation dialog before unfollowing someone'
path={['unfollowModal']}
/>
<SettingsCheckbox
label='Show confirmation dialog before reposting'
path={['boostModal']}
/>
<SettingsCheckbox
label='Show confirmation dialog before deleting a post'
path={['deleteModal']}
/>
</FieldsGroup>
2020-04-20 18:56:32 -07:00
<FieldsGroup>
<SettingsCheckbox
label='Auto-play animated GIFs'
path={['autoPlayGif']}
/>
<SettingsCheckbox
label='Always expand posts marked with content warnings'
path={['expandSpoilers']}
/>
<SettingsCheckbox
label='Reduce motion in animations'
path={['reduceMotion']}
/>
2020-04-21 13:05:49 -07:00
<SettingsCheckbox
label="Use system's default font"
path={['systemFont']}
/>
2020-04-21 13:10:45 -07:00
<div className='dyslexic'>
<SettingsCheckbox
label='Dyslexic mode'
path={['dyslexicFont']}
/>
</div>
2020-04-21 13:14:06 -07:00
<SettingsCheckbox
label='Use Demetricator'
hint='Decrease social media anxiety by hiding all numbers from the site.'
path={['demetricator']}
/>
2020-04-20 18:56:32 -07:00
</FieldsGroup>
2020-04-20 17:33:19 -07:00
</SimpleForm>
2020-04-16 14:13:22 -07:00
</Column>
);
}
}