Refactor input styles, implement 3D toggle state management, and enhance FileMenu with dropdown options
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user