sforkowany z mirror/soapbox
ThemeEditor: configure single-color items
rodzic
ab70af31cd
commit
b71bb3966a
|
@ -9,12 +9,15 @@ import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
|
|||
import List, { ListItem } from 'soapbox/components/list';
|
||||
import { Button, Column, Form, FormActions } from 'soapbox/components/ui';
|
||||
import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
|
||||
import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
|
||||
import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
|
||||
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
|
||||
import { download } from 'soapbox/utils/download';
|
||||
|
||||
import Palette, { ColorGroup } from './components/palette';
|
||||
|
||||
import type { ColorChangeHandler } from 'react-color';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'admin.theme.title', defaultMessage: 'Theme' },
|
||||
saved: { id: 'theme_editor.saved', defaultMessage: 'Theme updated!' },
|
||||
|
@ -54,6 +57,15 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
|
|||
};
|
||||
};
|
||||
|
||||
const updateColor = (key: string) => {
|
||||
return (hex: string) => {
|
||||
setColors({
|
||||
...colors,
|
||||
[key]: hex,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const setTheme = (theme: any) => {
|
||||
setResetKey(uuidv4());
|
||||
setTimeout(() => setColors(theme));
|
||||
|
@ -153,6 +165,30 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
|
|||
onChange={updateColors('danger')}
|
||||
resetKey={resetKey}
|
||||
/>
|
||||
|
||||
<ColorListItem
|
||||
label='Greentext'
|
||||
value={colors.greentext}
|
||||
onChange={updateColor('greentext')}
|
||||
/>
|
||||
|
||||
<ColorListItem
|
||||
label='Accent Blue'
|
||||
value={colors['accent-blue']}
|
||||
onChange={updateColor('accent-blue')}
|
||||
/>
|
||||
|
||||
<ColorListItem
|
||||
label='Gradient Start'
|
||||
value={colors['gradient-start']}
|
||||
onChange={updateColor('gradient-start')}
|
||||
/>
|
||||
|
||||
<ColorListItem
|
||||
label='Gradient End'
|
||||
value={colors['gradient-end']}
|
||||
onChange={updateColor('gradient-end')}
|
||||
/>
|
||||
</List>
|
||||
|
||||
<FormActions>
|
||||
|
@ -209,4 +245,27 @@ const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange,
|
|||
);
|
||||
};
|
||||
|
||||
interface IColorListItem {
|
||||
label: React.ReactNode,
|
||||
value: string,
|
||||
onChange: (hex: string) => void,
|
||||
}
|
||||
|
||||
/** Single-color picker. */
|
||||
const ColorListItem: React.FC<IColorListItem> = ({ label, value, onChange }) => {
|
||||
const handleChange: ColorChangeHandler = (color, _e) => {
|
||||
onChange(color.hex);
|
||||
};
|
||||
|
||||
return (
|
||||
<ListItem label={label}>
|
||||
<ColorWithPicker
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
className='w-10 h-8 rounded-md overflow-hidden'
|
||||
/>
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeEditor;
|
Ładowanie…
Reference in New Issue