Theme mode set in Preferences

stable/1.0.x
Alex Gleason 2020-06-02 12:16:26 -05:00
rodzic 6f8ca44984
commit c4a2a86618
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
5 zmienionych plików z 26 dodań i 16 usunięć

Wyświetl plik

@ -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',

Wyświetl plik

@ -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));
});

Wyświetl plik

@ -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;

Wyświetl plik

@ -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>

Wyświetl plik

@ -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": {