|
|
@ -1,5 +1,6 @@
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
|
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
|
|
|
|
|
|
|
|
import { updateSoapboxConfig } from 'soapbox/actions/admin';
|
|
|
|
import { updateSoapboxConfig } from 'soapbox/actions/admin';
|
|
|
|
import { getHost } from 'soapbox/actions/instance';
|
|
|
|
import { getHost } from 'soapbox/actions/instance';
|
|
|
@ -30,6 +31,7 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
|
|
|
|
|
|
|
|
|
|
|
|
const [colors, setColors] = useState(soapbox.colors.toJS() as any);
|
|
|
|
const [colors, setColors] = useState(soapbox.colors.toJS() as any);
|
|
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
|
|
|
|
const [resetKey, setResetKey] = useState(uuidv4());
|
|
|
|
|
|
|
|
|
|
|
|
const updateColors = (key: string) => {
|
|
|
|
const updateColors = (key: string) => {
|
|
|
|
return (newColors: ColorGroup) => {
|
|
|
|
return (newColors: ColorGroup) => {
|
|
|
@ -43,6 +45,11 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const resetTheme = () => {
|
|
|
|
|
|
|
|
setResetKey(uuidv4());
|
|
|
|
|
|
|
|
setTimeout(() => setColors(soapbox.colors.toJS() as any));
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const updateTheme = async () => {
|
|
|
|
const updateTheme = async () => {
|
|
|
|
const params = rawConfig.set('colors', colors).toJS();
|
|
|
|
const params = rawConfig.set('colors', colors).toJS();
|
|
|
|
await dispatch(updateSoapboxConfig(params));
|
|
|
|
await dispatch(updateSoapboxConfig(params));
|
|
|
@ -69,40 +76,50 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
|
|
|
|
label='Primary'
|
|
|
|
label='Primary'
|
|
|
|
palette={colors.primary}
|
|
|
|
palette={colors.primary}
|
|
|
|
onChange={updateColors('primary')}
|
|
|
|
onChange={updateColors('primary')}
|
|
|
|
|
|
|
|
resetKey={resetKey}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PaletteListItem
|
|
|
|
<PaletteListItem
|
|
|
|
label='Secondary'
|
|
|
|
label='Secondary'
|
|
|
|
palette={colors.secondary}
|
|
|
|
palette={colors.secondary}
|
|
|
|
onChange={updateColors('secondary')}
|
|
|
|
onChange={updateColors('secondary')}
|
|
|
|
|
|
|
|
resetKey={resetKey}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PaletteListItem
|
|
|
|
<PaletteListItem
|
|
|
|
label='Accent'
|
|
|
|
label='Accent'
|
|
|
|
palette={colors.accent}
|
|
|
|
palette={colors.accent}
|
|
|
|
onChange={updateColors('accent')}
|
|
|
|
onChange={updateColors('accent')}
|
|
|
|
|
|
|
|
resetKey={resetKey}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PaletteListItem
|
|
|
|
<PaletteListItem
|
|
|
|
label='Gray'
|
|
|
|
label='Gray'
|
|
|
|
palette={colors.gray}
|
|
|
|
palette={colors.gray}
|
|
|
|
onChange={updateColors('gray')}
|
|
|
|
onChange={updateColors('gray')}
|
|
|
|
|
|
|
|
resetKey={resetKey}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PaletteListItem
|
|
|
|
<PaletteListItem
|
|
|
|
label='Success'
|
|
|
|
label='Success'
|
|
|
|
palette={colors.success}
|
|
|
|
palette={colors.success}
|
|
|
|
onChange={updateColors('success')}
|
|
|
|
onChange={updateColors('success')}
|
|
|
|
|
|
|
|
resetKey={resetKey}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PaletteListItem
|
|
|
|
<PaletteListItem
|
|
|
|
label='Danger'
|
|
|
|
label='Danger'
|
|
|
|
palette={colors.danger}
|
|
|
|
palette={colors.danger}
|
|
|
|
onChange={updateColors('danger')}
|
|
|
|
onChange={updateColors('danger')}
|
|
|
|
|
|
|
|
resetKey={resetKey}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</List>
|
|
|
|
</List>
|
|
|
|
|
|
|
|
|
|
|
|
<FormActions>
|
|
|
|
<FormActions>
|
|
|
|
|
|
|
|
<Button theme='secondary' onClick={resetTheme}>
|
|
|
|
|
|
|
|
<FormattedMessage id='theme_editor.Reset' defaultMessage='Reset' />
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
|
|
<Button type='submit' theme='primary' disabled={submitting}>
|
|
|
|
<Button type='submit' theme='primary' disabled={submitting}>
|
|
|
|
<FormattedMessage id='theme_editor.save' defaultMessage='Save theme' />
|
|
|
|
<FormattedMessage id='theme_editor.save' defaultMessage='Save theme' />
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
@ -116,13 +133,14 @@ interface IPaletteListItem {
|
|
|
|
label: React.ReactNode,
|
|
|
|
label: React.ReactNode,
|
|
|
|
palette: ColorGroup,
|
|
|
|
palette: ColorGroup,
|
|
|
|
onChange: (palette: ColorGroup) => void,
|
|
|
|
onChange: (palette: ColorGroup) => void,
|
|
|
|
|
|
|
|
resetKey?: string,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/** Palette editor inside a ListItem. */
|
|
|
|
/** Palette editor inside a ListItem. */
|
|
|
|
const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange }) => {
|
|
|
|
const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey }) => {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ListItem label={<div className='w-20'>{label}</div>}>
|
|
|
|
<ListItem label={<div className='w-20'>{label}</div>}>
|
|
|
|
<Palette palette={palette} onChange={onChange} />
|
|
|
|
<Palette palette={palette} onChange={onChange} resetKey={resetKey} />
|
|
|
|
</ListItem>
|
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|