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 DesktopChrome from '../chrome/DesktopChrome';
import DesktopChromeHeader from '../chrome/DesktopChromeHeader';
import Heading from '../Heading';
import MobileChrome from '../chrome/MobileChrome';
import Modal, {ModalSize} from './Modal';
@ -147,13 +146,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
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'}`}>
{previewToolbar && <DesktopChromeHeader
data-testid="design-toolbar"
size='lg'
toolbarCenter={<></>}
toolbarLeft={leftToolbar && toolbarLeft}
toolbarRight={rightToolbar && toolbarRight}
/>}
{previewToolbar && <header className="relative flex h-[74px] shrink-0 items-center justify-center px-3 py-5" data-testid="design-toolbar">
{leftToolbar && <div className='absolute left-5 flex h-full items-center'>
{toolbarLeft}
</div>}
{rightToolbar && <div className='absolute right-5 flex h-full items-center'>
{toolbarRight}
</div>}
</header>}
<div className='flex h-full grow items-center justify-center text-sm text-grey-400'>
{preview}
</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 ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
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 NiceModal from '@ebay/nice-modal-react';
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} />
<div className='flex h-[calc(100%-74px)] grow flex-col items-center justify-center bg-grey-50'>
{previewMode === 'desktop' ?
<iframe className='h-full w-full'
src={selectedTheme?.previewUrl} title='Theme preview' />
<DesktopChrome>
<iframe className='h-full w-full'
src={selectedTheme?.previewUrl} title='Theme preview' />
</DesktopChrome>
:
<MobileChrome>
<iframe className='h-full w-full'