SoapboxConfig: add a default themeMode toggle

chats_delete_account
Alex Gleason 2020-10-01 19:33:03 -05:00
rodzic 93d2e83584
commit 3a0b58315f
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
5 zmienionych plików z 29 dodań i 20 usunięć

Wyświetl plik

@ -15,7 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
import { isStaff } from '../utils/accounts';
import { makeGetAccount } from '../selectors';
import { logOut } from 'soapbox/actions/auth';
import ThemeToggle from '../features/ui/components/theme_toggle';
import ThemeToggle from '../features/ui/components/theme_toggle_container';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },

Wyświetl plik

@ -24,6 +24,8 @@ import { isMobile } from 'soapbox/is_mobile';
import detectPassiveEvents from 'detect-passive-events';
import Accordion from '../ui/components/accordion';
import SitePreview from './components/site_preview';
import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
import { defaultSettings } from 'soapbox/actions/settings';
const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@ -186,6 +188,7 @@ class SoapboxConfig extends ImmutablePureComponent {
render() {
const { intl } = this.props;
const soapbox = this.getSoapboxConfig();
const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
return (
<Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
@ -201,6 +204,10 @@ class SoapboxConfig extends ImmutablePureComponent {
value={soapbox.get('brandColor')}
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
/>
<ThemeToggle
onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
settings={settings}
/>
</div>
<div className='fields-row__column fields-group fields-row__column-6'>
<FileChooserLogo

Wyświetl plik

@ -14,7 +14,7 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
import { openModal } from '../../../actions/modal';
import { openSidebar } from '../../../actions/sidebar';
import Icon from '../../../components/icon';
import ThemeToggle from '../../ui/components/theme_toggle';
import ThemeToggle from '../../ui/components/theme_toggle_container';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { isStaff } from 'soapbox/utils/accounts';

Wyświetl plik

@ -1,10 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { injectIntl, defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Icon from '../../../components/icon';
import { changeSetting, getSettings } from 'soapbox/actions/settings';
import SettingToggle from '../../notifications/components/setting_toggle';
const messages = defineMessages({
@ -12,31 +10,18 @@ const messages = defineMessages({
switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
});
const mapStateToProps = state => {
return {
settings: getSettings(state),
};
};
const mapDispatchToProps = (dispatch) => ({
toggleTheme(setting) {
dispatch(changeSetting(['themeMode'], setting));
},
});
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
export default @injectIntl
class ThemeToggle extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
settings: ImmutablePropTypes.map.isRequired,
toggleTheme: PropTypes.func,
onToggle: PropTypes.func.isRequired,
showLabel: PropTypes.bool,
};
handleToggleTheme = () => {
this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
this.props.onToggle(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
}
render() {

Wyświetl plik

@ -0,0 +1,17 @@
import { connect } from 'react-redux';
import { changeSetting, getSettings } from 'soapbox/actions/settings';
import ThemeToggle from './theme_toggle';
const mapStateToProps = state => {
return {
settings: getSettings(state),
};
};
const mapDispatchToProps = (dispatch) => ({
onToggle(setting) {
dispatch(changeSetting(['themeMode'], setting));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ThemeToggle);