diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx index e249bad..210f1b9 100644 --- a/app/src/components/icons/ContextMenuIcons.tsx +++ b/app/src/components/icons/ContextMenuIcons.tsx @@ -160,3 +160,153 @@ export function RenameIcon() { ); } + +export function FocusIcon() { + return ( + + + + + ); +} + +export function TransformIcon() { + return ( + + + + + + + + + + + + ); +} + +export function DublicateIcon() { + return ( + + + + + + + + + + + + + + ); +} + +export function CopyIcon() { + return ( + + + + + + + + + + + + ); +} + +export function PasteIcon() { + return ( + + + + + + + + + + + + ); +} + +export function ModifiersIcon() { + return ( + + + + + ); +} + +export function DeleteIcon() { + return ( + + + + + + + + + + + ); +} + +export function MoveIcon() { + return ( + + + + + + + + + + + ); +} + +export function RotateIcon() { + return ( + + + + ); +} + +export function GroupIcon() { + return ( + + + + ); +} + +export function ArrayIcon() { + return ( + + + + + + ); +} + +export function SubMenuIcon() { + return ( + + + + + ); +} + diff --git a/app/src/components/ui/menu/contextMenu.tsx b/app/src/components/ui/menu/contextMenu.tsx index 8996f19..9069da8 100644 --- a/app/src/components/ui/menu/contextMenu.tsx +++ b/app/src/components/ui/menu/contextMenu.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { ArrayIcon, CopyIcon, DeleteIcon, DublicateIcon, FlipXAxisIcon, FlipZAxisIcon, FocusIcon, GroupIcon, ModifiersIcon, MoveIcon, PasteIcon, RenameIcon, RotateIcon, SubMenuIcon, TransformIcon } from "../../icons/ContextMenuIcons"; type ContextMenuProps = { visibility: { @@ -45,161 +46,140 @@ const ContextMenu: React.FC = ({ onArray, onDelete, }) => { - const styles: { [key: string]: React.CSSProperties } = { - contextMenu: { - position: "absolute", - top: 0, - left: 0, - backgroundColor: "#2c2c2c", - borderRadius: "6px", - padding: "8px", - color: "white", - fontFamily: "sans-serif", - fontSize: "14px", - boxShadow: "0 0 8px rgba(0,0,0,0.4)", - zIndex: 1000, - }, - menuItem: { - margin: "4px 0", - }, - button: { - background: "none", - border: "none", - color: "inherit", - display: "flex", - justifyContent: "space-between", - width: "180px", - padding: "4px 8px", - cursor: "pointer", - }, - submenu: { - marginLeft: "10px", - marginTop: "4px", - backgroundColor: "#3a3a3a", - borderRadius: "4px", - padding: "4px", - }, - shortcut: { - opacity: 0.6, - }, - }; + + return ( -
-
- {visibility.rename && ( -
- +
+ {visibility.rename && ( +
+ + F2 +
+ )} + {visibility.focus && ( +
+ + F +
+ )} + {visibility.flipX && ( +
+ +
+ )} + {visibility.flipZ && ( +
+ +
+ )} + {(visibility.move || visibility.rotate) && ( +
+ +
+
+ {visibility.move && ( +
+ + G +
+ )} + {visibility.rotate && ( +
+ + R +
+ )}
- )} - {visibility.focus && ( -
- +
+ )} + {visibility.duplicate && ( +
+ + Ctrl + D +
+ )} + {visibility.copy && ( +
+ + Ctrl + C +
+ )} + {visibility.paste && ( +
+ + Ctrl + V +
+ )} + {visibility.modifier && ( +
+
+ +
+ )} + {(visibility.group || visibility.array) && ( +
+ +
+ {visibility.group && ( +
+ + Ctrl + G +
+ )} + {visibility.array && ( +
+ +
+ )}
- )} - {visibility.flipX && ( -
- -
- )} - {visibility.flipZ && ( -
- -
- )} - {(visibility.move || visibility.rotate) && ( -
- -
- {visibility.move && ( -
- -
- )} - {visibility.rotate && ( -
- -
- )} -
-
- )} - {visibility.duplicate && ( -
- -
- )} - {visibility.copy && ( -
- -
- )} - {visibility.paste && ( -
- -
- )} - {visibility.modifier && ( -
- -
- )} - {(visibility.group || visibility.array) && ( -
- -
- {visibility.group && ( -
- -
- )} - {visibility.array && ( -
- -
- )} -
-
- )} - {visibility.delete && ( -
- -
- )} -
+
+ )} + {visibility.delete && ( +
+ + X +
+ )}
); }; diff --git a/app/src/pages/UserAuth.tsx b/app/src/pages/UserAuth.tsx index 09e442e..fe65701 100644 --- a/app/src/pages/UserAuth.tsx +++ b/app/src/pages/UserAuth.tsx @@ -202,10 +202,10 @@ const UserAuth: React.FC = () => {
{!isSignIn && (
- -
+ +
+
)}