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

pl-fe: do not pretend users can edit individual tints

Browse source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk 2024-12-06 11:16:59 +01:00
parent 156a0b0826
commit 8717842a5e
5 changed files with 36 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
View file

@ -5,27 +5,33 @@ import Popover from 'pl-fe/components/ui/popover';
interface IColorPicker { interface IColorPicker {
value: string; value: string;
onChange: ColorChangeHandler; onChange?: ColorChangeHandler;
className?: string; className?: string;
} }
const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => ( const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => {
<div className={className}> const colorPreview = (
<Popover <div
interaction='click' className='size-full'
content={ role='presentation'
<SketchPicker color={value} disableAlpha onChange={onChange} /> style={{ background: value }}
} title={value}
isFlush />
> );
<div return (
className='size-full' <div className={className}>
role='presentation' {onChange ? (
style={{ background: value }} <Popover
title={value} interaction='click'
/> content={
</Popover> <SketchPicker color={value} disableAlpha onChange={onChange} />
</div> }
); isFlush
>
{colorPreview}
</Popover>
) : colorPreview}
</div>
);
};
export { ColorPicker as default }; export { ColorPicker as default };

1
packages/pl-fe/src/features/preferences/index.tsx
View file

@ -175,6 +175,7 @@ const Preferences = () => {
label={intl.formatMessage(messages.brandColor)} label={intl.formatMessage(messages.brandColor)}
palette={colors(settings.theme?.brandColor || plFeConfig.brandColor || '#d80482')} palette={colors(settings.theme?.brandColor || plFeConfig.brandColor || '#d80482')}
onChange={(palette) => onBrandColorChange(palette['500'])} onChange={(palette) => onBrandColorChange(palette['500'])}
allowTintChange={false}
/> />
</List> </List>

6
packages/pl-fe/src/features/theme-editor/components/color.tsx
View file

@ -6,21 +6,21 @@ import type { ColorChangeHandler } from 'react-color';
interface IColor { interface IColor {
color: string; color: string;
onChange: (color: string) => void; onChange?: (color: string) => void;
} }
/** Color input. */ /** Color input. */
const Color: React.FC<IColor> = ({ color, onChange }) => { const Color: React.FC<IColor> = ({ color, onChange }) => {
const handleChange: ColorChangeHandler = (result) => { const handleChange: ColorChangeHandler = (result) => {
onChange(result.hex); onChange?.(result.hex);
}; };
return ( return (
<ColorPicker <ColorPicker
className='size-full' className='size-full'
value={color} value={color}
onChange={handleChange} onChange={onChange ? handleChange : undefined}
/> />
); );
}; };

5
packages/pl-fe/src/features/theme-editor/components/palette.tsx
View file

@ -17,10 +17,11 @@ interface IPalette {
palette: ColorGroup; palette: ColorGroup;
onChange: (palette: ColorGroup) => void; onChange: (palette: ColorGroup) => void;
resetKey?: string; resetKey?: string;
allowTintChange?: boolean;
} }
/** Editable color palette. */ /** Editable color palette. */
const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => { const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey, allowTintChange = true }) => {
const tints = Object.keys(palette).sort(compareId); const tints = Object.keys(palette).sort(compareId);
const [hue, setHue] = useState(0); const [hue, setHue] = useState(0);
@ -52,7 +53,7 @@ const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
<Stack className='w-full'> <Stack className='w-full'>
<HStack className='h-8 overflow-hidden rounded-md'> <HStack className='h-8 overflow-hidden rounded-md'>
{tints.map(tint => ( {tints.map(tint => (
<Color color={palette[tint]} onChange={handleChange(tint)} /> <Color color={palette[tint]} onChange={allowTintChange ? handleChange(tint) : undefined} />
))} ))}
</HStack> </HStack>

5
packages/pl-fe/src/features/theme-editor/index.tsx
View file

@ -249,12 +249,13 @@ interface IPaletteListItem {
palette: ColorGroup | string; palette: ColorGroup | string;
onChange: (palette: ColorGroup) => void; onChange: (palette: ColorGroup) => void;
resetKey?: string; resetKey?: string;
allowTintChange?: boolean;
} }
/** Palette editor inside a ListItem. */ /** Palette editor inside a ListItem. */
const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey }) => typeof palette === 'string' ? null : ( const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey, allowTintChange }) => typeof palette === 'string' ? null : (
<ListItem label={<div className='w-20'>{label}</div>}> <ListItem label={<div className='w-20'>{label}</div>}>
<Palette palette={palette} onChange={onChange} resetKey={resetKey} /> <Palette palette={palette} onChange={onChange} resetKey={resetKey} allowTintChange={allowTintChange} />
</ListItem> </ListItem>
); );