Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc298aea

Browse files
authored
feat: add preview device selector (#23985)
* fix: no data view on first preview open* feat: add preview device selector* chore: extract devices const
1 parent25fb58c commitc298aea

File tree

2 files changed

+119
-50
lines changed

2 files changed

+119
-50
lines changed

‎packages/core/content-manager/admin/src/preview/pages/Preview.tsx

Lines changed: 116 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ import {
88
FormasFormContext,
99
Blocker,
1010
}from'@strapi/admin/strapi-admin';
11-
import{Box,Flex,FocusTrap,IconButton,Portal}from'@strapi/design-system';
11+
import{
12+
Box,
13+
Flex,
14+
FocusTrap,
15+
IconButton,
16+
Portal,
17+
SingleSelect,
18+
SingleSelectOption,
19+
}from'@strapi/design-system';
1220
import{ArrowLineLeft}from'@strapi/icons';
1321
import{useIntl}from'react-intl';
1422
import{useLocation,useParams}from'react-router-dom';
@@ -27,6 +35,31 @@ import { useGetPreviewUrlQuery } from '../services/preview';
2735

2836
importtype{UID}from'@strapi/types';
2937

38+
/* -------------------------------------------------------------------------------------------------
39+
* Constants
40+
* -----------------------------------------------------------------------------------------------*/
41+
42+
constDEVICES=[
43+
{
44+
name:'desktop',
45+
label:{
46+
id:'content-manager.preview.device.desktop',
47+
defaultMessage:'Desktop',
48+
},
49+
width:'100%',
50+
height:'100%',
51+
},
52+
{
53+
name:'mobile',
54+
label:{
55+
id:'content-manager.preview.device.mobile',
56+
defaultMessage:'Mobile',
57+
},
58+
width:'375px',
59+
height:'667px',
60+
},
61+
];
62+
3063
/* -------------------------------------------------------------------------------------------------
3164
* PreviewProvider
3265
* -----------------------------------------------------------------------------------------------*/
@@ -47,9 +80,9 @@ const [PreviewProvider, usePreviewContext] = createContext<PreviewContextValue>(
4780
* PreviewPage
4881
* -----------------------------------------------------------------------------------------------*/
4982

50-
constAnimatedArrow=styled(ArrowLineLeft)<{isSideEditorOpen:boolean}>`
83+
constAnimatedArrow=styled(ArrowLineLeft)<{$isSideEditorOpen:boolean}>`
5184
will-change: transform;
52-
rotate:${(props)=>(props.isSideEditorOpen ?'0deg' :'180deg')};
85+
rotate:${(props)=>(props.$isSideEditorOpen ?'0deg' :'180deg')};
5386
transition: rotate 0.2s ease-in-out;
5487
`;
5588

@@ -77,6 +110,11 @@ const PreviewPage = () => {
77110

78111
constparams=React.useMemo(()=>buildValidParams(query),[query]);
79112

113+
const[deviceName,setDeviceName]=React.useState<(typeofDEVICES)[number]['name']>(
114+
DEVICES[0].name
115+
);
116+
constdevice=DEVICES.find((d)=>d.name===deviceName)??DEVICES[0];
117+
80118
if(!collectionType){
81119
thrownewError('Could not find collectionType in url params');
82120
}
@@ -110,7 +148,7 @@ const PreviewPage = () => {
110148

111149
constisLoading=
112150
previewUrlResponse.isLoading||documentLayoutResponse.isLoading||documentResponse.isLoading;
113-
if(isLoading&&!documentResponse.document?.documentId){
151+
if(isLoading){
114152
return<Page.Loading/>;
115153
}
116154

@@ -228,52 +266,80 @@ const PreviewPage = () => {
228266
/>
229267
</Box>
230268
)}
231-
232-
<Boxposition="relative"flex={1}height="100%"overflow="hidden">
233-
<Box
234-
data-testid="preview-iframe"
235-
ref={iframeRef}
236-
src={previewUrl}
237-
/**
238-
* For some reason, changing an iframe's src tag causes the browser to add a new item in the
239-
* history stack. This is an issue for us as it means clicking the back button will not let us
240-
* go back to the edit view. To fix it, we need to trick the browser into thinking this is a
241-
* different iframe when the preview URL changes. So we set a key prop to force React
242-
* to mount a different node when the src changes.
243-
*/
244-
key={previewUrl}
245-
title={formatMessage({
246-
id:'content-manager.preview.panel.title',
247-
defaultMessage:'Preview',
248-
})}
249-
width="100%"
250-
height="100%"
251-
borderWidth={0}
252-
tag="iframe"
253-
/>
254-
{hasAdvancedPreview&&(
255-
<IconButton
256-
variant="tertiary"
257-
label={formatMessage(
258-
isSideEditorOpen
259-
?{
260-
id:'content-manager.preview.content.close-editor',
261-
defaultMessage:'Close editor',
262-
}
263-
:{
264-
id:'content-manager.preview.content.open-editor',
265-
defaultMessage:'Open editor',
266-
}
267-
)}
268-
onClick={()=>setIsSideEditorOpen((prev)=>!prev)}
269-
position="absolute"
270-
top={2}
271-
left={2}
272-
>
273-
<AnimatedArrowisSideEditorOpen={isSideEditorOpen}/>
274-
</IconButton>
275-
)}
276-
</Box>
269+
<Flex
270+
direction="column"
271+
alignItems="stretch"
272+
flex={1}
273+
height="100%"
274+
overflow="hidden"
275+
>
276+
<Flex
277+
direction="row"
278+
background="neutral0"
279+
padding={2}
280+
borderWidth="0 0 1px 0"
281+
borderColor="neutral150"
282+
>
283+
{hasAdvancedPreview&&(
284+
<IconButton
285+
variant="ghost"
286+
label={formatMessage(
287+
isSideEditorOpen
288+
?{
289+
id:'content-manager.preview.content.close-editor',
290+
defaultMessage:'Close editor',
291+
}
292+
:{
293+
id:'content-manager.preview.content.open-editor',
294+
defaultMessage:'Open editor',
295+
}
296+
)}
297+
onClick={()=>setIsSideEditorOpen((prev)=>!prev)}
298+
>
299+
<AnimatedArrow$isSideEditorOpen={isSideEditorOpen}/>
300+
</IconButton>
301+
)}
302+
<FlexjustifyContent="center"flex={1}>
303+
<SingleSelect
304+
value={deviceName}
305+
onChange={(name)=>setDeviceName(name.toString())}
306+
aria-label={formatMessage({
307+
id:'content-manager.preview.device.select',
308+
defaultMessage:'Select device type',
309+
})}
310+
>
311+
{DEVICES.map((deviceOption)=>(
312+
<SingleSelectOptionkey={deviceOption.name}value={deviceOption.name}>
313+
{formatMessage(deviceOption.label)}
314+
</SingleSelectOption>
315+
))}
316+
</SingleSelect>
317+
</Flex>
318+
</Flex>
319+
<Flexdirection="column"justifyContent="center"background="neutral0"flex={1}>
320+
<Box
321+
data-testid="preview-iframe"
322+
ref={iframeRef}
323+
src={previewUrl}
324+
/**
325+
* For some reason, changing an iframe's src tag causes the browser to add a new item in the
326+
* history stack. This is an issue for us as it means clicking the back button will not let us
327+
* go back to the edit view. To fix it, we need to trick the browser into thinking this is a
328+
* different iframe when the preview URL changes. So we set a key prop to force React
329+
* to mount a different node when the src changes.
330+
*/
331+
key={previewUrl}
332+
title={formatMessage({
333+
id:'content-manager.preview.panel.title',
334+
defaultMessage:'Preview',
335+
})}
336+
width={device.width}
337+
height={device.height}
338+
borderWidth={0}
339+
tag="iframe"
340+
/>
341+
</Flex>
342+
</Flex>
277343
</Flex>
278344
</Flex>
279345
)}

‎packages/core/content-manager/admin/src/translations/en.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,9 @@
249249
"preview.tabs.label":"Preview status",
250250
"preview.content.close-editor":"Close editor",
251251
"preview.content.open-editor":"Open editor",
252+
"preview.device.select":"Select device type",
253+
"preview.device.desktop":"Desktop",
254+
"preview.device.mobile":"Mobile",
252255
"relation.create":"Create a relation",
253256
"relation.add":"Add or create a relation",
254257
"relation.disconnect":"Remove",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp