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

Updated DesktopChrome component and its usage (#17330)

Browse source 
- Updated `DesktopChrome` component
- Refactored the existing `PreviewModal` and `ThemePreview`
components to use the new component and removed some redundant code
- Added storybook for the component
This commit is contained in:
Djordje Vlaisavljevic 2023-07-12 21:56:59 +01:00 committed by GitHub
parent 497d1be2ea
commit 168db1f196
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import ButtonGroup from '../ButtonGroup'; import ButtonGroup from '../ButtonGroup';
import DesktopChrome from '../chrome/DesktopChrome'; import DesktopChrome from '../chrome/DesktopChrome';
import DesktopChromeHeader from '../chrome/DesktopChromeHeader';
import Heading from '../Heading'; import Heading from '../Heading';
import MobileChrome from '../chrome/MobileChrome'; import MobileChrome from '../chrome/MobileChrome';
import Modal, {ModalSize} from './Modal'; import Modal, {ModalSize} from './Modal';
@ -147,13 +146,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
preview = ( preview = (
<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'}`}> <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 {previewToolbar && <header className="relative flex h-[74px] shrink-0 items-center justify-center px-3 py-5" data-testid="design-toolbar">
data-testid="design-toolbar" {leftToolbar && <div className='absolute left-5 flex h-full items-center'>
size='lg' {toolbarLeft}
toolbarCenter={<></>} </div>}
toolbarLeft={leftToolbar && toolbarLeft} {rightToolbar && <div className='absolute right-5 flex h-full items-center'>
toolbarRight={rightToolbar && toolbarRight} {toolbarRight}
/>} </div>}
</header>}
<div className='flex h-full grow items-center justify-center text-sm text-grey-400'> <div className='flex h-full grow items-center justify-center text-sm text-grey-400'>
{preview} {preview}
</div> </div>

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

@ -2,6 +2,7 @@ import Breadcrumbs from '../../../../admin-x-ds/global/Breadcrumbs';
import Button from '../../../../admin-x-ds/global/Button'; import Button from '../../../../admin-x-ds/global/Button';
import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup'; import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal'; import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
import DesktopChrome from '../../../../admin-x-ds/global/chrome/DesktopChrome';
import MobileChrome from '../../../../admin-x-ds/global/chrome/MobileChrome'; import MobileChrome from '../../../../admin-x-ds/global/chrome/MobileChrome';
import NiceModal from '@ebay/nice-modal-react'; import NiceModal from '@ebay/nice-modal-react';
import PageHeader from '../../../../admin-x-ds/global/layout/PageHeader'; import PageHeader from '../../../../admin-x-ds/global/layout/PageHeader';
@ -105,8 +106,10 @@ const ThemePreview: React.FC<{
<PageHeader containerClassName='bg-grey-50 z-[100]' left={left} right={right} sticky={false} /> <PageHeader containerClassName='bg-grey-50 z-[100]' left={left} right={right} sticky={false} />
<div className='flex h-[calc(100%-74px)] grow flex-col items-center justify-center bg-grey-50'> <div className='flex h-[calc(100%-74px)] grow flex-col items-center justify-center bg-grey-50'>
{previewMode === 'desktop' ? {previewMode === 'desktop' ?
<iframe className='h-full w-full' <DesktopChrome>
src={selectedTheme?.previewUrl} title='Theme preview' /> <iframe className='h-full w-full'
src={selectedTheme?.previewUrl} title='Theme preview' />
</DesktopChrome>
: :
<MobileChrome> <MobileChrome>
<iframe className='h-full w-full' <iframe className='h-full w-full'