Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

AdminX theme navigation experiment (#17210)

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

It's a bit cumbersome how design and theme navigation is handled in
AdminX at the moment. On a high level, this PR applies the following
changes:

- Change theme is under Design settings
- After activating a theme, Design settings are automatically opened
This commit is contained in:
Peter Zimon 2023-07-06 12:03:01 +02:00 • committed by GitHub
parent a1d4b4cc9d
commit a5b62707ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 187 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
apps/admin-x-settings/src/admin-x-ds/global/Button.tsx
View file

@ -16,6 +16,7 @@ export interface ButtonProps {
link?: boolean;
disabled?: boolean;
className?: string;
tag?: string;
onClick?: () => void;
}
@ -29,8 +30,9 @@ const Button: React.FC<ButtonProps> = ({
fullWidth,
link,
disabled,
onClick,
className = '',
tag = 'button',
onClick,
...props
}) => {
if (!color) {
@ -68,18 +70,17 @@ const Button: React.FC<ButtonProps> = ({
styles += (disabled) ? ' opacity-40' : ' cursor-pointer';
styles += ` ${className}`;
return (
<button
className={styles}
disabled={disabled}
type="button"
onClick={onClick}
{...props}
>
{icon && <Icon colorClass={iconColorClass} name={icon} size={size === 'sm' ? 'sm' : 'md'} />}
{(label && hideLabel) ? <span className="sr-only">{label}</span> : label}
</button>
);
const buttonChildren = <>
{icon && <Icon colorClass={iconColorClass} name={icon} size={size === 'sm' ? 'sm' : 'md'} />}
{(label && hideLabel) ? <span className="sr-only">{label}</span> : label}
</>;
const buttonElement = React.createElement(tag, {className: styles,
disabled: disabled,
type: 'button',
onClick: onClick,
...props}, buttonChildren);
return buttonElement;
};
export default Button;

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

@ -119,7 +119,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
height: (unstyled ? '' : height)
}
} unstyled={unstyled} onUpload={onUpload}>
{children}
<span>{children}</span>
</FileUpload>
);
}

4
apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
View file

