fixed body fullscreen dialogs style fix

ibastawisi · Aug 3, 2024 · c8b335a · c8b335a
1 parent bc01cc8
commit c8b335a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 16 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -152,13 +152,9 @@ body:has(.editor-input)>footer {
   z-index: 1500 !important;
 }
 
-body:has(.MuiDialog-root.fullscreen.loaded) {
+body.fullscreen {
   position: initial !important;
-  overflow: hidden !important;
-}
-
-.ggb-container>.applet_scaler {
-  transform: none !important;
+  overflow-y: hidden !important;
 }
 
 .diff-container ins {

diff --git a/src/editor/plugins/ToolbarPlugin/Dialogs/GraphDialog.tsx b/src/editor/plugins/ToolbarPlugin/Dialogs/GraphDialog.tsx
@@ -75,9 +75,13 @@ function GraphDialog({ editor, node }: { editor: LexicalEditor, node: GraphNode
 
   const handleClose = () => {
     closeDialog();
+    document.body.classList.remove('fullscreen');
   }
 
-  return <Dialog open fullScreen onClose={handleClose} disableEscapeKeyDown className={`fullscreen${loading ? ' loading' : ' loaded'}`}>
+  return <Dialog open fullScreen onClose={handleClose} disableEscapeKeyDown
+    TransitionProps={{
+      onEntered() { document.body.classList.add('fullscreen') },
+    }}>
     <DialogContent sx={{ p: 0, overflow: "hidden" }}>
       {loading && <Box sx={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}><CircularProgress size={36} disableShrink /></Box>}
       <GeogebraApplet parameters={parameters} />

diff --git a/src/editor/plugins/ToolbarPlugin/Dialogs/Sketch/index.tsx b/src/editor/plugins/ToolbarPlugin/Dialogs/Sketch/index.tsx
@@ -79,7 +79,7 @@ function SketchDialog({ editor, node }: { editor: LexicalEditor, node: ImageNode
   };
 
   const closeDialog = () => {
-    editor.dispatchCommand(SET_DIALOGS_COMMAND, { sketch: { open: false } })
+    editor.dispatchCommand(SET_DIALOGS_COMMAND, { sketch: { open: false } });
   }
 
   const handleClose = async () => {
@@ -113,6 +113,7 @@ function SketchDialog({ editor, node }: { editor: LexicalEditor, node: ImageNode
       });
       if (id === alert.actions[1].id) discard();
     } else cancel();
+    document.body.classList.remove('fullscreen');
   }
 
   async function restoreSerializedScene(serialized: string) {
@@ -287,7 +288,10 @@ function SketchDialog({ editor, node }: { editor: LexicalEditor, node: ImageNode
 
   const loading = !excalidrawAPI;
 
-  return <Dialog open fullScreen={true} onClose={handleClose} disableEscapeKeyDown className={`fullscreen${loading ? ' loading' : ' loaded'}`}>
+  return <Dialog open fullScreen={true} onClose={handleClose} disableEscapeKeyDown
+    TransitionProps={{
+      onEntered() { document.body.classList.add('fullscreen') },
+    }}>
     <DialogContent sx={{ p: 0, overflow: "hidden" }}>
       {loading && <Box sx={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}><CircularProgress size={36} disableShrink /></Box>}
       <Excalidraw

diff --git a/src/editor/plugins/ToolbarPlugin/index.tsx b/src/editor/plugins/ToolbarPlugin/index.tsx
@@ -33,7 +33,6 @@ import { SPEECH_TO_TEXT_COMMAND, SUPPORT_SPEECH_RECOGNITION } from '../SpeechToT
 import AITools from './Tools/AITools';
 import FontSelect from './Menus/FontSelect';
 import CodeTools from './Tools/CodeTools';
-import useFixedBodyScroll from '@/hooks/useFixedBodyScroll';
 
 const blockTypeToBlockName = {
   bullet: 'Bulleted List',
@@ -225,7 +224,6 @@ function ToolbarPlugin() {
   const showTextFormatTools = showTextTools && !showCodeTools;
 
   const isDialogOpen = Object.values(dialogs).some((dialog) => dialog.open);
-  useFixedBodyScroll(isDialogOpen);
 
   useEffect(() => {
     if (isDialogOpen) return;

diff --git a/src/hooks/useFixedBodyScroll.ts b/src/hooks/useFixedBodyScroll.ts
@@ -4,11 +4,9 @@ export default function useFixedBodyScroll(isFixed: boolean) {
   const scrollTop = useRef(0);
   useEffect(() => {
     if (!isFixed) return;
-    setTimeout(() => {
-      scrollTop.current = Math.round(document.documentElement.scrollTop);
-      document.body.style.top = `-${scrollTop.current}px`;
-      document.body.style.position = "fixed";
-    }, 0);
+    scrollTop.current = Math.round(document.documentElement.scrollTop);
+    document.body.style.top = `-${scrollTop.current}px`;
+    document.body.style.position = "fixed";
     return () => {
       document.body.style.position = "";
       document.documentElement.scrollTop = scrollTop.current;