Refactor input styles, implement 3D toggle state management, and enhance FileMenu with dropdown options
This commit is contained in:
parent
988d7c92db
commit
8fc4453cee
|
|
@ -1,12 +1,24 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import RenameInput from "./inputs/RenameInput";
|
||||
import { ArrowIcon } from "../icons/ExportCommonIcons";
|
||||
import MenuBar from "./menu/menu";
|
||||
|
||||
const FileMenu: React.FC = () => {
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
return (
|
||||
<div className="project-dropdowm-container">
|
||||
<div className="project-name">
|
||||
<RenameInput value="untitled" />
|
||||
</div>
|
||||
<div
|
||||
className="more-options-button"
|
||||
onClick={() => {
|
||||
setOpenMenu(!openMenu);
|
||||
}}
|
||||
>
|
||||
<ArrowIcon />
|
||||
{openMenu && <MenuBar setOpenMenu={setOpenMenu} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import {
|
|||
ZoneIcon,
|
||||
} from "../icons/ExportToolsIcons";
|
||||
import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
|
||||
import useModuleStore from "../../store/useModuleStore";
|
||||
import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
|
||||
import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate";
|
||||
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
||||
import useTemplateStore from "../../store/useTemplateStore";
|
||||
|
|
@ -36,8 +36,8 @@ import useToggleStore from "../../store/useUIToggleStore";
|
|||
const Tools: React.FC = () => {
|
||||
const { templates } = useTemplateStore();
|
||||
const [activeSubTool, setActiveSubTool] = useState("cursor");
|
||||
const [toggleThreeD, setToggleThreeD] = useState(true);
|
||||
const { toggleUI, setToggleUI } = useToggleStore();
|
||||
const { toggleThreeD, setToggleThreeD } = useThreeDStore();
|
||||
const { setToggleUI } = useToggleStore();
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const [openDrop, setOpenDrop] = useState(false);
|
||||
|
|
@ -62,7 +62,11 @@ const Tools: React.FC = () => {
|
|||
|
||||
// Reset activeTool whenever activeModule changes
|
||||
useEffect(() => {
|
||||
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
||||
setToggleUI(
|
||||
localStorage.getItem("navBarUi")
|
||||
? localStorage.getItem("navBarUi") === "true"
|
||||
: true
|
||||
);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -80,7 +84,11 @@ const Tools: React.FC = () => {
|
|||
} else {
|
||||
setToggleView(false);
|
||||
}
|
||||
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
|
||||
setToggleUI(
|
||||
localStorage.getItem("navBarUi")
|
||||
? localStorage.getItem("navBarUi") === "true"
|
||||
: true
|
||||
);
|
||||
setToggleThreeD(!toggleThreeD);
|
||||
setActiveSubTool("cursor");
|
||||
setActiveTool("cursor");
|
||||
|
|
@ -202,8 +210,9 @@ const Tools: React.FC = () => {
|
|||
<div className="activeDropicon">
|
||||
{activeSubTool == "cursor" && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "cursor" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "cursor" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("cursor");
|
||||
}}
|
||||
|
|
@ -213,8 +222,9 @@ const Tools: React.FC = () => {
|
|||
)}
|
||||
{activeSubTool == "free-hand" && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "free-hand" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "free-hand" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("free-hand");
|
||||
}}
|
||||
|
|
@ -224,8 +234,9 @@ const Tools: React.FC = () => {
|
|||
)}
|
||||
{activeSubTool == "delete" && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "delete" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "delete" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("delete");
|
||||
}}
|
||||
|
|
@ -297,8 +308,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="draw-tools">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-wall" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-wall");
|
||||
}}
|
||||
|
|
@ -307,8 +319,9 @@ const Tools: React.FC = () => {
|
|||
<WallIcon isActive={activeTool === "draw-wall"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-zone" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-zone");
|
||||
}}
|
||||
|
|
@ -317,8 +330,9 @@ const Tools: React.FC = () => {
|
|||
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-aisle" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-aisle");
|
||||
}}
|
||||
|
|
@ -327,8 +341,9 @@ const Tools: React.FC = () => {
|
|||
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "draw-floor" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("draw-floor");
|
||||
}}
|
||||
|
|
@ -344,8 +359,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="draw-tools">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "measure" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "measure" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("measure");
|
||||
}}
|
||||
|
|
@ -361,8 +377,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="draw-tools">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "pen" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "pen" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("pen");
|
||||
}}
|
||||
|
|
@ -394,8 +411,9 @@ const Tools: React.FC = () => {
|
|||
<div className="split"></div>
|
||||
<div className="general-options">
|
||||
<div
|
||||
className={`tool-button ${activeTool === "comment" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "comment" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setActiveTool("comment");
|
||||
}}
|
||||
|
|
@ -404,8 +422,9 @@ const Tools: React.FC = () => {
|
|||
</div>
|
||||
{toggleThreeD && (
|
||||
<div
|
||||
className={`tool-button ${activeTool === "play" ? "active" : ""
|
||||
}`}
|
||||
className={`tool-button ${
|
||||
activeTool === "play" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsPlaying(!isPlaying);
|
||||
}}
|
||||
|
|
@ -414,19 +433,28 @@ const Tools: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
<div
|
||||
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
|
||||
}`}
|
||||
onClick={toggleSwitch}
|
||||
>
|
||||
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
|
||||
2d
|
||||
</div>
|
||||
<div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
|
||||
3d
|
||||
</div>
|
||||
</div>
|
||||
{activeModule === "builder" && (
|
||||
<>
|
||||
<div className="split"></div>
|
||||
<div
|
||||
className={`toggle-threed-button${
|
||||
toggleThreeD ? " toggled" : ""
|
||||
}`}
|
||||
onClick={toggleSwitch}
|
||||
>
|
||||
<div
|
||||
className={`toggle-option${!toggleThreeD ? " active" : ""}`}
|
||||
>
|
||||
2d
|
||||
</div>
|
||||
<div
|
||||
className={`toggle-option${toggleThreeD ? " active" : ""}`}
|
||||
>
|
||||
3d
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import { ArrowIcon } from "../../icons/ExportCommonIcons";
|
||||
|
||||
const MenuBar = () => {
|
||||
interface MenuBarProps {
|
||||
setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
|
||||
}
|
||||
|
||||
const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
|
||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||
const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
|
||||
|
||||
|
|
@ -18,7 +23,12 @@ const MenuBar = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="menu-bar">
|
||||
<div
|
||||
className="menu-bar"
|
||||
onPointerLeave={() => {
|
||||
setOpenMenu(false);
|
||||
}}
|
||||
>
|
||||
{/* Top-level menu buttons */}
|
||||
<div className="menu-buttons">
|
||||
{/* File Menu */}
|
||||
|
|
@ -32,7 +42,9 @@ const MenuBar = () => {
|
|||
>
|
||||
<div className="menu-button">
|
||||
File
|
||||
<span className="dropdown-icon">▾</span>
|
||||
<span className="dropdown-icon">
|
||||
<ArrowIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* File Dropdown */}
|
||||
|
|
@ -44,10 +56,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("New File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["New File"] && "✓ "}
|
||||
New File
|
||||
</span>
|
||||
<span>New File</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + N</span>
|
||||
</div>
|
||||
|
|
@ -60,10 +69,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Open Local File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Open Local File"] && "✓ "}
|
||||
Open Local File
|
||||
</span>
|
||||
<span>Open Local File</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + O</span>
|
||||
</div>
|
||||
|
|
@ -76,10 +82,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Save Version")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Save Version"] && "✓ "}
|
||||
Save Version
|
||||
</span>
|
||||
<span>Save Version</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
|
@ -90,10 +93,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Make a Copy")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Make a Copy"] && "✓ "}
|
||||
Make a Copy
|
||||
</span>
|
||||
<span>Make a Copy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -103,10 +103,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Share")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Share"] && "✓ "}
|
||||
Share
|
||||
</span>
|
||||
<span>Share</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -116,10 +113,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Rename")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Rename"] && "✓ "}
|
||||
Rename
|
||||
</span>
|
||||
<span>Rename</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
|
@ -130,10 +124,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Import")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Import"] && "✓ "}
|
||||
Import
|
||||
</span>
|
||||
<span>Import</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -143,10 +134,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Close File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Close File"] && "✓ "}
|
||||
Close File
|
||||
</span>
|
||||
<span>Close File</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,7 +152,9 @@ const MenuBar = () => {
|
|||
>
|
||||
<div className="menu-button">
|
||||
Edit
|
||||
<span className="dropdown-icon">▾</span>
|
||||
<span className="dropdown-icon">
|
||||
<ArrowIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Edit Dropdown */}
|
||||
|
|
@ -176,10 +166,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Undo")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Undo"] && "✓ "}
|
||||
Undo
|
||||
</span>
|
||||
<span>Undo</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Z</span>
|
||||
</div>
|
||||
|
|
@ -192,10 +179,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Redo")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Redo"] && "✓ "}
|
||||
Redo
|
||||
</span>
|
||||
<span>Redo</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Shift + Z</span>
|
||||
</div>
|
||||
|
|
@ -209,10 +193,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Undo History")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Undo History"] && "✓ "}
|
||||
Undo History
|
||||
</span>
|
||||
<span>Undo History</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -222,10 +203,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Redo History")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Redo History"] && "✓ "}
|
||||
Redo History
|
||||
</span>
|
||||
<span>Redo History</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
|
@ -236,10 +214,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Find")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Find"] && "✓ "}
|
||||
Find
|
||||
</span>
|
||||
<span>Find</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + F</span>
|
||||
</div>
|
||||
|
|
@ -252,10 +227,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Delete")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Delete"] && "✓ "}
|
||||
Delete
|
||||
</span>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -265,10 +237,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Select by...")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Select by..."] && "✓ "}
|
||||
Select by...
|
||||
</span>
|
||||
<span>Select by...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -278,10 +247,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Keymap")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Keymap"] && "✓ "}
|
||||
Keymap
|
||||
</span>
|
||||
<span>Keymap</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -299,7 +265,9 @@ const MenuBar = () => {
|
|||
>
|
||||
<div className="menu-button">
|
||||
View
|
||||
<span className="dropdown-icon">▾</span>
|
||||
<span className="dropdown-icon">
|
||||
<ArrowIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* View Dropdown */}
|
||||
|
|
@ -311,10 +279,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Grid")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Grid"] && "✓ "}
|
||||
Grid
|
||||
</span>
|
||||
<span>Grid</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -325,11 +290,10 @@ const MenuBar = () => {
|
|||
onMouseLeave={() => setActiveSubMenu(null)}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Gizmo"] && "✓ "}
|
||||
Gizmo
|
||||
<span>Gizmo</span>
|
||||
<span className="dropdown-icon">
|
||||
<ArrowIcon />
|
||||
</span>
|
||||
<span className="icon">▾</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
|
|
@ -346,16 +310,14 @@ const MenuBar = () => {
|
|||
Visibility
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
{/* Cube view */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Cube view")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Cube view"] && "✓ "}
|
||||
Cube view
|
||||
</span>
|
||||
<span>Cube view</span>
|
||||
</div>
|
||||
|
||||
{/* Sphere view */}
|
||||
|
|
@ -363,21 +325,7 @@ const MenuBar = () => {
|
|||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Sphere view")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Sphere view"] && "✓ "}
|
||||
Sphere view
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Custom settings */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Custom settings")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Custom settings"] && "✓ "}
|
||||
Custom settings
|
||||
</span>
|
||||
<span>Sphere view</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -389,10 +337,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Zoom")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Zoom"] && "✓ "}
|
||||
Zoom
|
||||
</span>
|
||||
<span>Zoom</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -402,10 +347,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Full Screen")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Full Screen"] && "✓ "}
|
||||
Full Screen
|
||||
</span>
|
||||
<span>Full Screen</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">F11</span>
|
||||
</div>
|
||||
|
|
@ -424,11 +366,7 @@ const MenuBar = () => {
|
|||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Version history
|
||||
</div>
|
||||
|
||||
|
||||
<div className="menu-button">Version history</div>
|
||||
</div>
|
||||
|
||||
{/* Export As Menu */}
|
||||
|
|
@ -440,14 +378,11 @@ const MenuBar = () => {
|
|||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Export as...
|
||||
</div>
|
||||
|
||||
<div className="menu-button">Export as...</div>
|
||||
</div>
|
||||
|
||||
{/* Apps Menu */}
|
||||
<div
|
||||
{/* <div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Apps")}
|
||||
onMouseLeave={() => {
|
||||
|
|
@ -457,68 +392,64 @@ const MenuBar = () => {
|
|||
>
|
||||
<div className="menu-button">
|
||||
Apps
|
||||
<span className="dropdown-icon">▾</span>
|
||||
<span className="dropdown-icon">
|
||||
<ArrowIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Apps Dropdown */}
|
||||
{activeMenu === "Apps" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* New App */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("New App")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["New App"] && "✓ "}
|
||||
|
||||
New App
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Work-flow Monitor */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Work-flow Monitor")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Work-flow Monitor"] && "✓ "}
|
||||
|
||||
Work-flow Monitor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temperature Visualizer */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Temperature Visualizer")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Temperature Visualizer"] && "✓ "}
|
||||
|
||||
Temperature Visualizer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View all */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("View all")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["View all"] && "✓ "}
|
||||
|
||||
View all
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Help Menu */}
|
||||
<div
|
||||
|
|
@ -531,7 +462,9 @@ const MenuBar = () => {
|
|||
>
|
||||
<div className="menu-button">
|
||||
Help
|
||||
<span className="dropdown-icon">▾</span>
|
||||
<span className="dropdown-icon">
|
||||
<ArrowIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Help Dropdown */}
|
||||
|
|
@ -543,10 +476,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Shortcuts")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Shortcuts"] && "✓ "}
|
||||
Shortcuts
|
||||
</span>
|
||||
<span>Shortcuts</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Shift + ?</span>
|
||||
</div>
|
||||
|
|
@ -559,10 +489,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Manual")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Manual"] && "✓ "}
|
||||
Manual
|
||||
</span>
|
||||
<span>Manual</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -572,10 +499,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Video Tutorials")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Video Tutorials"] && "✓ "}
|
||||
Video Tutorials
|
||||
</span>
|
||||
<span>Video Tutorials</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -585,10 +509,7 @@ const MenuBar = () => {
|
|||
onClick={() => toggleSelection("Report a bug")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Report a bug"] && "✓ "}
|
||||
Report a bug
|
||||
</span>
|
||||
<span>Report a bug</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -600,5 +521,3 @@ const MenuBar = () => {
|
|||
};
|
||||
|
||||
export default MenuBar;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useEffect } from "react";
|
|||
import ModuleToggle from "../components/ui/ModuleToggle";
|
||||
import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
|
||||
import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
|
||||
import useModuleStore from "../store/useModuleStore";
|
||||
import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
|
||||
import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization";
|
||||
import Tools from "../components/ui/Tools";
|
||||
// import Scene from "../modules/scene/scene";
|
||||
|
|
@ -49,14 +49,14 @@ const Project: React.FC = () => {
|
|||
}
|
||||
}, []);
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { toggleThreeD } = useThreeDStore();
|
||||
|
||||
return (
|
||||
<div className="project-main">
|
||||
{loadingProgress && <LoadingPage progress={loadingProgress} />}
|
||||
{!isPlaying && (
|
||||
<>
|
||||
<ModuleToggle />
|
||||
<ModuleToggle />
|
||||
{toggleThreeD && <ModuleToggle />}
|
||||
<SideBarLeft />
|
||||
<SideBarRight />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -23,4 +23,17 @@ const useSubModuleStore = create<SubModuleStore>((set) => ({
|
|||
setSubModule: (subModule) => set({ subModule }), // Update subModule state
|
||||
}));
|
||||
|
||||
export { useSubModuleStore };
|
||||
export { useSubModuleStore };
|
||||
|
||||
interface ThreeDState {
|
||||
toggleThreeD: boolean;
|
||||
setToggleThreeD: (value: boolean) => void;
|
||||
}
|
||||
|
||||
// Create the Zustand store
|
||||
const useThreeDStore = create<ThreeDState>((set) => ({
|
||||
toggleThreeD: true, // Initial state
|
||||
setToggleThreeD: (value) => set({ toggleThreeD: value }), // Action to update the state
|
||||
}));
|
||||
|
||||
export { useThreeDStore };
|
||||
|
|
@ -155,16 +155,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.project-dropdowm-container {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
|
||||
.project-name {
|
||||
line-height: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
width: 100%;
|
||||
min-width: 80px;
|
||||
|
|
@ -655,4 +645,4 @@ input {
|
|||
.multi-email-invite-input.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,58 @@
|
|||
@use "../../abstracts/variables" as *;
|
||||
@use "../../abstracts/mixins" as *;
|
||||
|
||||
.project-dropdowm-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
.project-name {
|
||||
line-height: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
.more-options-button {
|
||||
@include flex-center;
|
||||
border-radius: #{$border-radius-small};
|
||||
height: 28px;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
path {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-options-button.active {
|
||||
background: var(--highlight-accent-color);
|
||||
path {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 32px;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
.menu-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 8px 4px;
|
||||
padding: 4px;
|
||||
min-width: 178px;
|
||||
|
||||
.menu-button-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
|
||||
padding: 4px 8px 4px 12px;
|
||||
border-radius: #{$border-radius-small};
|
||||
.menu-button {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
|
@ -32,7 +65,7 @@
|
|||
.dropdown-icon {
|
||||
margin-left: 5px;
|
||||
font-size: var(--font-size-small);
|
||||
color: #666666;
|
||||
rotate: -90deg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,20 +79,21 @@
|
|||
box-shadow: var(--box-shadow-light);
|
||||
border: 1px solid var(--background-color);
|
||||
z-index: 100;
|
||||
padding: 5px 0;
|
||||
|
||||
padding: 4px;
|
||||
.menu-item-container {
|
||||
position: relative;
|
||||
|
||||
.menu-item {
|
||||
padding: 4px 8px 4px 12px;
|
||||
border-radius: #{$border-radius-small};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color);
|
||||
|
||||
.dropdown-icon {
|
||||
rotate: -90deg;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
|
|
@ -92,19 +126,20 @@
|
|||
box-shadow: var(--box-shadow-light);
|
||||
border: 1px solid var(--background-color);
|
||||
z-index: 101;
|
||||
|
||||
padding: 4px;
|
||||
.submenu-item {
|
||||
padding: 8px 20px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px 4px 12px;
|
||||
border-radius: #{$border-radius-small};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-gray);
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
|
@ -122,6 +157,7 @@
|
|||
.split {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e0dfff;
|
||||
background-color: var(--highlight-accent-color);
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue