fixed(dropZone): fixed textpopup style (#349)

OPEN-ENT-NG · Dec 1, 2024 · 8a99137 · 8a99137
1 parent 4ab47ef
commit 8a99137
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 39 deletions.
diff --git a/frontend/src/components/board-view/style.ts b/frontend/src/components/board-view/style.ts
@@ -1,66 +1,67 @@
-import { styled } from "@mui/material";
+import { Box, styled } from "@mui/material";
 
-export const BoardViewWrapper = styled("div")<{
-  layout: string;
-}>(({ layout }) => {
-  const boardStyle = {
-    display: "contents",
-  };
-
-  let layoutStyle;
+import { BoardBodyWrapperProps, BoardViewWrapperProps } from "./types";
+import { LAYOUT_TYPE } from "~/core/enums/layout-type.enum";
 
-  switch (layout) {
-    case "free":
-      layoutStyle = { overflowY: "scroll", overflowX: "hidden" };
-      break;
-    case "vertical":
-      layoutStyle = { overflowX: "scroll", overflowY: "hidden" };
-      break;
-    case "horizontal":
-      layoutStyle = { overflowY: "scroll", overflowX: "hidden" };
-      break;
-    default:
-      layoutStyle = { overflowY: "scroll", overflowX: "hidden" };
-      break;
-  }
-  return { ...layoutStyle, ...boardStyle };
-});
+export const BoardViewWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "layout",
+})<BoardViewWrapperProps>(({ layout }) => ({
+  display: "contents",
+  ...(layout === LAYOUT_TYPE.FREE && {
+    overflowY: "scroll",
+    overflowX: "hidden",
+  }),
+  ...(layout === LAYOUT_TYPE.VERTICAL && {
+    overflowX: "scroll",
+    overflowY: "hidden",
+  }),
+  ...(layout === LAYOUT_TYPE.HORIZONTAL && {
+    overflowY: "scroll",
+    overflowX: "hidden",
+  }),
+}));
 
-export const BoardBodyWrapper = styled("div")<{
-  layout: string;
-  headerHeight: number;
-}>(({ layout, headerHeight }) => {
+export const BoardBodyWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "layout" && prop !== "headerHeight",
+})<BoardBodyWrapperProps>(({ layout, headerHeight }) => {
   const boardStyle = {
     position: "relative",
     display: "flex",
     borderTop: "solid 1px $magneto-white-blue",
     borderBottom: "solid 1px $magneto-white-blue",
     backgroundSize: "cover",
     width: "100%",
-  };
+  } as const;
 
-  let layoutStyle;
+  let layoutStyle: { height: string; minHeight: string };
 
   switch (layout) {
-    case "free":
-      layoutStyle = { height: `100%`, minHeight: `100vh` };
+    case LAYOUT_TYPE.FREE:
+      layoutStyle = {
+        height: "100%",
+        minHeight: "100vh",
+      };
       break;
-    case "vertical":
+    case LAYOUT_TYPE.VERTICAL:
       layoutStyle = {
         height: `calc(100vh - ${headerHeight}px)`,
-        minHeight: `unset`,
+        minHeight: "unset",
       };
       break;
-    case "horizontal":
+    case LAYOUT_TYPE.HORIZONTAL:
       layoutStyle = {
-        height: `100%`,
+        height: "100%",
         minHeight: `calc(100vh - ${headerHeight}px)`,
       };
       break;
     default:
-      layoutStyle = { height: `100%`, minHeight: `100vh` };
+      layoutStyle = {
+        height: "100%",
+        minHeight: "100vh",
+      };
       break;
   }
+
   return { ...layoutStyle, ...boardStyle };
 });
 

diff --git a/frontend/src/components/board-view/types.ts b/frontend/src/components/board-view/types.ts
@@ -1,5 +1,7 @@
 import { MediaLibraryType } from "@edifice-ui/react";
 
+import { LAYOUT_TYPE } from "~/core/enums/layout-type.enum";
+
 export interface MediaProps {
   id: string;
   name: string;
@@ -12,3 +14,12 @@ export interface MediaProps {
 export interface IsModalOpenState {
   magnet: boolean;
 }
+
+export interface BoardBodyWrapperProps {
+  layout: LAYOUT_TYPE;
+  headerHeight: number;
+}
+
+export interface BoardViewWrapperProps {
+  layout: LAYOUT_TYPE;
+}
diff --git a/frontend/src/components/file-drop-zone/style.ts b/frontend/src/components/file-drop-zone/style.ts
@@ -22,7 +22,7 @@ export const innerBox = {
 };
 
 export const flyingBox = {
-  position: "absolute",
+  position: "fixed",
   bottom: "20%",
   left: "50%",
   transform: "translateX(-50%)",