feat: basic modal setup

Author: ZanzyTHEbar

GUI/ETVR/src/app.tsx

@@ -1,8 +1,16 @@
-import { ColorModeScript, HopeProvider, injectCriticalStyle, Button } from '@hope-ui/core'
+import {
+    ColorModeScript,
+    HopeProvider,
+    injectCriticalStyle,
+    HStack,
+    Button,
+    Text,
+} from '@hope-ui/core'
 import { invoke } from '@tauri-apps/api/tauri'
 import { appWindow } from '@tauri-apps/api/window'
 import { onMount, Suspense } from 'solid-js'
 import AppRoutes from './routes/Routes'
+import ModalMenu from '@components/Modal'
 import NewWindow from '@components/NewWindow'
 
 const handleTitlebar = () => {
@@ -52,6 +60,19 @@ const Menu = () => {
     )
 }
 
+const ModalHandler = () => {
+    return (
+        <ModalMenu initialFocus="#first-field">
+            <Text mb={4}>The content of the Modal.</Text>
+            <HStack justifyContent="flex-end" spacing={4}>
+                <Button id="initial-focus" _focus={{ color: 'red' }}>
+                    Action
+                </Button>
+            </HStack>
+        </ModalMenu>
+    )
+}
+
 const App = () => {
     const ref = document.getElementById('titlebar')
     injectCriticalStyle()
@@ -68,6 +89,7 @@ const App = () => {
                     <NewWindow ref={ref} name="test" cssVariable="--menu-visibility">
                         <Menu />
                     </NewWindow>
+                    <ModalHandler />
                 </Suspense>
             </HopeProvider>
         </div>

GUI/ETVR/src/components/Camera/index.tsx

@@ -1,7 +1,8 @@
-import { Image } from '@hope-ui/core'
+import { IconButton } from '@hope-ui/core'
+import { FaSolidGear } from 'solid-icons/fa'
 import CameraStatusIndicator from './CameraIndicator/CameraIndicator'
-import icons from '@assets/images'
 import { ICamera } from '@src/store/mdns/mdns'
+import { setOpenModal } from '@src/store/ui/ui'
 import { ActiveStatus } from '@src/utils/utils'
 
 // TODO: switch camera based on status
@@ -40,13 +41,14 @@ export const Camera = (props: ICamera) => {
                             <div>{props.type.toLocaleLowerCase()}</div>
                         </div>
                         <div class="flex text-[#FFFF] justify-end ">
-                            <Image
-                                src={icons.gearSolid}
-                                objectFit={'contain'}
-                                alt="logo"
-                                width="20px"
-                                height="100%"
-                            />
+                            <IconButton
+                                aria-label="Settings"
+                                variant="plain"
+                                colorScheme="neutral"
+                                size="lg"
+                                onClick={() => setOpenModal(true)}>
+                                <FaSolidGear />
+                            </IconButton>
                         </div>
                     </div>
                 </div>

GUI/ETVR/src/components/Modal/index.tsx

@@ -1,44 +1,27 @@
-import { Button, HStack, Modal, Text } from '@hope-ui/core'
-import { children, createSignal, createEffect, Show, onMount } from 'solid-js'
+import { HStack, Modal } from '@hope-ui/core'
+import { children, createEffect } from 'solid-js'
 import { openModalStatus } from '@src/store/ui/selectors'
 import { setOpenModal, type IModalMenu } from '@src/store/ui/ui'
 import './styles.css'
 
 const ModalMenu = (props: IModalMenu) => {
-    const [ref, setRef] = createSignal<HTMLElement>()
     const Children = children(() => props.children)
-    const clickOutside = (e: MouseEvent) => {
-        if (e.target instanceof HTMLElement) {
-            if (ref() && (ref()?.contains(e.target) || ref()?.isSameNode(e.target))) return
-            console.log('clicked outside')
-            setOpenModal(false)
-        }
-    }
     createEffect(() => {
-        if (openModalStatus()) {
-            document.addEventListener('click', clickOutside)
-            return
-        }
-        document.removeEventListener('click', clickOutside)
+        console.log('openModalStatus:', openModalStatus())
     })
     return (
         <>
             <Modal
                 isOpen={openModalStatus() ?? false}
                 onClose={() => setOpenModal(false)}
-                initialFocusSelector="#initial-focus">
+                initialFocusSelector={props.initialFocus}>
                 <Modal.Overlay />
                 <Modal.Content p={4}>
                     <HStack justifyContent="space-between" mb={4}>
                         <Modal.Heading fontWeight="semibold">Title</Modal.Heading>
                         <Modal.CloseButton />
                     </HStack>
-                    <Text mb={4}>The content of the Modal.</Text>
-                    <HStack justifyContent="flex-end" spacing={4}>
-                        <Button id="initial-focus" _focus={{ color: 'red' }}>
-                            Action
-                        </Button>
-                    </HStack>
+                    {Children()}
                 </Modal.Content>
             </Modal>
         </>

GUI/ETVR/src/pages/Home/index.tsx

@@ -8,7 +8,6 @@ import { CAMERA_VIEW_MODE } from '@src/utils/enums'
 
 const Main = () => {
     const [selectMode, setSelectMode] = createSignal(CAMERA_VIEW_MODE.GRIP)
-
     return (
         <div class="py-[40px]">
             <div>

GUI/ETVR/src/store/mdns/mdns.ts

@@ -15,6 +15,7 @@ export enum CameraType {
 export interface ICamera {
     status: CameraStatus
     type: CameraType
+    name: string
     address: string
     activeCameraSection: string
 }
@@ -29,6 +30,7 @@ const staticCamerasGenerator = new Array(5).fill(0).map(() => ({
     status: CameraStatus.LOADING,
     type: CameraType.WIRELESS,
     address: '192.168.0.204',
+    name: 'left-eye',
     activeCameraSection: 'left eye',
 }))
 

GUI/ETVR/src/store/ui/ui.ts

@@ -20,7 +20,7 @@ export interface INewMenu {
 
 export interface IModalMenu {
     children: JSXElement
-    ref: HTMLElement | null
+    initialFocus?: string
 }
 
 interface IUiStore {