smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix modal rendering so keyboard shortcuts work on modal as well

Browse source
This commit is contained in:
Aakansha Doshi 2021-04-10 20:48:42 +05:30
parent 959734a348
commit 2c8ec6be8e
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/App.tsx
View file

@ -489,6 +489,7 @@ class App extends React.Component<AppProps, AppState> {
/> />
<div className="excalidraw-textEditorContainer" /> <div className="excalidraw-textEditorContainer" />
<div className="excalidraw-contextMenuContainer" /> <div className="excalidraw-contextMenuContainer" />
<div className="excalidraw-modal-container" />
{this.state.showStats && ( {this.state.showStats && (
<Stats <Stats
appState={this.state} appState={this.state}

6
src/components/Modal.scss
View file

@ -1,9 +1,13 @@
@import "../css/variables.module"; @import "../css/variables.module";
.excalidraw { .excalidraw {
&.excalidraw-modal-container { .excalidraw-modal-container {
&--visible {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
width: 100%;
height: 100%;
}
} }
.Modal { .Modal {

9
src/components/Modal.tsx
View file

@ -65,20 +65,21 @@ const useBodyRoot = () => {
.querySelector(".excalidraw") .querySelector(".excalidraw")
?.classList.contains("theme--dark"); ?.classList.contains("theme--dark");
const div = document.createElement("div"); const div = document.createElement("div");
const container = document.querySelector(".excalidraw-modal-container")!;
div.classList.add("excalidraw", "excalidraw-modal-container"); container.classList.add("excalidraw-modal-container--visible");
div.classList.toggle("excalidraw--mobile", isMobileRef.current); div.classList.toggle("excalidraw--mobile", isMobileRef.current);
if (isDarkTheme) { if (isDarkTheme) {
div.classList.add("theme--dark"); div.classList.add("theme--dark");
div.classList.add("theme--dark-background-none"); div.classList.add("theme--dark-background-none");
} }
document.body.appendChild(div); container.appendChild(div);
setDiv(div); setDiv(div);
return () => { return () => {
document.body.removeChild(div); container.classList.remove("excalidraw-modal-container--visible");
container!.removeChild(div);
}; };
}, []); }, []);