fixes and enhancements for modal spaces

voxel51 · Sep 5, 2024 · da37796 · da37796
1 parent 3ab7f5b
commit da37796
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 33 deletions.
diff --git a/app/packages/core/src/components/Actions/ActionsRow.tsx b/app/packages/core/src/components/Actions/ActionsRow.tsx
@@ -554,18 +554,6 @@ const ModalActionsRowContainer = styled.div`
     opacity: 1;
     transition: opacity 0.1s ease-out;
   }
-
-  svg {
-    font-size: 14px;
-  }
-
-  > div {
-    max-height: 21px;
-
-    > div:first-child {
-      max-height: 21px;
-    }
-  }
 }`;
 
 const DraggableHandleIconContainer = styled.div`

diff --git a/app/packages/core/src/components/Modal/Modal.tsx b/app/packages/core/src/components/Modal/Modal.tsx
@@ -185,7 +185,7 @@ const Modal = () => {
   const screenParams = useMemo(() => {
     return isFullScreen
       ? { width: "100%", height: "100%" }
-      : { width: "95%", height: "90%", borderRadius: "3px" };
+      : { width: "95%", height: "calc(100% - 70px)", borderRadius: "3px" };
   }, [isFullScreen]);
 
   const activeLookerRef = useRef<fos.Lookers>();

diff --git a/app/packages/core/src/components/Sidebar/Sidebar.tsx b/app/packages/core/src/components/Sidebar/Sidebar.tsx
@@ -733,6 +733,7 @@ const InteractiveSidebar = ({
           scroll.current = target.scrollTop;
           down.current && animate(last.current);
         }}
+        style={modal ? { maxHeight: "calc(100% - 28px)" } : {}}
       >
         <Container
           className={style.sidebar}

diff --git a/app/packages/spaces/src/components/AddPanelButton.tsx b/app/packages/spaces/src/components/AddPanelButton.tsx
@@ -2,8 +2,8 @@ import { IconButton, Popout, scrollable } from "@fiftyone/components";
 import { PluginComponentRegistration } from "@fiftyone/plugins";
 import * as fos from "@fiftyone/state";
 import { Add } from "@mui/icons-material";
-import { useMemo, useRef, useState } from "react";
-import { useRecoilCallback } from "recoil";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useRecoilValue } from "recoil";
 import { usePanels, useSpaceNodes } from "../hooks";
 import { AddPanelButtonProps } from "../types";
 import { panelsCompareFn } from "../utils/sort";
@@ -12,23 +12,16 @@ import { AddPanelButtonContainer } from "./StyledElements";
 
 export default function AddPanelButton({ node, spaceId }: AddPanelButtonProps) {
   const [open, setOpen] = useState(false);
-  const panelsPredicate = useRecoilCallback(
-    ({ snapshot }) =>
-      (panel: PluginComponentRegistration) => {
-        const isModalActive = snapshot
-          .getLoadable(fos.isModalActive)
-          .valueOrThrow();
-        const surface = panel.panelOptions?.surfaces;
-
-        if (isModalActive) {
-          return surface === "modal" || surface === "grid modal";
-        }
-
-        if (surface === "modal") return false;
-
-        return true;
-      },
-    []
+  const isModalActive = useRecoilValue(fos.isModalActive);
+  const panelsPredicate = useCallback(
+    (panel: PluginComponentRegistration) => {
+      const surface = panel.panelOptions?.surfaces;
+      if (isModalActive) {
+        return surface === "modal" || surface === "grid modal";
+      }
+      return surface !== "modal";
+    },
+    [isModalActive]
   );
   const panels = usePanels(panelsPredicate);
   const spaceNodes = useSpaceNodes(spaceId);

diff --git a/app/packages/spaces/src/components/StyledElements.tsx b/app/packages/spaces/src/components/StyledElements.tsx
@@ -17,7 +17,7 @@ export const PanelTabs = styled.div<{ $isModal?: boolean }>`
   background: var(--fo-palette-background-header);
   padding-bottom: 0px;
   position: ${(props) => (props.$isModal ? "absolute" : "initial")};
-  height: ${(props) => (props.$isModal ? "2em" : "initial")};
+  height: ${(props) => (props.$isModal ? "32px" : "initial")};
   z-index: 100001;
   width: 100%;
 `;