OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update "Customize" link on Setup screen (#19686)

Browse Source 
refs.
https://linear.app/tryghost/issue/DES-113/clicking-customize-design-on-setup-page-lands-you-on-top-level

On the setup screen 60% of people choose "Customize your site" which ATM
just take people to the top level Settings screen. This is very
confusing as with all the settings people don't know where to click to
actually get to customizing their site.

This PR fixes it by showing the design settings when clicking on
"Customize your site" and to the Dashboard after closing it.
This commit is contained in:
Peter Zimon 2024-02-13 11:16:01 +01:00 committed by GitHub
parent 92451e9bc2
commit ba9b695626
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
View File

@ -2,6 +2,7 @@ import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettin
import React, {useEffect, useState} from 'react';
import ThemePreview from './designAndBranding/ThemePreview';
import ThemeSettings from './designAndBranding/ThemeSettings';
import useQueryParams from '../../../hooks/useQueryParams';
import {CustomThemeSetting, useBrowseCustomThemeSettings, useEditCustomThemeSettings} from '@tryghost/admin-x-framework/api/customThemeSettings';
import {Icon, PreviewModalContent, StickyFooter, Tab, TabView} from '@tryghost/admin-x-design-system';
import {Setting, SettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
@ -30,6 +31,7 @@ const Sidebar: React.FC<{
const {updateRoute} = useRouting();
const [selectedTab, setSelectedTab] = useState('brand');
const {data: {themes} = {}} = useBrowseThemes();
const refParam = useQueryParams().getParam('ref');
const activeTheme = themes?.find(theme => theme.active);
@ -60,7 +62,11 @@ const Sidebar: React.FC<{
<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();
updateRoute('design/change-theme');
if (refParam) {
updateRoute(`design/change-theme?ref=${refParam}`);
} else {
updateRoute('design/change-theme');
}
}}>
<div className='text-left'>
<div className='font-semibold'>Change theme</div>
@ -91,6 +97,8 @@ const DesignModal: React.FC = () => {
const [selectedPreviewTab, setSelectedPreviewTab] = useState('homepage');
const {updateRoute} = useRouting();
const refParam = useQueryParams().getParam('ref');
const {
formState,
saveState,
@ -209,7 +217,11 @@ const DesignModal: React.FC = () => {
return <PreviewModalContent
afterClose={() => {
updateRoute('design');
if (refParam === 'setup') {
window.location.hash = '/dashboard/';
} else {
updateRoute('design');
}
}}
buttonsDisabled={okProps.disabled}
cancelLabel='Close'

29
apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
View File

@ -5,6 +5,7 @@ import OfficialThemes from './theme/OfficialThemes';
import React, {useEffect, useState} from 'react';
import ThemeInstalledModal from './theme/ThemeInstalledModal';
import ThemePreview from './theme/ThemePreview';
import useQueryParams from '../../../hooks/useQueryParams';
import {Breadcrumbs, Button, ConfirmationModal, FileUpload, LimitModal, Modal, PageHeader, TabView, showToast} from '@tryghost/admin-x-design-system';
import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
import {InstalledTheme, Theme, ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '@tryghost/admin-x-framework/api/themes';
@ -57,6 +58,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
const {mutateAsync: uploadTheme} = useUploadTheme();
const limiter = useLimiter();
const handleError = useHandleError();
const refParam = useQueryParams().getParam('ref');
const [uploadConfig, setUploadConfig] = useState<{enabled: boolean; error?: string}>();
@ -78,7 +80,11 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
}, [limiter]);
const onClose = () => {
updateRoute('design/edit');
if (refParam) {
updateRoute(`design/edit?ref=${refParam}`);
} else {
updateRoute('design/edit');
}
};
const onThemeUpload = async (file: File) => {
@ -293,6 +299,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
const [isInstalling, setInstalling] = useState(false);
const [installedFromMarketplace, setInstalledFromMarketplace] = useState(false);
const {updateRoute} = useRouting();
const refParam = useQueryParams().getParam('ref');
const modal = useModal();
const {data: {themes} = {}} = useBrowseThemes();
@ -349,7 +356,11 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
});
}
confirmModal?.remove();
updateRoute('design/edit');
if (refParam) {
updateRoute(`design/edit?ref=${refParam}`);
} else {
updateRoute('design/edit');
}
} catch (e) {
handleError(e);
}
@ -359,7 +370,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
}
});
}
}, [themeRef, source, installTheme, handleError, activateTheme, updateRoute, themes, installedFromMarketplace]);
}, [themeRef, source, installTheme, handleError, activateTheme, updateRoute, themes, installedFromMarketplace, refParam]);
if (!themes) {
return;
@ -430,7 +441,11 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
prompt,
installedTheme: installedTheme!,
onActivate: () => {
updateRoute('design/edit');
if (refParam) {
updateRoute(`design/edit?ref=${refParam}`);
} else {
updateRoute('design/edit');
}
}
});
};
@ -439,7 +454,11 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
return (
<Modal
afterClose={() => {
updateRoute('design/edit');
if (refParam) {
updateRoute(`design/edit?ref=${refParam}`);
} else {
updateRoute('design/edit');
}
}}
animate={false}
cancelLabel=''

4
ghost/admin/app/templates/setup/done.hbs
View File

@ -16,7 +16,7 @@
<h6>Write your first post</h6>
<p>Test out the editor and get a feel for creating content inside Ghost.</p>
</LinkTo>
<LinkTo class="gh-done-green" @route="settings-x">
<LinkTo class="gh-done-green" @route="settings-x.settings-x" @model="design/edit?ref=setup">
<span>{{svg-jar "paint-palette"}}</span>
<h6>Customize your site</h6>
<p>Review your settings and tweak the design to make your site just right.</p>
@ -27,7 +27,7 @@
<p>Move your audience over to Ghost with our migration tools and guides.</p>
</LinkTo>
<LinkTo class="gh-done-pink" @route="dashboard">
<span>{{svg-jar "house"}}</span>
<span>{{svg-jar "house"}}</span>
<h6>Explore Ghost admin</h6>
<p>View the dashboard, click around, and explore Ghost for yourself.</p>
</LinkTo>