Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

3
web/src/App.tsx
View file

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

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

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

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

@ -45,8 +45,7 @@ export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
setState(null)
}
}, [])
return <>
<ModalContext value={setState}>
return <ModalContext value={setState}>
{children}
{state && <div
className={`overlay ${state.wrapperClass ?? "modal"} ${state.dimmed ? "dimmed" : ""}`}
@ -58,5 +57,4 @@ export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
</ModalCloseContext>
</div>}
</ModalContext>
</>
}