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

Added mobile view to preview modal in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-08 07:59:32 +02:00
parent d87994d210
commit 2eda7c3287
3 changed files with 65 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.stories.tsx Normal file
View file

@ -0,0 +1,27 @@
import type {Meta, StoryObj} from '@storybook/react';
import MobileChrome from './MobileChrome';
const meta = {
title: 'Global / Chrome / Mobile Chrome',
component: MobileChrome,
tags: ['autodocs'],
decorators: [(_story: any) => (<div style={{padding: '40px', backgroundColor: '#efefef', display: 'flex', justifyContent: 'center'}}>{_story()}</div>)]
} satisfies Meta<typeof MobileChrome>;
export default meta;
type Story = StoryObj<typeof MobileChrome>;
export const Default: Story = {
args: {
children: (
<div className='p-4'>
<p className='mb-6'>This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. </p>
<img alt='Testimage' className='mb-6' src='https://images.unsplash.com/photo-1685374156924-5230519f4ab3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8YWxsfDI1fHx8fHx8Mnx8MTY4NTYzNzE3M3w&ixlib=rb-4.0.3&q=80&w=2000' />
<p className='mb-6'>This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. </p>
</div>
)
}
};

17
ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react';
interface MobileChromeProps {
children?: React.ReactNode;
}
const MobileChrome: React.FC<MobileChromeProps> = ({children}) => {
return (
<div className='flex h-[646px] w-[318px] flex-col rounded-3xl bg-white p-2 shadow-xl'>
<div className='w-100 h-100 grow overflow-auto rounded-2xl border border-grey-100'>
{children}
</div>
</div>
);
};
export default MobileChrome;

25
ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
View file

@ -1,9 +1,10 @@
import ButtonGroup from './ButtonGroup';
import DesktopChromeHeader from './DesktopChromeHeader';
import Heading from './Heading';
import MobileChrome from './MobileChrome';
import Modal from './Modal';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React from 'react';
import React, {useState} from 'react';
import URLSelect from './URLSelect';
import {IButton} from './Button';
import {SelectOption} from './Select';
@ -52,6 +53,16 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
const modal = useModal();
let buttons: IButton[] = [];
const [view, setView] = useState('desktop');
if (view === 'mobile') {
preview = (
<MobileChrome>
{preview}
</MobileChrome>
);
}
if (previewToolbar) {
let toolbarCenter = (<></>);
if (previewToolbarURLs) {
@ -60,6 +71,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
);
}
const unSelectedIconColorClass = 'text-grey-500';
const toolbarRight = (
<ButtonGroup
buttons={[
@ -67,14 +79,19 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
icon: 'laptop',
link: true,
size: 'sm',
onClick: onSelectDesktopView
iconColorClass: (view === 'desktop' ? 'text-black' : unSelectedIconColorClass),
onClick: onSelectDesktopView || (() => {
setView('desktop');
})
},
{
icon: 'mobile',
link: true,
size: 'sm',
iconColorClass: 'text-grey-500',
onClick: onSelectMobileView
iconColorClass: (view === 'mobile' ? 'text-black' : unSelectedIconColorClass),
onClick: onSelectMobileView || (() => {
setView('mobile');
})
}
]}
/>