chore(web): fix story page/block ui/ux (#701)

reearth · Sep 25, 2023 · af7d3b3 · af7d3b3
1 parent 57bbc38
commit af7d3b3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx b/web/src/beta/lib/core/StoryPanel/Page/BlockAddBar.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import Icon from "@reearth/beta/components/Icon";
 import * as Popover from "@reearth/beta/components/Popover";
@@ -36,12 +36,20 @@ const BlockAddBar: React.FC<Props> = ({
     [installableStoryBlocks, pageId, onBlockAdd, onBlockOpen],
   );
 
+  const handleBlockOpen = useCallback(
+    (e: React.MouseEvent<Element> | undefined) => {
+      e?.stopPropagation();
+      onBlockOpen();
+    },
+    [onBlockOpen],
+  );
+
   return (
     <Wrapper>
       <Popover.Provider open={openBlocks} placement="bottom-start" onOpenChange={onBlockOpen}>
         <Popover.Trigger asChild>
           <Bar persist={openBlocks}>
-            <StyledIcon icon="plus" size={16} onClick={onBlockOpen} />
+            <StyledIcon icon="plus" size={16} onClick={handleBlockOpen} />
             <Line />
           </Bar>
         </Popover.Trigger>

diff --git a/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx b/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx
@@ -156,7 +156,7 @@ const StoryContent: React.FC<Props> = ({
             onBlockSelect={onBlockSelect}
             onPropertyUpdate={onPropertyUpdate}
           />
-          <PageGap height={pageGap} />
+          <PageGap height={pageGap} onClick={() => onPageSelect?.(p.id)} />
         </Fragment>
       ))}
     </PagesWrapper>