Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added colour picker to signup embed - AdminX (#18037)

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

---

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

This pull request adds a color picker feature to the membership
settings, which lets the user customize the appearance of the embed
signup form. It modifies the `EmbedSignupFormModal` and
`EmbedSignupSidebar` components and uses the `ColorPicker` component
from the admin-x-ds library.
This commit is contained in:
Ronald Langeveld 2023-09-08 19:50:18 +07:00 • committed by GitHub
parent 797dc4f218
commit 0e81eb9f1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/admin-x-settings/src/components/settings/membership/embedSignup/EmbedSignupFormModal.tsx
View file

@ -26,6 +26,7 @@ const EmbedSignupFormModal = NiceModal.create(() => {
const {localSettings, siteData} = useSettingGroup();
const [accentColor, title, description, locale, labs, icon] = getSettingValues<string>(localSettings, ['accent_color', 'title', 'description', 'locale', 'labs', 'icon']);
const {data: labels} = useBrowseLabels();
const [customColor, setCustomColor] = useState<{active: boolean}>({active: false});
if (labs) {
i18nEnabled = JSON.parse(labs).i18n;
@ -103,6 +104,7 @@ const EmbedSignupFormModal = NiceModal.create(() => {
/>
<EmbedSignupSidebar
accentColor={accentColor}
customColor={customColor}
embedScript={embedScript}
handleColorToggle={handleColorToggle}
handleCopyClick={handleCopyClick}
@ -113,6 +115,7 @@ const EmbedSignupFormModal = NiceModal.create(() => {
selectedColor={selectedColor}
selectedLabels={selectedLabels}
selectedLayout={selectedLayout}
setCustomColor={setCustomColor}
/>
</div>
</Modal>

30
apps/admin-x-settings/src/components/settings/membership/embedSignup/EmbedSignupSidebar.tsx
View file

@ -1,5 +1,6 @@
import Button from '../../../../admin-x-ds/global/Button';
import ColorIndicator from '../../../../admin-x-ds/global/form/ColorIndicator';
import ColorPicker from '../../../../admin-x-ds/global/form/ColorPicker';
import Form from '../../../../admin-x-ds/global/form/Form';
import Heading from '../../../../admin-x-ds/global/Heading';
import MultiSelect, {MultiSelectOption} from '../../../../admin-x-ds/global/form/MultiSelect';
@ -26,6 +27,8 @@ type SidebarProps = {
selectedLayout : string;
handleCopyClick: () => void;
isCopied: boolean;
setCustomColor?: React.Dispatch<React.SetStateAction<{active: boolean}>>;
customColor?: {active: boolean};
};
const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
@ -38,6 +41,8 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
embedScript,
handleLayoutSelect,
handleCopyClick,
customColor,
setCustomColor,
isCopied}) => {
const labelOptions = labels ? labels.map((l) => {
return {
@ -90,13 +95,34 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
title='Background color'
value={selectedColor}
onSwatchChange={(e) => {
if (e) {
if (e && setCustomColor) {
handleColorToggle(e);
setCustomColor({active: false});
}
}}
onTogglePicker={() => {
if (setCustomColor) {
setCustomColor({active: true});
}
}}
/>
}
{
selectedLayout === 'all-in-one' && customColor?.active &&
<ColorPicker
clearButtonValue={'#d74780'}
eyedropper={false}
hexValue={selectedColor || '#d74780'}
onChange={(e) => {
if (setCustomColor && e) {
setCustomColor({active: true});
handleColorToggle(e);
}
}}
onTogglePicker={() => {}}
/>
}
<MultiSelect
hint='Will be applied to all members signing up via this form'
options={labelOptions}