n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/mainscreen: move modals inside main screen context

Browse source
This commit is contained in:
Tulir Asokan 2024-11-14 14:10:43 +02:00
parent bf4954e02f
commit 3df871b783
3 changed files with 33 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/App.tsx
View file

@ -21,7 +21,6 @@ import ClientContext from "./ui/ClientContext.ts"
import MainScreen from "./ui/MainScreen.tsx" import MainScreen from "./ui/MainScreen.tsx"
import { LoginScreen, VerificationScreen } from "./ui/login" import { LoginScreen, VerificationScreen } from "./ui/login"
import { LightboxWrapper } from "./ui/modal/Lightbox.tsx" import { LightboxWrapper } from "./ui/modal/Lightbox.tsx"
import { ModalWrapper } from "./ui/modal/Modal.tsx"
import { useEventAsState } from "./util/eventdispatcher.ts" import { useEventAsState } from "./util/eventdispatcher.ts"
function App() { function App() {
@ -49,9 +48,7 @@ function App() {
} else { } else {
return <ClientContext value={client}> return <ClientContext value={client}>
<LightboxWrapper> <LightboxWrapper>
<ModalWrapper> <MainScreen/>
<MainScreen/>
</ModalWrapper>
</LightboxWrapper> </LightboxWrapper>
</ClientContext> </ClientContext>
} }

37
web/src/ui/MainScreen.tsx
View file

@ -20,6 +20,7 @@ import type { RoomID } from "@/api/types"
import ClientContext from "./ClientContext.ts" import ClientContext from "./ClientContext.ts"
import MainScreenContext, { MainScreenContextFields } from "./MainScreenContext.ts" import MainScreenContext, { MainScreenContextFields } from "./MainScreenContext.ts"
import Keybindings from "./keybindings.ts" import Keybindings from "./keybindings.ts"
import { ModalWrapper } from "./modal/Modal.tsx"
import RightPanel, { RightPanelProps } from "./rightpanel/RightPanel.tsx" import RightPanel, { RightPanelProps } from "./rightpanel/RightPanel.tsx"
import RoomList from "./roomlist/RoomList.tsx" import RoomList from "./roomlist/RoomList.tsx"
import RoomView from "./roomview/RoomView.tsx" import RoomView from "./roomview/RoomView.tsx"
@ -139,23 +140,25 @@ const MainScreen = () => {
if (rightPanel) { if (rightPanel) {
classNames.push("right-panel-open") classNames.push("right-panel-open")
} }
return <main className={classNames.join(" ")} style={extraStyle}> return <MainScreenContext value={context}>
<MainScreenContext value={context}> <ModalWrapper>
<RoomList activeRoomID={activeRoom?.roomID ?? null}/> <main className={classNames.join(" ")} style={extraStyle}>
{resizeHandle1} <RoomList activeRoomID={activeRoom?.roomID ?? null}/>
{activeRoom {resizeHandle1}
? <RoomView {activeRoom
key={activeRoom.roomID} ? <RoomView
room={activeRoom} key={activeRoom.roomID}
rightPanel={rightPanel} room={activeRoom}
rightPanelResizeHandle={resizeHandle2} rightPanel={rightPanel}
/> rightPanelResizeHandle={resizeHandle2}
: rightPanel && <> />
{resizeHandle2} : rightPanel && <>
{rightPanel && <RightPanel {...rightPanel}/>} {resizeHandle2}
</>} {rightPanel && <RightPanel {...rightPanel}/>}
</MainScreenContext> </>}
</main> </main>
</ModalWrapper>
</MainScreenContext>
} }
export default MainScreen export default MainScreen

26
web/src/ui/modal/Modal.tsx
View file

@ -45,18 +45,16 @@ export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
setState(null) setState(null)
} }
}, []) }, [])
return <> return <ModalContext value={setState}>
<ModalContext value={setState}> {children}
{children} {state && <div
{state && <div className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`}
className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`} onClick={onClickWrapper}
onClick={onClickWrapper} onKeyDown={onKeyWrapper}
onKeyDown={onKeyWrapper} >
> <ModalCloseContext value={onClickWrapper}>
<ModalCloseContext value={onClickWrapper}> {state.content}
{state.content} </ModalCloseContext>
</ModalCloseContext> </div>}
</div>} </ModalContext>
</ModalContext>
</>
} }