sforkowany z mirror/soapbox
Theme mode set in Preferences
rodzic
6f8ca44984
commit
c4a2a86618
|
@ -20,7 +20,7 @@ const defaultSettings = ImmutableMap({
|
|||
boostModal: false,
|
||||
deleteModal: true,
|
||||
defaultPrivacy: 'public',
|
||||
theme: 'azure',
|
||||
themeMode: 'light',
|
||||
// locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales
|
||||
locale: 'en',
|
||||
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
import api from '../api';
|
||||
import { get } from 'lodash';
|
||||
import { generateTheme } from 'soapbox/actions/theme';
|
||||
|
||||
export const SOAPBOX_CONFIG_IMPORT = 'SOAPBOX_CONFIG_IMPORT';
|
||||
export const SOAPBOX_CONFIG_FAIL = 'SOAPBOX_CONFIG_FAIL';
|
||||
|
@ -8,9 +6,7 @@ export const SOAPBOX_CONFIG_FAIL = 'SOAPBOX_CONFIG_FAIL';
|
|||
export function fetchSoapboxConfig() {
|
||||
return (dispatch, getState) => {
|
||||
api(getState).get('/instance/soapbox.json').then(response => {
|
||||
const { brandColor, mode } = get(response.data, 'theme');
|
||||
dispatch(importSoapboxConfig(response.data));
|
||||
dispatch(generateTheme(brandColor, mode));
|
||||
}).catch(error => {
|
||||
dispatch(soapboxConfigFail(error));
|
||||
});
|
||||
|
|
|
@ -24,6 +24,7 @@ import { fetchMe } from 'soapbox/actions/me';
|
|||
import PublicLayout from 'soapbox/features/public_layout';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { themeDataToCss } from 'soapbox/utils/theme';
|
||||
import { generateTheme } from 'soapbox/actions/theme';
|
||||
|
||||
export const store = configureStore();
|
||||
const hydrateAction = hydrateStore(initialState);
|
||||
|
@ -49,6 +50,8 @@ const mapStateToProps = (state) => {
|
|||
demetricator: settings.get('demetricator'),
|
||||
locale: settings.get('locale'),
|
||||
themeCss: themeDataToCss(state.get('theme')),
|
||||
themeMode: settings.get('themeMode'),
|
||||
brandColor: state.getIn(['soapbox', 'brandColor']),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -64,9 +67,25 @@ class SoapboxMount extends React.PureComponent {
|
|||
demetricator: PropTypes.bool,
|
||||
locale: PropTypes.string.isRequired,
|
||||
themeCss: PropTypes.string,
|
||||
brandColor: PropTypes.string,
|
||||
themeMode: PropTypes.string,
|
||||
dispatch: PropTypes.func,
|
||||
};
|
||||
|
||||
maybeUpdateTheme = prevProps => {
|
||||
const updates = [
|
||||
this.props.brandColor !== prevProps.brandColor,
|
||||
this.props.themeMode !== prevProps.themeMode,
|
||||
];
|
||||
if (updates.some(u => u)) this.props.dispatch(
|
||||
generateTheme(this.props.brandColor, this.props.themeMode)
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
this.maybeUpdateTheme(prevProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { me, themeCss, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
|
||||
if (me === null) return null;
|
||||
|
|
|
@ -19,12 +19,6 @@ const messages = defineMessages({
|
|||
heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
|
||||
});
|
||||
|
||||
// TODO: Pull dynamically
|
||||
const themes = {
|
||||
'azure': 'Light',
|
||||
'purple-dark': 'Dark',
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.get('settings'),
|
||||
});
|
||||
|
@ -41,7 +35,7 @@ class Preferences extends ImmutablePureComponent {
|
|||
|
||||
onThemeChange = e => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch(changeSetting(['theme'], e.target.value));
|
||||
dispatch(changeSetting(['themeMode'], e.target.value));
|
||||
}
|
||||
|
||||
onDefaultPrivacyChange = e => {
|
||||
|
@ -57,9 +51,9 @@ class Preferences extends ImmutablePureComponent {
|
|||
<SimpleForm>
|
||||
<FieldsGroup>
|
||||
<SelectDropdown
|
||||
label='Site theme'
|
||||
items={themes}
|
||||
defaultValue={settings.get('theme')}
|
||||
label='Theme mode'
|
||||
items={{ light: 'Light', dark: 'Dark' }}
|
||||
defaultValue={settings.get('themeMode')}
|
||||
onChange={this.onThemeChange}
|
||||
/>
|
||||
</FieldsGroup>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"logo": "https://media.gleasonator.com/site_uploads/files/000/000/002/original/logo.svg",
|
||||
"brandColor": "#0482d8",
|
||||
"promoPanel": {
|
||||
"items": [{
|
||||
"icon": "area-chart",
|
||||
|
@ -16,7 +17,7 @@
|
|||
},
|
||||
"defaultSettings": {
|
||||
"autoPlayGif": false,
|
||||
"theme": "azure"
|
||||
"themeMode": "light"
|
||||
},
|
||||
"copyright": "♡2020. Copying is an act of love. Please copy and share.",
|
||||
"navlinks": {
|
||||
|
|
Ładowanie…
Reference in New Issue