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

Commit 93be4f0

Browse files
Merge pull request #1520 from lowcoder-org/mobile-preview
Updated device mockup package
2 parents f9da458 + d5b86ec commit 93be4f0

File tree

3 files changed

+39
-29
lines changed

3 files changed

+39
-29
lines changed

‎client/packages/lowcoder/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@
5252
"file-saver": "^2.0.5",
5353
"github-markdown-css": "^5.1.0",
5454
"hotkeys-js": "^3.8.7",
55-
"html5-device-mockups": "^3.2.1",
5655
"immer": "^9.0.7",
5756
"less": "^4.1.3",
5857
"lodash": "^4.17.21",
@@ -68,7 +67,7 @@
6867
"react": "^18.2.0",
6968
"react-best-gradient-color-picker": "^3.0.10",
7069
"react-colorful": "^5.5.1",
71-
"react-device-mockups": "^0.1.12",
70+
"react-device-mockup": "^1.0.0",
7271
"react-documents": "^1.2.1",
7372
"react-dom": "^18.2.0",
7473
"react-draggable": "^4.4.4",

‎client/packages/lowcoder/src/pages/editor/editorView.tsx‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -256,8 +256,31 @@ export const EditorWrapper = styled.div`
256256

257257
const DeviceWrapperInner = styled(Flex)`
258258
margin: 2% 0 0;
259-
.screen {
260-
overflow: auto;
259+
.device-mockup.portrait {
260+
> div:first-child {
261+
> div:first-child {
262+
> div:first-child {
263+
> div:nth-child(2) {
264+
display: block !important;
265+
overflow: hidden auto !important;
266+
}
267+
}
268+
}
269+
}
270+
}
271+
.device-mockup.landscape {
272+
> div:first-child {
273+
> div:first-child {
274+
> div:first-child {
275+
> div:nth-child(2) {
276+
> div:first-child {
277+
display: block !important;
278+
overflow: hidden auto !important;
279+
}
280+
}
281+
}
282+
}
283+
}
261284
}
262285
`;
263286

@@ -322,13 +345,11 @@ const DeviceWrapper = ({
322345
useEffect(() => {
323346
const loadWrapper = async () => {
324347
if (deviceType === "tablet") {
325-
await import('html5-device-mockups/dist/device-mockups.min.css');
326-
const { IPadPro } = await import("react-device-mockups");
327-
setWrapper(() => IPadPro);
348+
const { IPadMockup } = await import("react-device-mockup");
349+
setWrapper(() => IPadMockup);
328350
} else if (deviceType === "mobile") {
329-
await import('html5-device-mockups/dist/device-mockups.min.css');
330-
const { IPhone7 } = await import("react-device-mockups");
331-
setWrapper(() => IPhone7);
351+
const { IPhoneMockup } = await import("react-device-mockup");
352+
setWrapper(() => IPhoneMockup);
332353
} else {
333354
setWrapper(() => null);
334355
}
@@ -357,8 +378,9 @@ const DeviceWrapper = ({
357378
return (
358379
<DeviceWrapperInner justify="center" >
359380
<Wrapper
360-
orientation={deviceOrientation}
361-
width={deviceWidth}
381+
isLandscape={deviceOrientation === 'landscape'}
382+
screenWidth={deviceWidth}
383+
className={`device-mockup ${deviceOrientation === 'landscape' && deviceType === 'mobile' ? 'landscape' : 'portrait'} `}
362384
>
363385
{children}
364386
</Wrapper>

‎client/yarn.lock‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11492,13 +11492,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1149211492
languageName: node
1149311493
linkType: hard
1149411494

11495-
"html5-device-mockups@npm:^3.2.1":
11496-
version: 3.2.1
11497-
resolution: "html5-device-mockups@npm:3.2.1"
11498-
checksum: abba0bccc6398313102a9365203092a7c0844879d1b0492168279c516c9462d2a7e016045be565bc183e3405a1ae4929402eaceb1952abdbf16f1580afa68df3
11499-
languageName: node
11500-
linkType: hard
11501-
1150211495
"http-cache-semantics@npm:^4.1.1":
1150311496
version: 4.1.1
1150411497
resolution: "http-cache-semantics@npm:4.1.1"
@@ -14203,7 +14196,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1420314196
file-saver: ^2.0.5
1420414197
github-markdown-css: ^5.1.0
1420514198
hotkeys-js: ^3.8.7
14206-
html5-device-mockups: ^3.2.1
1420714199
http-proxy-middleware: ^2.0.6
1420814200
immer: ^9.0.7
1420914201
less: ^4.1.3
@@ -14220,7 +14212,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1422014212
react: ^18.2.0
1422114213
react-best-gradient-color-picker: ^3.0.10
1422214214
react-colorful: ^5.5.1
14223-
react-device-mockups: ^0.1.12
14215+
react-device-mockup: ^1.0.0
1422414216
react-documents: ^1.2.1
1422514217
react-dom: ^18.2.0
1422614218
react-draggable: ^4.4.4
@@ -17774,15 +17766,12 @@ coolshapes-react@lowcoder-org/coolshapes-react:
1777417766
languageName: node
1777517767
linkType: hard
1777617768

17777-
"react-device-mockups@npm:^0.1.12":
17778-
version: 0.1.12
17779-
resolution: "react-device-mockups@npm:0.1.12"
17769+
"react-device-mockup@npm:^1.0.0":
17770+
version: 1.0.0
17771+
resolution: "react-device-mockup@npm:1.0.0"
1778017772
peerDependencies:
17781-
html5-device-mockups: ^3.2.1
17782-
prop-types: ^15.5.4
17783-
react: ^15.0.0 || ^16.0.0 || ^17.0.0
17784-
react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
17785-
checksum: 738e969802c32810c2ca3ca3bd6c9bacf9b3d7adda0569c4f5c7fb1d68bab860ac7bb5a50aa2677d852143cb30ab8520e556c4dc7f53be154fd16ca08a9ba32c
17773+
react: "*"
17774+
checksum: 5a653b3e22c9cad567bf607169a710b70dc80c0f5b2b981008c06ff2566535ee809cb0819f0d3663bd2f0e3da6052a1a2b77baea58413e2202c2bab4602aa13e
1778617775
languageName: node
1778717776
linkType: hard
1778817777

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /