tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

AdminX Portal settings refinements (#17238)

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

- Device selector is not needed in Portal settings' preview
- Links page was too wide
- Scrolling for preview contents was on the whole modal instead of just the preview area
This commit is contained in:
Peter Zimon 2023-07-07 15:03:06 +02:00 committed by GitHub
parent 26c2590923
commit 702c88b9ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 31 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/chrome/DesktopChromeHeader.tsx
View file

@ -51,7 +51,7 @@ const DesktopChromeHeader: React.FC<DesktopChromeHeaderProps & React.HTMLAttribu
);
return (
<header className={`relative flex items-center justify-center ${containerSize} ${toolbarClasses}`} {...props}>
<header className={`relative flex shrink-0 items-center justify-center ${containerSize} ${toolbarClasses}`} {...props}>
{toolbarLeft ?
<div className='absolute left-5 flex h-full items-center'>
{toolbarLeft}

2
apps/admin-x-settings/src/admin-x-ds/global/modal/ModalPage.tsx
View file

@ -10,7 +10,7 @@ interface ModalPageProps {
const ModalPage: React.FC<ModalPageProps> = ({heading, children, className}) => {
className = clsx(
'min-h-full min-w-full p-[8vmin] pt-5',
'h-full w-full p-[8vmin] pt-5',
className
);
return (

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

@ -38,13 +38,13 @@ export const Default: Story = {
args: {
title: 'Preview modal',
preview: (
<div className='flex h-full items-center justify-center text-sm text-grey-500'>
Preview area
<div className='flex h-[150%] items-center justify-center text-sm text-grey-500'>
Scrollable preview area
</div>
),
sidebar: (
<div className='flex h-full items-center justify-center text-sm text-grey-500'>
Sidebar area
Scrollable sidebar area
</div>
),
previewToolbarTabs: previewURLs,
@ -56,17 +56,7 @@ export const Default: Story = {
export const NoPreviewToolbar: Story = {
args: {
title: 'Preview modal',
preview: (
<div className='flex h-full items-center justify-center text-sm text-grey-500'>
Preview area
</div>
),
sidebar: (
<div className='flex h-full items-center justify-center text-sm text-grey-500'>
Sidebar area
</div>
),
...Default.args,
previewToolbar: false
}
};

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

@ -139,14 +139,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
);
preview = (
<div className={`min-h-100 min-w-100 flex grow flex-col ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
<DesktopChromeHeader
<div className={`min-w-100 absolute inset-y-0 left-0 right-[400px] flex grow flex-col overflow-y-scroll ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
{previewToolbar && <DesktopChromeHeader
data-testid="design-toolbar"
size='lg'
toolbarCenter={<></>}
toolbarLeft={leftToolbar && toolbarLeft}
toolbarRight={rightToolbar && toolbarRight}
/>
/>}
<div className='flex h-full grow items-center justify-center text-sm text-grey-400'>
{preview}
</div>
@ -200,7 +200,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
{sidebarButtons ? sidebarButtons : <ButtonGroup buttons={buttons} /> }
</div>
)}
<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}`}>
<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 && sidebarContentClasses}`}>
{sidebar}
</div>
</div>

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

@ -152,7 +152,7 @@ const PortalModal: React.FC = () => {
}
return <PreviewModalContent
deviceSelector={selectedPreviewTab !== 'links'}
deviceSelector={false}
dirty={saveState === 'unsaved'}
okLabel={okLabel}
preview={preview}

15
apps/admin-x-settings/src/components/settings/membership/portal/PortalLinks.tsx
View file

@ -9,10 +9,6 @@ import {SettingsContext} from '../../../providers/SettingsProvider';
import {getHomepageUrl} from '../../../../utils/helpers';
import {useTiers} from '../../../providers/ServiceProvider';
interface PortalLinksPrefs {
}
interface PortalLinkPrefs {
name: string;
value: string;
@ -33,14 +29,14 @@ const PortalLink: React.FC<PortalLinkPrefs> = ({name, value}) => {
separator
>
<div className='flex w-full grow items-center gap-5 py-3'>
<span className='inline-block w-[200px] whitespace-nowrap'>{name}</span>
<span className='inline-block w-[240px] whitespace-nowrap'>{name}</span>
<TextField className='border-b-500 grow bg-transparent p-1 text-grey-700' value={value} disabled unstyled />
</div>
</ListItem>
);
};
const PortalLinks: React.FC<PortalLinksPrefs> = () => {
const PortalLinks: React.FC = () => {
const [isDataAttributes, setIsDataAttributes] = useState(false);
const [selectedTier, setSelectedTier] = useState('');
const {siteData} = useContext(SettingsContext);
@ -66,7 +62,7 @@ const PortalLinks: React.FC<PortalLinksPrefs> = () => {
const homePageURL = getHomepageUrl(siteData!);
return (
<ModalPage className='text-base text-black' heading='Links'>
<ModalPage className='max-w-[920px] text-base text-black' heading='Links'>
<p className='-mt-6 mb-16'>Use these {isDataAttributes ? 'data attributes' : 'links'} in your theme to show pages of Portal.</p>
<List actions={<Button color='green' label={isDataAttributes ? 'Links' : 'Data attributes'} link onClick={toggleIsDataAttributes}/>} title='Generic'>
@ -80,10 +76,9 @@ const PortalLinks: React.FC<PortalLinksPrefs> = () => {
hideActions
separator
>
<div className='flex w-full items-center gap-5 py-3 pr-6'>
<span className='inline-block w-[200px] shrink-0 font-bold'>Tier</span>
<div className='flex w-full items-center gap-5 py-2 pr-6'>
<span className='inline-block w-[240px] shrink-0 font-bold'>Tier</span>
<Select
containerClassName='max-w-[400px]'
options={tierOptions}
selectedOption={selectedTier}
onSelect={(value) => {