From 6bcc6b80ab871244b486640a9b6e4ae4daf700b1 Mon Sep 17 00:00:00 2001 From: bflatastic Date: Mon, 22 Apr 2024 23:56:12 +0700 Subject: [PATCH 1/2] keyboard shortcuts --- app/components/TransitionDialogue.tsx | 98 ++++++------ app/modules/ButtonDialogue/ButtonDialogue.tsx | 36 ++--- .../ControlsTopButtons/ControlsTopButtons.tsx | 23 ++- .../comps/ControlsTopButtons/Help/Help.tsx | 144 ++++++++++++++++++ .../comps/ControlsTopButtons/Help/index.tsx | 1 + public/resources/icons/mouse_lmb.png | Bin 0 -> 686 bytes public/resources/icons/mouse_mmb.png | Bin 0 -> 634 bytes public/resources/icons/mouse_rmb.png | Bin 0 -> 702 bytes 8 files changed, 224 insertions(+), 78 deletions(-) create mode 100644 app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx create mode 100644 app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx create mode 100644 public/resources/icons/mouse_lmb.png create mode 100644 public/resources/icons/mouse_mmb.png create mode 100644 public/resources/icons/mouse_rmb.png diff --git a/app/components/TransitionDialogue.tsx b/app/components/TransitionDialogue.tsx index b6101ba65f..122a295546 100644 --- a/app/components/TransitionDialogue.tsx +++ b/app/components/TransitionDialogue.tsx @@ -2,17 +2,21 @@ import { useEffect } from "react"; import { Dialog, Transition } from "@headlessui/react"; import { Fragment, ReactNode } from "react"; import { twMerge } from "tailwind-merge"; -import { disableHotkeyInput, enableHotkeyInput, DomLevels } from "~/pages/PageEnigma/store"; +import { + disableHotkeyInput, + enableHotkeyInput, + DomLevels, +} from "~/pages/PageEnigma/store"; -const DialogBackdrop = ()=>{ - useEffect(()=>{ +const DialogBackdrop = () => { + useEffect(() => { disableHotkeyInput(DomLevels.DIALOGUE); - return()=>{ + return () => { enableHotkeyInput(DomLevels.DIALOGUE); - } + }; }, []); - return( + return ( { enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" - leaveTo="opacity-0" - > + leaveTo="opacity-0">
); }; export const TransitionDialogue = ({ - isOpen, title, onClose, className, children, -}:{ + isOpen, + title, + onClose, + className, + children, +}: { isOpen: boolean; title?: ReactNode; - onClose:()=>void; + onClose: () => void; className?: string; children: ReactNode; - -})=>{ - return( +}) => { + return ( - - -
-
- - - {title && ( - - {title} - - )} - {children} - - -
+ + +
+
+ + + {title && ( + + {title} + + )} + {children} + +
-
- +
+ + ); -}; \ No newline at end of file +}; diff --git a/app/modules/ButtonDialogue/ButtonDialogue.tsx b/app/modules/ButtonDialogue/ButtonDialogue.tsx index e83bf0c149..f6aba3a01a 100644 --- a/app/modules/ButtonDialogue/ButtonDialogue.tsx +++ b/app/modules/ButtonDialogue/ButtonDialogue.tsx @@ -8,11 +8,12 @@ interface ButtonDialoguePropsI { buttonProps?: UnionedButtonProps; confirmButtonProps?: UnionedButtonProps; closeButtonProps?: UnionedButtonProps; - dialogProps?:{ + dialogProps?: { className?: string; }; title?: string; children: React.ReactNode; + showClose?: boolean; } export const ButtonDialogue = ({ @@ -22,6 +23,7 @@ export const ButtonDialogue = ({ closeButtonProps: unionedCloseButtonProps, title, children, + showClose = true, }: ButtonDialoguePropsI) => { const [isOpen, setIsOpen] = useState(false); @@ -43,19 +45,20 @@ export const ButtonDialogue = ({ title={title} isOpen={isOpen} onClose={closeModal} - className={dialogProps.className} - > -
{children}
+ className={dialogProps.className}> +
{children}
- + {showClose && ( + + )} + {confirmButtonProps && ( )}
- + ); }; diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index 07ab5dd9cd..2925797ad4 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -6,6 +6,7 @@ import { ToasterContext } from "~/contexts/ToasterContext"; // import { APPUI_ACTION_TYPES } from "app/reducers"; import { TestFeaturesButtons } from "./TestFeaturesButtons"; +import { Help } from "./Help"; export const ControlsTopButtons = () => { const editorEngine = useContext(EngineContext); @@ -49,8 +50,7 @@ export const ControlsTopButtons = () => { label: "Load", disabled: sceneToken === "", onClick: handleButtonLoadScene, - }} - > + }}> { @@ -69,8 +69,7 @@ export const ControlsTopButtons = () => { label: "Save", disabled: sceneName === "", onClick: handleButtonSave, - }} - > + }}> { @@ -89,8 +88,7 @@ export const ControlsTopButtons = () => { disabled: mediaToken === "", onClick: handleMediaToken, }} - title="Add Scene Object via Media Token" - > + title="Add Scene Object via Media Token"> { @@ -104,15 +102,14 @@ export const ControlsTopButtons = () => { variant: "secondary", label: "Help", }} - title="Help" - > -

Do you need help?

-

Ask Michael about this project

-

Ask Miles about ThreeJS

-

Ask Wil about React

+ dialogProps={{ + className: "max-w-6xl w-auto", + }} + title="Help"> +
- + ); }; diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx new file mode 100644 index 0000000000..984889b1d6 --- /dev/null +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx @@ -0,0 +1,144 @@ +import { Label } from "~/components"; + +const ShortcutsGroup = (props: { + label: string; + children?: React.ReactNode; +}) => ( +
+ +
+ {props.children} +
+
+
+); + +const Shortcut = (props: { label: string; children: React.ReactNode }) => ( +
+ + {props.label} + + {props.children} +
+); + +const Key = (props: { button: string }) => ( +
+ {props.button} +
+); + +const KeyGroup = (props: { children: React.ReactNode }) => ( +
{props.children}
+); + +const Mouse = (props: { + button: "left" | "middle" | "right"; + label: string; +}) => ( +
+ {`${props.button} + {props.label} +
+); + +const Plus = () =>
+
; + +export const Help = () => { + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +}; diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx new file mode 100644 index 0000000000..c6b98f7c78 --- /dev/null +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx @@ -0,0 +1 @@ +export { Help } from "./Help"; diff --git a/public/resources/icons/mouse_lmb.png b/public/resources/icons/mouse_lmb.png new file mode 100644 index 0000000000000000000000000000000000000000..7cd1073f0847dfdc350d0048e7de5e2b67a3b8f2 GIT binary patch literal 686 zcmV;f0#W^mP)h;76|V*RDkGwYK#z1xK5MV)i=D=5b= zc>jv+iUszJ0%YVKdY3#YMGf$DsqawEg{3UWMFa-|(u520-`WUKL zo$o{<4)`&HVq}2RKLp&I3pbMg$9zOGrDuCnYnufjm zmJ19uUTEnBlrz{gEACb{dIL{O%3T(#%tBA86prBj_)rZ;im=G#8lk7q;&zP);5FT* z0AD>|0ai(%pk*E^;1^Uxl{29GzVo_r7Lcsh&$Mi0sPeN`0p4TpyF;?_X@w zj75OsBCLnMb}Q}#bOJg7oq$fjza_xsCR-OP5fDRrEJVNz+G8W&2ee1DiTPP#dvy}? zUE=xH3qC;eoXf{9>M7wi$Rb`%uo=B1^nF0CT1~iQ%yw)nk!zK#2dabPXPzn4`YRS4+Zf(M1hT#kg02D((43EGYj;vza&USHl;!03>~!WTH& zzaR7@tua+rg4Tqz8r(2e16qocGj`N?yScIqF#7aBmBLlPmy+B4}7J&--^4!;cuF@DdS)c6S(E0l3t1q7OHgFy_gl#V% zd@)VvMdDO^VI2(yp47Jqx}ZMu*mwD7y;=%Qmm}bT9#uIC3F!2RaNyq~=sxg=MhA+) zW&_GE-8|XNrMNUu8Ym5v21)~e&VbHNHZK-wKFRW6#s(%(9D#um6o(TesW42xZF`sO zQKITJngw^TeR}*Or|G6tDK{P&5nMets8BvJwbB=%n4{u0GmwH(izGLN>9)%+L`PqC%`>Ha)YENhVS4>#I4Bg5jQpIfxPzEKFmtxChTtkv)2q?QT@%1eardl?@bk}~1%G2(vd!5} z((+foCkLF&Hg`jgZAFjxP5^gsU~n#sbIv_ZekQ+>DgB;2zNA6PEW~&>hoAQ|0n!1? z1i8FhQ2##7gis3@i3SaojK)Ph-jr3^VOU|Y!n+<02QmXYsE>mNuxzy>0z7nt21PT_ z$Y>q|k?vN2*5rr)7hNF-6FTOx0{){Rnw)`b@2`}qysqj9c$>@n1@-^Z45_dc0ehJP zA{p&R#D6*>#^bUe>r_VM7wi#1XG;5RG0k`Ex*CwYIS(1Ge45 z8j1DEdeH50aW9@&B4VkVXK8ev6XCL*>gG6StG~+{5He*ejYCpZA&5h<9^#!M-yN)< k9RZuXzRwT`w~e8kTO|qr=VG}8XaE2J07*qoM6N<$f**`8r2qf` literal 0 HcmV?d00001 From f08b02fdcc4dec4d5bcca46dd3ca234e5ac8978a Mon Sep 17 00:00:00 2001 From: bflatastic Date: Tue, 23 Apr 2024 00:07:31 +0700 Subject: [PATCH 2/2] commented out shortcut keys we don't have yet --- .../comps/ControlsTopButtons/Help/Help.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx index 984889b1d6..c35bc37854 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx @@ -64,7 +64,7 @@ export const Help = () => { - + {/* @@ -73,19 +73,19 @@ export const Help = () => { - + */} - + {/* - - + */} + {/* - + */} @@ -123,11 +123,11 @@ export const Help = () => { - + {/* - + */}