feat: move layout options outside

AykutSarac · Dec 21, 2023 · 7539f40 · 7539f40
1 parent a998d84
commit 7539f40
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 53 deletions.
diff --git a/src/containers/Toolbar/OptionsMenu.tsx b/src/containers/Toolbar/OptionsMenu.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { Menu, Text, Flex } from "@mantine/core";
+import { BsCheck2 } from "react-icons/bs";
+import { MdSettings } from "react-icons/md";
+import useConfig from "src/store/useConfig";
+import * as Styles from "./styles";
+
+export const OptionsMenu = () => {
+  const toggleGestures = useConfig(state => state.toggleGestures);
+  const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
+  const toggleDarkMode = useConfig(state => state.toggleDarkMode);
+  const toggleRulers = useConfig(state => state.toggleRulers);
+  const toggleCollapseButton = useConfig(state => state.toggleCollapseButton);
+  const toggleImagePreview = useConfig(state => state.toggleImagePreview);
+
+  const gesturesEnabled = useConfig(state => state.gesturesEnabled);
+  const childrenCountVisible = useConfig(state => state.childrenCountVisible);
+  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
+  const rulersEnabled = useConfig(state => state.rulersEnabled);
+  const collapseButtonVisible = useConfig(state => state.collapseButtonVisible);
+  const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
+
+  return (
+    <Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
+      <Menu.Target>
+        <Styles.StyledToolElement>
+          <Flex gap={4}>
+            <MdSettings size="18" />
+          </Flex>
+        </Styles.StyledToolElement>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          icon={<BsCheck2 opacity={rulersEnabled ? 100 : 0} />}
+          onClick={() => toggleRulers(!rulersEnabled)}
+        >
+          <Text size="xs">Rulers</Text>
+        </Menu.Item>
+        <Menu.Item
+          icon={<BsCheck2 opacity={gesturesEnabled ? 100 : 0} />}
+          onClick={() => toggleGestures(!gesturesEnabled)}
+        >
+          <Text size="xs">Trackpad Gestures</Text>
+        </Menu.Item>
+        <Menu.Item
+          icon={<BsCheck2 opacity={childrenCountVisible ? 100 : 0} />}
+          onClick={() => toggleChildrenCount(!childrenCountVisible)}
+        >
+          <Text size="xs">Item Count</Text>
+        </Menu.Item>
+        <Menu.Item
+          icon={<BsCheck2 opacity={imagePreviewEnabled ? 100 : 0} />}
+          onClick={() => toggleImagePreview(!imagePreviewEnabled)}
+        >
+          <Text size="xs">Image Link Preview</Text>
+        </Menu.Item>
+        <Menu.Item
+          icon={<BsCheck2 opacity={collapseButtonVisible ? 100 : 0} />}
+          onClick={() => toggleCollapseButton(!collapseButtonVisible)}
+        >
+          <Text size="xs">Show Expand/Collapse</Text>
+        </Menu.Item>
+        <Menu.Item
+          icon={<BsCheck2 opacity={darkmodeEnabled ? 100 : 0} />}
+          onClick={() => toggleDarkMode(!darkmodeEnabled)}
+        >
+          <Text size="xs">Dark Mode</Text>
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
diff --git a/src/containers/Toolbar/ZoomMenu.tsx b/src/containers/Toolbar/ZoomMenu.tsx
@@ -1,32 +1,16 @@
 import React from "react";
 import { Menu, Flex, Input, Text } from "@mantine/core";
 import { getHotkeyHandler, useHotkeys } from "@mantine/hooks";
-import { BsCheck2 } from "react-icons/bs";
 import { CgChevronDown } from "react-icons/cg";
-import useConfig from "src/store/useConfig";
 import useGraph from "src/store/useGraph";
 import * as Styles from "./styles";
 
 export const ZoomMenu = () => {
   const zoomIn = useGraph(state => state.zoomIn);
   const zoomOut = useGraph(state => state.zoomOut);
-  const toggleGestures = useConfig(state => state.toggleGestures);
-  const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
-  const toggleDarkMode = useConfig(state => state.toggleDarkMode);
-  const toggleRulers = useConfig(state => state.toggleRulers);
-  const toggleCollapseButton = useConfig(state => state.toggleCollapseButton);
-  const toggleImagePreview = useConfig(state => state.toggleImagePreview);
-
   const centerView = useGraph(state => state.centerView);
   const setZoomFactor = useGraph(state => state.setZoomFactor);
 
-  const gesturesEnabled = useConfig(state => state.gesturesEnabled);
-  const childrenCountVisible = useConfig(state => state.childrenCountVisible);
-  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
-  const rulersEnabled = useConfig(state => state.rulersEnabled);
-  const collapseButtonVisible = useConfig(state => state.collapseButtonVisible);
-  const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
-
   const zoomFactor = useGraph(state => state.viewPort?.zoomFactor || 1);
   const [tempZoomValue, setTempZoomValue] = React.useState(zoomFactor);
 
@@ -78,43 +62,6 @@ export const ZoomMenu = () => {
         <Menu.Item onClick={() => setZoomFactor(200 / 100)}>
           <Text size="xs">Zoom to %200</Text>
         </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item
-          icon={<BsCheck2 opacity={rulersEnabled ? 100 : 0} />}
-          onClick={() => toggleRulers(!rulersEnabled)}
-        >
-          <Text size="xs">Rulers</Text>
-        </Menu.Item>
-        <Menu.Item
-          icon={<BsCheck2 opacity={gesturesEnabled ? 100 : 0} />}
-          onClick={() => toggleGestures(!gesturesEnabled)}
-        >
-          <Text size="xs">Trackpad Gestures</Text>
-        </Menu.Item>
-        <Menu.Item
-          icon={<BsCheck2 opacity={childrenCountVisible ? 100 : 0} />}
-          onClick={() => toggleChildrenCount(!childrenCountVisible)}
-        >
-          <Text size="xs">Item Count</Text>
-        </Menu.Item>
-        <Menu.Item
-          icon={<BsCheck2 opacity={imagePreviewEnabled ? 100 : 0} />}
-          onClick={() => toggleImagePreview(!imagePreviewEnabled)}
-        >
-          <Text size="xs">Image Link Preview</Text>
-        </Menu.Item>
-        <Menu.Item
-          icon={<BsCheck2 opacity={collapseButtonVisible ? 100 : 0} />}
-          onClick={() => toggleCollapseButton(!collapseButtonVisible)}
-        >
-          <Text size="xs">Show Expand/Collapse</Text>
-        </Menu.Item>
-        <Menu.Item
-          icon={<BsCheck2 opacity={darkmodeEnabled ? 100 : 0} />}
-          onClick={() => toggleDarkMode(!darkmodeEnabled)}
-        >
-          <Text size="xs">Dark Mode</Text>
-        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );

diff --git a/src/containers/Toolbar/index.tsx b/src/containers/Toolbar/index.tsx
@@ -11,6 +11,7 @@ import useJson from "src/store/useJson";
 import useModal from "src/store/useModal";
 import { AccountMenu } from "./AccountMenu";
 import { Logo } from "./Logo";
+import { OptionsMenu } from "./OptionsMenu";
 import { ToolsMenu } from "./ToolsMenu";
 import { ViewMenu } from "./ViewMenu";
 import { ViewModeMenu } from "./ViewModeMenu";
@@ -101,6 +102,7 @@ export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false })
             </Styles.StyledToolElement>
             <ZoomMenu />
             <AccountMenu />
+            <OptionsMenu />
             <Styles.StyledToolElement
               title="Fullscreen"
               $hide={isWidget}