feat(picture edition): add desktop layout

betagouv · Nov 15, 2024 · e00ddfb · e00ddfb
1 parent 3e98c35
commit e00ddfb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/packages/frontend/src/features/upload/DrawingCanvas.tsx b/packages/frontend/src/features/upload/DrawingCanvas.tsx
@@ -287,7 +287,7 @@ export const ImageCanvas = ({
           disabled={lines.length === 0}
           <i className={fr.cx("fr-icon--md", "ri-arrow-go-back-line")} />
 */}
-      <Stack pos="absolute" top="26px" right="16px" gap="18px" flexDir="row" alignItems="center">
+      <Stack pos="absolute" top="26px" right={{ base: "16px" }} gap="18px" flexDir="row" alignItems="center">
         {/* @ts-ignore */}
         <Button
           className={css({ bgColor: "white" })}
@@ -304,7 +304,7 @@ export const ImageCanvas = ({
         </Button>
       </Stack>
 
-      <styled.div flex="1" border="1px solid #e5e7eb" borderRadius="0.25rem" overflow="hidden">
+      <styled.div flex="1" borderRadius="0.25rem" overflow="hidden">
         <styled.canvas
           ref={canvasRef}
           onMouseDown={handleMouseDown}
@@ -320,7 +320,7 @@ export const ImageCanvas = ({
         />
       </styled.div>
       <Flex justifyContent="center" alignItems="center">
-        <Stack gap="20px" flexDir="row" justifyContent="center" alignItems="center" p="18px">
+        <Stack gap="14px" flexDir="row" justifyContent="center" alignItems="center" p="18px">
           {colors.map((color) => (
             <styled.button
               type="button"

diff --git a/packages/frontend/src/features/upload/UploadImage.tsx b/packages/frontend/src/features/upload/UploadImage.tsx
@@ -10,7 +10,7 @@ import {
   syncImages,
   syncPictureLines,
 } from "../idb";
-import { Box, Flex, Grid, Stack, styled } from "#styled-system/jsx";
+import { Box, Center, Flex, Grid, Stack, styled } from "#styled-system/jsx";
 import { InputGroup } from "#components/InputGroup.tsx";
 import { cx } from "#styled-system/css";
 import { Tmp_pictures, Pictures, Report } from "@cr-vif/electric-client/frontend";
@@ -115,28 +115,39 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
   return (
     <>
       <styled.div
-        ref={containerRef}
         display={selectedPicture ? "initial" : "none"}
         zIndex="1000"
         pos="fixed"
         top="0"
         left="0"
         right="0"
         bottom="0"
-        w="100%"
-        h={{ base: "100vh" }}
-        bgColor="white"
+        w="100vw"
+        h="100vh"
+        // w={{ base: "100%", lg: "634px" }}
+        // h={{ base: "100vh", lg: "792px" }}
       >
-        {selectedPicture ? (
-          <ImageCanvas
-            closeModal={() => setSelectedPicture(null)}
-            notifyPictureLines={notifyPictureLines.mutate}
-            pictureId={selectedPicture.id}
-            url={selectedPicture.url}
-            containerRef={containerRef}
-            lines={linesQuery.data}
-          />
-        ) : null}
+        <styled.div pos="fixed" top="0" left="0" right="0" bottom="0" bgColor="rgba(0, 0, 0, 0.5)"></styled.div>
+        <Center w="100%" h="100%">
+          <styled.div
+            ref={containerRef}
+            position="relative"
+            w={{ base: "100%", lg: "634px" }}
+            h={{ base: "100vh", lg: "792px" }}
+            bgColor="white"
+          >
+            {selectedPicture ? (
+              <ImageCanvas
+                closeModal={() => setSelectedPicture(null)}
+                notifyPictureLines={notifyPictureLines.mutate}
+                pictureId={selectedPicture.id}
+                url={selectedPicture.url}
+                containerRef={containerRef}
+                lines={linesQuery.data}
+              />
+            ) : null}
+          </styled.div>
+        </Center>
       </styled.div>
       <Button
         type="button"