React component style adjustments

#7
neesjanvaneck · Jun 24, 2022 · a6e137d · a6e137d
1 parent d376919
commit a6e137d
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,8 @@
     "papaparse": "^5.3.1",
     "qrcode.react": "^1.0.1",
     "qs": "^6.10.2",
+    "react-full-screen": "^1.1.1",
+    "react-resize-detector": "^7.1.2",
     "use-debounce": "0.0.7"
   },
   "devDependencies": {

diff --git a/src/DimensionsApp.js b/src/DimensionsApp.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 import Dimensions from './pages/Dimensions';
 
-const DimensionsApp = ({ parameters }) => (
-  <Dimensions queryString={parameters} />
+const DimensionsApp = ({ parameters, fullscreenHandle }) => (
+  <Dimensions queryString={parameters} fullscreenHandle={fullscreenHandle} />
 );
 
 export default DimensionsApp;
diff --git a/src/VOSviewerApp.js b/src/VOSviewerApp.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 import VOSviewer from './pages/VOSviewer';
 
-const VOSviewerApp = ({ parameters }) => (
-  <VOSviewer queryString={parameters} />
+const VOSviewerApp = ({ parameters, fullscreenHandle }) => (
+  <VOSviewer queryString={parameters} fullscreenHandle={fullscreenHandle} />
 
 );
 

diff --git a/src/ZetaAlphaApp.js b/src/ZetaAlphaApp.js
@@ -2,8 +2,8 @@ import React from 'react';
 
 import ZetaAlpha from './pages/ZetaAlpha';
 
-const ZetaAlphaApp = ({ parameters }) => (
-  <ZetaAlpha queryString={parameters} />
+const ZetaAlphaApp = ({ parameters, fullscreenHandle }) => (
+  <ZetaAlpha queryString={parameters} fullscreenHandle={fullscreenHandle} />
 );
 
 export default ZetaAlphaApp;
diff --git a/src/component.js b/src/component.js
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import levenSort from 'leven-sort';
 import _isUndefined from 'lodash/isUndefined';
 import _isPlainObject from 'lodash/isPlainObject';
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 
 import { parameterKeys } from 'utils/variables';
 import {
@@ -23,6 +24,7 @@ const VOSviewer = observer(({ parameters = {}, data }) => {
   const queryStringStore = useContext(QueryStringStoreContext);
   const webworkerStore = useContext(WebworkerStoreContext);
   const [firstRender, setFirstRender] = useState(true);
+  const fullscreenHandle = useFullScreenHandle();
 
   if (firstRender) {
     setFirstRender(false);
@@ -200,7 +202,11 @@ const VOSviewer = observer(({ parameters = {}, data }) => {
   }
 
   return (
-    <App parameters={parameters} />
+    <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
+      <FullScreen handle={fullscreenHandle}>
+        <App parameters={parameters} fullscreenHandle={fullscreenHandle} />
+      </FullScreen>
+    </div>
   );
 });
 

diff --git a/src/components/ui/ControlPanel/styles.js b/src/components/ui/ControlPanel/styles.js
@@ -3,16 +3,20 @@ import { controlPanelWidth } from 'utils/variables';
 
 export const open = css`
   label: control-panel-open;
+
+  z-index: 0;
 `;
 
 export const closed = css`
   label: control-panel-closed;
+
+  z-index: 0;
 `;
 
 export const controlPanel = css`
   label: control-panel;
   top: 0;
-  position: fixed;
+  position: absolute;
   width: ${controlPanelWidth - 2}px;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.95);

diff --git a/src/components/ui/Fullscreen/index.js b/src/components/ui/Fullscreen/index.js
@@ -7,55 +7,20 @@ import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import { ConfigStoreContext } from 'store/stores';
 import * as s from './styles';
 
-const Fullscreen = observer(() => {
+const Fullscreen = observer(({ enter, exit, active }) => {
   const configStore = useContext(ConfigStoreContext);
 
   useEffect(() => {
-    document.addEventListener("fullscreenchange", () => {
-      configStore.setFullscreen(document.fullscreen);
-    }, false);
-
-    document.addEventListener("mozfullscreenchange", () => {
-      configStore.setFullscreen(document.fullscreen);
-    }, false);
-
-    document.addEventListener("webkitfullscreenchange", () => {
-      configStore.setFullscreen(document.fullscreen);
-    }, false);
-  }, []);
-
-  // https://gist.github.com/simonewebdesign/6183356
-
-  const changeFullscreen = () => {
-    if (configStore.fullscreen) {
-      if (document.cancelFullScreen) {
-        document.cancelFullScreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitCancelFullScreen) {
-        document.webkitCancelFullScreen();
-      }
-    } else {
-      const el = document.body;
-      if (el.requestFullscreen) {
-        el.requestFullscreen();
-      } else if (el.msRequestFullscreen) {
-        el.msRequestFullscreen();
-      } else if (el.mozRequestFullScreen) {
-        el.mozRequestFullScreen();
-      } else if (el.webkitRequestFullscreen) {
-        el.webkitRequestFullscreen();
-      }
-    }
-  };
+    configStore.setFullscreen(active);
+  }, [active]);
 
   return (
     <>
       {configStore.uiConfig.fullscreen_icon
       && (
         <div
           className={s.fullscreenButton}
-          onClick={changeFullscreen}
+          onClick={configStore.fullscreen ? exit : enter}
         >
           <Tooltip title={`${configStore.fullscreen ? 'Exit full screen' : 'Full screen'}`}>
             <IconButton>