ThemeEditor: allow editing colors (sort of)

theme-editor-hsl
Alex Gleason 2022-10-25 17:47:24 -05:00
rodzic 3b1d8972b0
commit 41a608481f
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 73 dodań i 24 usunięć

Wyświetl plik

@ -0,0 +1,28 @@
import React from 'react';
import ColorWithPicker from 'soapbox/features/soapbox_config/components/color-with-picker';
import type { ColorChangeHandler } from 'react-color';
interface IColor {
color: string,
onChange: (color: string) => void,
}
/** Color input. */
const Color: React.FC<IColor> = ({ color, onChange }) => {
const handleChange: ColorChangeHandler = (result) => {
onChange(result.hex);
};
return (
<ColorWithPicker
className='w-full h-full'
value={color}
onChange={handleChange}
/>
);
};
export default Color;

Wyświetl plik

@ -2,7 +2,8 @@ import React from 'react';
import compareId from 'soapbox/compare_id'; import compareId from 'soapbox/compare_id';
import { HStack } from 'soapbox/components/ui'; import { HStack } from 'soapbox/components/ui';
import ColorWithPicker from 'soapbox/features/soapbox_config/components/color-with-picker';
import Color from './color';
interface ColorGroup { interface ColorGroup {
[tint: string]: string, [tint: string]: string,
@ -10,27 +11,27 @@ interface ColorGroup {
interface IPalette { interface IPalette {
palette: ColorGroup, palette: ColorGroup,
onChange: (palette: ColorGroup) => void,
} }
/** Editable color palette. */ /** Editable color palette. */
const Palette: React.FC<IPalette> = ({ palette }) => { const Palette: React.FC<IPalette> = ({ palette, onChange }) => {
const tints = Object.keys(palette).sort(compareId); const tints = Object.keys(palette).sort(compareId);
const result = tints.map(tint => { const handleChange = (tint: string) => {
const hex = palette[tint]; return (color: string) => {
onChange({
return ( ...palette,
<ColorWithPicker [tint]: color,
className='w-full h-full' });
value={hex} };
onChange={() => {}} };
/>
);
});
return ( return (
<HStack className='w-full h-8 rounded-md overflow-hidden'> <HStack className='w-full h-8 rounded-md overflow-hidden'>
{result} {tints.map(tint => (
<Color color={palette[tint]} onChange={handleChange(tint)} />
))}
</HStack> </HStack>
); );
}; };

Wyświetl plik

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import List, { ListItem } from 'soapbox/components/list'; import List, { ListItem } from 'soapbox/components/list';
@ -18,39 +18,58 @@ interface IThemeEditor {
const ThemeEditor: React.FC<IThemeEditor> = () => { const ThemeEditor: React.FC<IThemeEditor> = () => {
const intl = useIntl(); const intl = useIntl();
const soapbox = useSoapboxConfig(); const soapbox = useSoapboxConfig();
const colors = soapbox.colors.toJS();
const [colors, setColors] = useState(soapbox.colors.toJS() as any);
const updateColors = (key: string) => {
return (newColors: any) => {
setColors({
...colors,
[key]: {
...colors[key],
...newColors,
},
});
};
};
return ( return (
<Column label={intl.formatMessage(messages.title)}> <Column label={intl.formatMessage(messages.title)}>
<List> <List>
<PaletteListItem <PaletteListItem
label='Primary' label='Primary'
palette={colors.primary as any} palette={colors.primary}
onChange={updateColors('primary')}
/> />
<PaletteListItem <PaletteListItem
label='Secondary' label='Secondary'
palette={colors.secondary as any} palette={colors.secondary}
onChange={updateColors('secondary')}
/> />
<PaletteListItem <PaletteListItem
label='Accent' label='Accent'
palette={colors.accent as any} palette={colors.accent}
onChange={updateColors('accent')}
/> />
<PaletteListItem <PaletteListItem
label='Gray' label='Gray'
palette={colors.gray as any} palette={colors.gray}
onChange={updateColors('gray')}
/> />
<PaletteListItem <PaletteListItem
label='Success' label='Success'
palette={colors.success as any} palette={colors.success}
onChange={updateColors('success')}
/> />
<PaletteListItem <PaletteListItem
label='Danger' label='Danger'
palette={colors.danger as any} palette={colors.danger}
onChange={updateColors('danger')}
/> />
</List> </List>
</Column> </Column>
@ -60,13 +79,14 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
interface IPaletteListItem { interface IPaletteListItem {
label: React.ReactNode, label: React.ReactNode,
palette: ColorGroup, palette: ColorGroup,
onChange: (palette: ColorGroup) => void,
} }
/** Palette editor inside a ListItem. */ /** Palette editor inside a ListItem. */
const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette }) => { const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange }) => {
return ( return (
<ListItem label={<div className='w-20'>{label}</div>}> <ListItem label={<div className='w-20'>{label}</div>}>
<Palette palette={palette} /> <Palette palette={palette} onChange={onChange} />
</ListItem> </ListItem>
); );
}; };