@ -133,7 +133,7 @@ const Modal: React.FC<ModalProps> = ({
case 'full':
modalClasses += ' h-full ';
backdropClasses += ' p-[2vmin]';
backdropClasses += ' p-[3vmin]';
padding = 'p-10';
break;
@ -206,7 +206,7 @@ const Modal: React.FC<ModalProps> = ({
<div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
<div className={clsx(
'pointer-events-none fixed inset-0 z-0',
backDrop && 'bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]'
backDrop && 'bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]'
)}></div>
<section className={modalClasses} data-testid={testId} style={modalStyles}>
<div className={contentClasses}>

6
apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
View file

@ -33,6 +33,7 @@ export interface PreviewModalProps {
sidebarButtons?: React.ReactNode;
sidebarHeader?: React.ReactNode;
sidebarPadding?: boolean;
sidebarContentClasses?: string;
onCancel?: () => void;
onOk?: () => void;
@ -63,6 +64,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
sidebarButtons,
sidebarHeader,
sidebarPadding = true,
sidebarContentClasses,
onCancel,
onOk,
@ -189,14 +191,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
{preview}
</div>
{sidebar &&
<div className='flex h-full basis-[400px] flex-col border-l border-grey-100'>
<div className='relative flex h-full basis-[400px] flex-col border-l border-grey-100'>
{sidebarHeader ? sidebarHeader : (
<div className='flex max-h-[74px] items-start justify-between gap-3 px-7 py-5'>
<Heading className='mt-1' level={4}>{title}</Heading>
{sidebarButtons ? sidebarButtons : <ButtonGroup buttons={buttons} /> }
</div>
)}
<div className={`grow ${sidebarPadding && 'p-7 pt-0'} flex flex-col justify-between overflow-y-auto`}>
<div className={`${!sidebarHeader ? 'absolute inset-x-0 bottom-0 top-[74px] grow' : ''} ${sidebarPadding && 'p-7 pt-0'} flex flex-col justify-between overflow-y-auto ${sidebarContentClasses}`}>
{sidebar}
</div>
</div>

4
apps/admin-x-settings/src/components/Sidebar.tsx
View file

@ -34,8 +34,8 @@ const Sidebar: React.FC = () => {
</SettingNavSection>
<SettingNavSection title="Site">
<SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} />
<SettingNavItem navid='branding-and-design' title="Branding and design" onClick={handleSectionClick} />
{/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
<SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
<SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
</SettingNavSection>

4
apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
View file

@ -41,9 +41,9 @@ function handleNavigation() {
const pathName = getHashPath(hash);
if (pathName) {
if (pathName === 'themes/manage') {
if (pathName === 'design/edit/themes') {
NiceModal.show(ChangeThemeModal);
} else if (pathName === 'branding-and-design/edit') {
} else if (pathName === 'design/edit') {
NiceModal.show(DesignModal);
} else if (pathName === 'navigation/edit') {
NiceModal.show(NavigationModal);

1
apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
View file

@ -101,6 +101,7 @@ const PortalModal: React.FC = () => {
return <PreviewModalContent
deviceSelector={selectedPreviewTab !== 'links'}
dirty={saveState === 'unsaved'}
okLabel='Save & close'
preview={preview}
previewToolbarTabs={previewTabs}
selectedURL={selectedPreviewTab}

41
apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
View file

@ -1,6 +1,10 @@
import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettings';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
// import Button from '../../../admin-x-ds/global/Button';
// import ChangeThemeModal from './ThemeModal';
import Icon from '../../../admin-x-ds/global/Icon';
import NiceModal, {NiceModalHandler, useModal} from '@ebay/nice-modal-react';
import React, {useContext, useEffect, useState} from 'react';
import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
import ThemePreview from './designAndBranding/ThemePreview';
import ThemeSettings from './designAndBranding/ThemeSettings';
@ -14,17 +18,22 @@ import {getHomepageUrl, getSettingValues} from '../../../utils/helpers';
const Sidebar: React.FC<{
brandSettings: BrandSettingValues
updateBrandSetting: (key: string, value: SettingValue) => void
themeSettingSections: Array<{id: string, title: string, settings: CustomThemeSetting[]}>
modal: NiceModalHandler<Record<string, unknown>>;
updateBrandSetting: (key: string, value: SettingValue) => void
updateThemeSetting: (updated: CustomThemeSetting) => void
onTabChange: (id: string) => void
handleSave: () => Promise<void>
}> = ({
brandSettings,
updateBrandSetting,
themeSettingSections,
modal,
updateBrandSetting,
updateThemeSetting,
onTabChange
onTabChange,
handleSave
}) => {
const {updateRoute} = useRouting();
const [selectedTab, setSelectedTab] = useState('brand');
const tabs: Tab[] = [
@ -46,11 +55,23 @@ const Sidebar: React.FC<{
};
return (
<>
<div className='flex h-full flex-col justify-between'>
<div className='p-7' data-testid="design-setting-tabs">
<TabView selectedTab={selectedTab} tabs={tabs} onTabChange={handleTabChange} />
</div>
</>
<StickyFooter height={74}>
<div className='w-full px-7'>
<button className='group flex w-full items-center justify-between text-sm font-medium opacity-80 transition-all hover:opacity-100' data-testid='change-theme' type='button' onClick={async () => {
await handleSave();
modal.remove();
updateRoute('design/edit/themes');
}}>
Change theme
<Icon className='mr-2 transition-all group-hover:translate-x-2' name='chevron-right' size='sm' />
</button>
</div>
</StickyFooter>
</div>
);
};
@ -178,6 +199,8 @@ const DesignModal: React.FC = () => {
const sidebarContent =
<Sidebar
brandSettings={{description, accentColor, icon, logo, coverImage}}
handleSave={handleSave}
modal={modal}
themeSettingSections={themeSettingSections}
updateBrandSetting={updateBrandSetting}
updateThemeSetting={updateThemeSetting}
@ -186,12 +209,12 @@ const DesignModal: React.FC = () => {
return <PreviewModalContent
afterClose={() => {
updateRoute('branding-and-design');
updateRoute('design');
}}
buttonsDisabled={saveState === 'saving'}
defaultTab='homepage'
dirty={saveState === 'unsaved'}
okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save and close')}
okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save & close')}
preview={previewContent}
previewToolbarTabs={previewTabs}
selectedURL={selectedPreviewTab}
@ -203,7 +226,7 @@ const DesignModal: React.FC = () => {
onOk={async () => {
await handleSave();
modal.remove();
updateRoute('branding-and-design');
updateRoute('design');
}}
onSelectURL={onSelectURL}
/>;

4
apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
View file

@ -6,7 +6,7 @@ import useRouting from '../../../hooks/useRouting';
const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {updateRoute} = useRouting();
const openPreviewModal = () => {
updateRoute('branding-and-design/edit');
updateRoute('design/edit');
};
return (
@ -14,7 +14,7 @@ const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
customButtons={<Button color='green' label='Customize' link onClick={openPreviewModal}/>}
description="Customize the look and feel of your site"
keywords={keywords}
navid='branding-and-design'
navid='design'
testId='design'
title="Branding and design"
/>

4
apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
View file

@ -2,7 +2,7 @@ import DesignSetting from './DesignSetting';
import Navigation from './Navigation';
import React from 'react';
import SettingSection from '../../../admin-x-ds/settings/SettingSection';
import Theme from './Theme';
// import Theme from './Theme';
const searchKeywords = {
theme: ['themes', 'design', 'appearance', 'style'],
@ -14,7 +14,7 @@ const SiteSettings: React.FC = () => {
return (
<>
<SettingSection keywords={Object.values(searchKeywords).flat()} title="Site">
<Theme keywords={searchKeywords.theme} />
{/* <Theme keywords={searchKeywords.theme} /> */}
<DesignSetting keywords={searchKeywords.design} />
<Navigation keywords={searchKeywords.navigation} />
</SettingSection>

2
apps/admin-x-settings/src/components/settings/site/Theme.tsx
View file

@ -8,7 +8,7 @@ const Theme: React.FC<{ keywords: string[] }> = ({keywords}) => {
return (
<SettingGroup
customButtons={<Button color='green' label='Manage themes' link onClick={() => {
updateRoute('themes/manage');
updateRoute('design/edit/themes');
}}/>}
description="Change or upload themes"
keywords={keywords}

123
apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
View file

@ -1,4 +1,5 @@
import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
import Breadcrumbs from '../../../admin-x-ds/global/Breadcrumbs';
import Button from '../../../admin-x-ds/global/Button';
import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
import FileUpload from '../../../admin-x-ds/global/form/FileUpload';
@ -52,11 +53,13 @@ function addThemeToList(theme: Theme, themes: Theme[]): Theme[] {
async function handleThemeUpload({
api,
file,
setThemes
setThemes,
onActivate
}: {
api: API;
file: File;
setThemes: React.Dispatch<React.SetStateAction<Theme[]>>
setThemes: React.Dispatch<React.SetStateAction<Theme[]>>;
onActivate?: () => void
}) {
const data = await api.themes.upload({file});
const uploadedTheme = data.themes[0];
@ -97,7 +100,8 @@ async function handleThemeUpload({
title,
prompt,
installedTheme: uploadedTheme,
setThemes
setThemes,
onActivate: onActivate
});
}
@ -110,55 +114,68 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
}) => {
const {updateRoute} = useRouting();
const api = useApi();
const onClose = () => {
updateRoute('design/edit');
modal.remove();
};
const left =
<TabView
border={false}
selectedTab={currentTab}
tabs={[
{id: 'official', title: 'Official themes'},
{id: 'installed', title: 'Installed'}
<Breadcrumbs
items={[
{label: 'Design', onClick: onClose},
{label: 'Change theme'}
]}
onTabChange={(id: string) => {
setCurrentTab(id);
}} />;
backIcon
onBack={onClose}
/>;
const right =
<div className='flex items-center gap-3'>
<FileUpload id='theme-uplaod' onUpload={async (file: File) => {
const themeFileName = file?.name.replace(/\.zip$/, '');
const existingThemeNames = themes.map(t => t.name);
if (existingThemeNames.includes(themeFileName)) {
NiceModal.show(ConfirmationModal, {
title: 'Overwrite theme',
prompt: (
<>
The theme <strong>{themeFileName}</strong> already exists.
Do you want to overwrite it?
</>
),
okLabel: 'Overwrite',
cancelLabel: 'Cancel',
okRunningLabel: 'Overwriting...',
okColor: 'red',
onOk: async (confirmModal) => {
await handleThemeUpload({api, file, setThemes});
setCurrentTab('installed');
confirmModal?.remove();
}
});
} else {
setCurrentTab('installed');
handleThemeUpload({api, file, setThemes});
}
}}>Upload theme</FileUpload>
<Button
className='min-w-[75px]'
color='black'
label='OK'
onClick = {() => {
updateRoute('theme');
modal.remove();
<div className='flex items-center gap-14'>
<TabView
border={false}
selectedTab={currentTab}
tabs={[
{id: 'official', title: 'Official themes'},
{id: 'installed', title: 'Installed'}
]}
onTabChange={(id: string) => {
setCurrentTab(id);
}} />
<div className='flex items-center gap-3'>
<FileUpload id='theme-uplaod' onUpload={async (file: File) => {
const themeFileName = file?.name.replace(/\.zip$/, '');
const existingThemeNames = themes.map(t => t.name);
if (existingThemeNames.includes(themeFileName)) {
NiceModal.show(ConfirmationModal, {
title: 'Overwrite theme',
prompt: (
<>
The theme <strong>{themeFileName}</strong> already exists.
Do you want to overwrite it?
</>
),
okLabel: 'Overwrite',
cancelLabel: 'Cancel',
okRunningLabel: 'Overwriting...',
okColor: 'red',
onOk: async (confirmModal) => {
await handleThemeUpload({api, file, setThemes, onActivate: onClose});
setCurrentTab('installed');
confirmModal?.remove();
}
});
} else {
setCurrentTab('installed');
handleThemeUpload({api, file, setThemes, onActivate: onClose});
}
}}>
<Button color='black' label='Upload theme' tag='div' />
</FileUpload>
{/* <Button color='black' label='Save & Close' onClick={() => {
modal.remove();
}} /> */}
</div>
</div>;
return <PageHeader containerClassName='bg-white' left={left} right={right} />;
@ -248,7 +265,11 @@ const ChangeThemeModal = NiceModal.create(() => {
title,
prompt,
installedTheme: newlyInstalledTheme,
setThemes
setThemes,
onActivate: () => {
updateRoute('design/edit');
modal.remove();
}
});
};
}
@ -256,7 +277,7 @@ const ChangeThemeModal = NiceModal.create(() => {
return (
<Modal
afterClose={() => {
updateRoute('theme');
updateRoute('design/edit');
}}
cancelLabel=''
footer={false}
@ -277,6 +298,10 @@ const ChangeThemeModal = NiceModal.create(() => {
onBack={() => {
setSelectedTheme(null);
}}
onClose={() => {
updateRoute('design/edit');
modal.remove();
}}
onInstall={onInstall} />
}
<ThemeToolbar

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

@ -71,7 +71,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
<ImageUpload
deleteButtonClassName='!top-1 !right-1'
height='80px'
id='logo'
id='site-logo'
imageBWCheckedBg={true}
imageFit='contain'
imageURL={values.logo || ''}
@ -84,7 +84,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
</ImageUpload>
</div>
<div>
<Heading className='mb-2' level={6}>Publication cover</Heading>
<Heading className='mb-2' grey={(values.coverImage ? true : false)} level={6}>Publication cover</Heading>
<ImageUpload
deleteButtonClassName='!top-1 !right-1'
height='180px'

42
apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx
View file

@ -13,22 +13,28 @@ const ThemeProblemView = ({problem}:{problem: ThemeProblem}) => {
const [isExpanded, setExpanded] = useState(false);
return <ListItem
action={<Button color="green" label={isExpanded ? 'Collapse' : 'Expand'} link onClick={() => setExpanded(!isExpanded)} />}
detail={
isExpanded ?
<>
<div dangerouslySetInnerHTML={{__html: problem.details}} />
<Heading level={6}>Affected files:</Heading>
<ul>
{problem.failures.map(failure => <li><code>{failure.ref}</code>{failure.message ? `: ${failure.message}` : ''}</li>)}
</ul>
</> :
null
title={
<>
<div className={`${problem.level === 'error' ? 'before:bg-red' : 'before:bg-yellow'} relative px-4 text-sm before:absolute before:left-0 before:top-1.5 before:block before:h-2 before:w-2 before:rounded-full before:content-['']`}>
<strong>{problem.level === 'error' ? 'Error: ' : 'Warning: '}</strong>
<span dangerouslySetInnerHTML={{__html: problem.rule}} />
<div className='absolute -right-4 top-1'>
<Button color="green" icon={isExpanded ? 'chevron-down' : 'chevron-right'} iconColorClass='text-grey-700' size='sm' link onClick={() => setExpanded(!isExpanded)} />
</div>
</div>
{
isExpanded ?
<div className='mt-2 px-4 text-[13px] leading-8'>
<div dangerouslySetInnerHTML={{__html: problem.details}} className='mb-4' />
<Heading level={6}>Affected files:</Heading>
<ul className='mt-1'>
{problem.failures.map(failure => <li><code>{failure.ref}</code>{failure.message ? `: ${failure.message}` : ''}</li>)}
</ul>
</div> :
null
}
</>
}
title={<>
<strong>{problem.level === 'error' ? 'Error: ' : 'Warning: '}</strong>
<span dangerouslySetInnerHTML={{__html: problem.rule}} />
</>}
hideActions
separator
/>;
@ -39,7 +45,8 @@ const ThemeInstalledModal: React.FC<{
prompt: ReactNode
installedTheme: InstalledTheme;
setThemes: (callback: (themes: Theme[]) => Theme[]) => void;
}> = ({title, prompt, installedTheme, setThemes}) => {
onActivate?: () => void;
}> = ({title, prompt, installedTheme, setThemes, onActivate}) => {
const api = useApi();
let errorPrompt = null;
@ -53,7 +60,7 @@ const ThemeInstalledModal: React.FC<{
let warningPrompt = null;
if (installedTheme.warnings) {
warningPrompt = <div className="mt-6">
warningPrompt = <div className="mt-10">
<List title="Warnings">
{installedTheme.warnings?.map(warning => <ThemeProblemView problem={warning} />)}
</List>
@ -101,6 +108,7 @@ const ThemeInstalledModal: React.FC<{
message: `${updatedTheme.name} is now your active theme.`
});
}
onActivate?.();
activateModal?.remove();
}}
/>;

9
apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
View file

@ -11,17 +11,19 @@ import {Theme} from '../../../../types/api';
const ThemePreview: React.FC<{
selectedTheme?: OfficialTheme;
onBack: () => void;
isInstalling?: boolean;
installedTheme?: Theme;
installButtonLabel?: string;
onBack: () => void;
onClose: () => void;
onInstall?: () => void | Promise<void>;
}> = ({
selectedTheme,
onBack,
isInstalling,
installedTheme,
installButtonLabel,
onBack,
onClose,
onInstall
}) => {
const [previewMode, setPreviewMode] = useState('desktop');
@ -57,7 +59,8 @@ const ThemePreview: React.FC<{
<div className='flex items-center gap-2'>
<Breadcrumbs
items={[
{label: 'Official themes', onClick: onBack},
{label: 'Design', onClick: onClose},
{label: 'Change theme', onClick: onBack},
{label: selectedTheme.name}
]}
backIcon

6
apps/admin-x-settings/test/e2e/search.test.ts
View file

@ -9,14 +9,14 @@ test.describe('Search', async () => {
const searchBar = page.getByLabel('Search');
await searchBar.fill('theme');
await searchBar.fill('design');
await expect(page.getByTestId('theme')).toBeVisible();
await expect(page.getByTestId('design')).toBeVisible();
await expect(page.getByTestId('title-and-description')).not.toBeVisible();
await searchBar.fill('title');
await expect(page.getByTestId('theme')).not.toBeVisible();
await expect(page.getByTestId('design')).not.toBeVisible();
await expect(page.getByTestId('title-and-description')).toBeVisible();
});
});

20
apps/admin-x-settings/test/e2e/site/theme.test.ts
View file

@ -26,13 +26,17 @@ test.describe('Theme settings', async () => {
await page.goto('/');
const section = page.getByTestId('theme');
const designSection = page.getByTestId('design');
await section.getByRole('button', {name: 'Manage themes'}).click();
await designSection.getByRole('button', {name: 'Customize'}).click();
const designModal = page.getByTestId('design-modal');
await designModal.getByTestId('change-theme').click();
const modal = page.getByTestId('theme-modal');
// The default theme is always considered "installed"
// // The default theme is always considered "installed"
await modal.getByRole('button', {name: /Casper/}).click();
@ -40,7 +44,7 @@ test.describe('Theme settings', async () => {
await expect(page.locator('iframe[title="Theme preview"]')).toHaveAttribute('src', 'https://demo.ghost.io/');
await modal.getByRole('button', {name: 'Official themes'}).click();
await modal.getByRole('button', {name: 'Change theme'}).click();
// Try installing another theme
@ -71,9 +75,13 @@ test.describe('Theme settings', async () => {
await page.goto('/');
const section = page.getByTestId('theme');
const designSection = page.getByTestId('design');
await section.getByRole('button', {name: 'Manage themes'}).click();
await designSection.getByRole('button', {name: 'Customize'}).click();
const designModal = page.getByTestId('design-modal');
await designModal.getByTestId('change-theme').click();
const modal = page.getByTestId('theme-modal');