bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SoapboxConfig: link to theme editor

Browse source
This commit is contained in:
Alex Gleason 2022-12-17 13:10:59 -06:00
parent f906558dba
commit 819e03073b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 8 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/soapbox/features/soapbox-config/index.tsx
View file

@ -1,6 +1,7 @@
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
import React, { useState, useEffect, useMemo } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { useHistory } from 'react-router-dom';
import { updateSoapboxConfig } from 'soapbox/actions/admin';
import { uploadMedia } from 'soapbox/actions/media';
@ -25,14 +26,11 @@ import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
import ColorWithPicker from './components/color-with-picker';
import CryptoAddressInput from './components/crypto-address-input';
import FooterLinkInput from './components/footer-link-input';
import PromoPanelInput from './components/promo-panel-input';
import SitePreview from './components/site-preview';
import type { ColorChangeHandler, ColorResult } from 'react-color';
const messages = defineMessages({
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
@ -59,7 +57,6 @@ const messages = defineMessages({
});
type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
type ColorValueGetter = (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => any;
type Template = ImmutableMap<string, any>;
type ConfigPath = Array<string | number>;
type ThemeChangeHandler = (theme: string) => void;
@ -72,6 +69,7 @@ const templates: Record<string, Template> = {
const SoapboxConfig: React.FC = () => {
const intl = useIntl();
const history = useHistory();
const dispatch = useAppDispatch();
const features = useFeatures();
@ -84,6 +82,8 @@ const SoapboxConfig: React.FC = () => {
const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(initialData, null, 2));
const [jsonValid, setJsonValid] = useState(true);
const navigateToThemeEditor = () => history.push('/soapbox/admin/theme');
const soapbox = useMemo(() => {
return normalizeSoapboxConfig(data);
}, [data]);
@ -122,12 +122,6 @@ const SoapboxConfig: React.FC = () => {
};
};
const handleColorChange = (path: ConfigPath, getValue: ColorValueGetter): ColorChangeHandler => {
return (color, event) => {
setConfig(path, getValue(color, event));
};
};
const handleFileChange = (path: ConfigPath): React.ChangeEventHandler<HTMLInputElement> => {
return e => {
const data = new FormData();
@ -214,21 +208,10 @@ const SoapboxConfig: React.FC = () => {
/>
</ListItem>
<ListItem label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}>
<ColorWithPicker
className='w-8 h-8 rounded-md overflow-hidden'
value={soapbox.brandColor}
onChange={handleColorChange(['brandColor'], (color) => color.hex)}
/>
</ListItem>
<ListItem label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}>
<ColorWithPicker
className='w-8 h-8 rounded-md overflow-hidden'
value={soapbox.accentColor}
onChange={handleColorChange(['accentColor'], (color) => color.hex)}
/>
</ListItem>
<ListItem
label={<FormattedMessage id='soapbox_config.fields.edit_theme_label' defaultMessage='Edit theme' />}
onClick={navigateToThemeEditor}
/>
</List>
<CardHeader>