Content-Length: 5581 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1520.patch

thub.com From d5b86ecdfdbadd96ba4c477d478adb8baba3ea6b Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 11 Feb 2025 01:50:00 +0500 Subject: [PATCH] update device preview mockups --- client/packages/lowcoder/package.json | 3 +- .../lowcoder/src/pages/editor/editorView.tsx | 42 ++++++++++++++----- client/yarn.lock | 23 +++------- 3 files changed, 39 insertions(+), 29 deletions(-) diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 37d555487..3b40db67c 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -52,7 +52,6 @@ "file-saver": "^2.0.5", "github-markdown-css": "^5.1.0", "hotkeys-js": "^3.8.7", - "html5-device-mockups": "^3.2.1", "immer": "^9.0.7", "less": "^4.1.3", "lodash": "^4.17.21", @@ -68,7 +67,7 @@ "react": "^18.2.0", "react-best-gradient-color-picker": "^3.0.10", "react-colorful": "^5.5.1", - "react-device-mockups": "^0.1.12", + "react-device-mockup": "^1.0.0", "react-documents": "^1.2.1", "react-dom": "^18.2.0", "react-draggable": "^4.4.4", diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx index 50a732c8a..60b000588 100644 --- a/client/packages/lowcoder/src/pages/editor/editorView.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx @@ -256,8 +256,31 @@ export const EditorWrapper = styled.div` const DeviceWrapperInner = styled(Flex)` margin: 2% 0 0; - .screen { - overflow: auto; + .device-mockup.portrait { + > div:first-child { + > div:first-child { + > div:first-child { + > div:nth-child(2) { + display: block !important; + overflow: hidden auto !important; + } + } + } + } + } + .device-mockup.landscape { + > div:first-child { + > div:first-child { + > div:first-child { + > div:nth-child(2) { + > div:first-child { + display: block !important; + overflow: hidden auto !important; + } + } + } + } + } } `; @@ -322,13 +345,11 @@ const DeviceWrapper = ({ useEffect(() => { const loadWrapper = async () => { if (deviceType === "tablet") { - await import('html5-device-mockups/dist/device-mockups.min.css'); - const { IPadPro } = await import("react-device-mockups"); - setWrapper(() => IPadPro); + const { IPadMockup } = await import("react-device-mockup"); + setWrapper(() => IPadMockup); } else if (deviceType === "mobile") { - await import('html5-device-mockups/dist/device-mockups.min.css'); - const { IPhone7 } = await import("react-device-mockups"); - setWrapper(() => IPhone7); + const { IPhoneMockup } = await import("react-device-mockup"); + setWrapper(() => IPhoneMockup); } else { setWrapper(() => null); } @@ -357,8 +378,9 @@ const DeviceWrapper = ({ return ( {children} diff --git a/client/yarn.lock b/client/yarn.lock index ddc5cec80..1589f0bb7 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -11492,13 +11492,6 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard -"html5-device-mockups@npm:^3.2.1": - version: 3.2.1 - resolution: "html5-device-mockups@npm:3.2.1" - checksum: abba0bccc6398313102a9365203092a7c0844879d1b0492168279c516c9462d2a7e016045be565bc183e3405a1ae4929402eaceb1952abdbf16f1580afa68df3 - languageName: node - linkType: hard - "http-cache-semantics@npm:^4.1.1": version: 4.1.1 resolution: "http-cache-semantics@npm:4.1.1" @@ -14203,7 +14196,6 @@ coolshapes-react@lowcoder-org/coolshapes-react: file-saver: ^2.0.5 github-markdown-css: ^5.1.0 hotkeys-js: ^3.8.7 - html5-device-mockups: ^3.2.1 http-proxy-middleware: ^2.0.6 immer: ^9.0.7 less: ^4.1.3 @@ -14220,7 +14212,7 @@ coolshapes-react@lowcoder-org/coolshapes-react: react: ^18.2.0 react-best-gradient-color-picker: ^3.0.10 react-colorful: ^5.5.1 - react-device-mockups: ^0.1.12 + react-device-mockup: ^1.0.0 react-documents: ^1.2.1 react-dom: ^18.2.0 react-draggable: ^4.4.4 @@ -17774,15 +17766,12 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard -"react-device-mockups@npm:^0.1.12": - version: 0.1.12 - resolution: "react-device-mockups@npm:0.1.12" +"react-device-mockup@npm:^1.0.0": + version: 1.0.0 + resolution: "react-device-mockup@npm:1.0.0" peerDependencies: - html5-device-mockups: ^3.2.1 - prop-types: ^15.5.4 - react: ^15.0.0 || ^16.0.0 || ^17.0.0 - react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: 738e969802c32810c2ca3ca3bd6c9bacf9b3d7adda0569c4f5c7fb1d68bab860ac7bb5a50aa2677d852143cb30ab8520e556c4dc7f53be154fd16ca08a9ba32c + react: "*" + checksum: 5a653b3e22c9cad567bf607169a710b70dc80c0f5b2b981008c06ff2566535ee809cb0819f0d3663bd2f0e3da6052a1a2b77baea58413e2202c2bab4602aa13e languageName: node linkType: hard

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!