Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Updated brand and theme settings to use custom color picker (#18026)

Browse source 
refs https://github.com/TryGhost/Product/issues/3832

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 3a37838</samp>

This pull request refactors the color settings in the site design and
branding section of the admin settings app to use a reusable
`ColorPickerField` component. This improves the UI consistency, user
experience, and code readability.
This commit is contained in:
Jono M 2023-09-08 09:36:20 +01:00 • committed by GitHub
parent fbb12f3c70
commit e9bff23aa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-settings/src/admin-x-ds/global/form/ColorPickerField.tsx
View file

@ -10,7 +10,7 @@ const ColorPickerContext = createContext<{colorPickers: Array<{ id: string; setE
const ColorPickerField = ({testId, title, direction, value, hint, error, eyedropper, clearButtonValue, onChange, swatches = []}: {
testId?: string;
title?: string;
title?: ReactNode;
direction?: ToggleDirections;
hint?: ReactNode;
error?: boolean;

24
apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
View file

@ -1,3 +1,4 @@
import ColorPickerField from '../../../../admin-x-ds/global/form/ColorPickerField';
import Heading from '../../../../admin-x-ds/global/Heading';
import Hint from '../../../../admin-x-ds/global/Hint';
import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
@ -43,22 +44,13 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
updateDescriptionDebouncedRef.current(event.target.value);
}}
/>
<div className='flex items-center justify-between gap-3'>
<Heading grey={true} level={6}>Accent color</Heading>
<div className='relative max-w-[70px]'>
{/* <span className='absolute left-1 top-[9px] text-grey-600'>#</span> */}
<TextField
key='accent-color'
className='text-right'
clearBg={true}
maxLength={7}
type='color'
value={values.accentColor}
// we debounce this because the color picker fires a lot of events.
onChange={event => updateSettingDebounced('accent_color', event.target.value)}
/>
</div>
</div>
<ColorPickerField
direction='rtl'
title={<Heading className='mt-[3px]' grey={true} level={6}>Accent color</Heading>}
value={values.accentColor}
// we debounce this because the color picker fires a lot of events.
onChange={value => updateSettingDebounced('accent_color', value)}
/>
<div className={`flex justify-between ${values.icon ? 'items-start ' : 'items-end'}`}>
<div>
<Heading grey={(values.icon ? true : false)} level={6}>Publication icon</Heading>

7
apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
View file

@ -1,3 +1,4 @@
import ColorPickerField from '../../../../admin-x-ds/global/form/ColorPickerField';
import Heading from '../../../../admin-x-ds/global/Heading';
import Hint from '../../../../admin-x-ds/global/Hint';
import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
@ -52,12 +53,12 @@ const ThemeSetting: React.FC<{
);
case 'color':
return (
<TextField
<ColorPickerField
direction='rtl'
hint={setting.description}
title={humanizeSettingKey(setting.key)}
type='color'
value={setting.value || ''}
onChange={event => setSetting(event.target.value)}
onChange={value => setSetting(value)}
/>
);
case 'image':