Merge pull request #537 from KaiVolland/full-screen-wrapper-update

Update FullScreenWrapper
terrestris · Apr 30, 2024 · 3e282fe · 3e282fe
2 parents f82ec3b + f1f3694
commit 3e282fe
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 45 deletions.
diff --git a/src/Component/FullscreenWrapper/FullscreenWrapper.less b/src/Component/FullscreenWrapper/FullscreenWrapper.less
@@ -3,20 +3,15 @@
   border-radius: 3px;
   flex-direction: column;
   display: flex;
-  padding: 10px;
   resize: vertical;
   overflow: hidden;
-  min-height: 25vh;
+  min-height: 10em;
 
-  >div {
-    width: 100%;
-    border-bottom: solid 1px #dedede;
-    margin: 0 5px 5px 0;
-    padding-bottom: 5px;
-
-    >button {
-      float: right;
-    }
+  >button {
+    min-width: 24px;
+    min-height: 24px;
+    margin: 2px;
+    align-self: end;
   }
 
   &:hover {
@@ -29,23 +24,9 @@
   }
 
   &.fullscreen {
-    transition: ease-in .2s;
     resize: none;
     background: white;
-    min-height: 100vh;
     z-index: 999;
     position: fixed;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    right: 0;
-    bottom: 0;
-    height: 100vh;
-
-    &:hover,
-    &:focus {
-      border: none;
-      box-shadow: none;
-    }
   }
 }
diff --git a/src/Component/FullscreenWrapper/FullscreenWrapper.tsx b/src/Component/FullscreenWrapper/FullscreenWrapper.tsx
@@ -1,6 +1,6 @@
 import './FullscreenWrapper.less';
 
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -10,14 +10,37 @@ import { useTranslation } from 'react-i18next';
 export const FullscreenWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   children
 }) => {
-  const [fullscreen, setFullscreen] = React.useState<boolean>(false);
+  const [fullscreen, setFullscreen] = useState<boolean>(false);
+  const [minimizedHeight, setMinimizedHeight] = useState<string>('10em');
+  const elementRef = useRef<HTMLDivElement>(null);
 
   const {
     t
   } = useTranslation();
 
   const toggleFullscreen = () => {
-    setFullscreen(!fullscreen);
+    const contentEl = document.querySelector('.content');
+    const leftContainerEl = document.querySelector('.content .left-container');
+    const shouldBeFullScreen = !fullscreen;
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    if (contentEl && leftContainerEl && shouldBeFullScreen) {
+      setMinimizedHeight(element.getBoundingClientRect().height + 'px');
+      const contentDimensions = contentEl.getBoundingClientRect();
+      const leftContainerDimensions = leftContainerEl.getBoundingClientRect();
+      element.style.left = `${contentDimensions.left}px`;
+      element.style.top = `${leftContainerDimensions.top}px`;
+      element.style.width = `${contentDimensions.width}px`;
+      element.style.height = `${leftContainerDimensions.height}px`;
+    } else {
+      element.style.left = '';
+      element.style.top = '';
+      element.style.width = '';
+      element.style.height = minimizedHeight;
+    }
+    setFullscreen(shouldBeFullScreen);
   };
 
   /**
@@ -31,19 +54,17 @@ export const FullscreenWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>> =
   const wrapperCls = `fs-wrapper${fullscreen ? ' fullscreen' : ''}`;
 
   return (
-    <div className={wrapperCls}>
-      <div>
-        <Tooltip
-          title={fullscreen ? t('FullscreenWrapper.leaveFullscreen') : t('FullscreenWrapper.fullscreen') }
-          placement='left'
-        >
-          <Button
-            icon={fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-            size='small'
-            onClick={toggleFullscreen}
-          />
-        </Tooltip>
-      </div>
+    <div className={wrapperCls} ref={elementRef}>
+      <Tooltip
+        title={fullscreen ? t('FullscreenWrapper.leaveFullscreen') : t('FullscreenWrapper.fullscreen') }
+        placement='left'
+      >
+        <Button
+          icon={fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+          size='small'
+          onClick={toggleFullscreen}
+        />
+      </Tooltip>
       {children}
     </div>
   );

diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
@@ -11,8 +11,8 @@ export default {
         loadFail: 'Die Daten konnten nicht geladen werden. Überprüfen Sie Ihre Konsole.'
       },
       FullscreenWrapper: {
-        fullscreen: 'Vollbild',
-        leaveFullscreen: 'Vollbild verlassen'
+        fullscreen: 'Vergrößern',
+        leaveFullscreen: 'Verkleinern'
       },
       WelcomeDashboard: {
         applications: 'Applikationen',
@@ -223,8 +223,8 @@ export default {
         loadFail: 'Failed to load the initial data. Check your console.'
       },
       FullscreenWrapper: {
-        fullscreen: 'Fullscreen',
-        leaveFullscreen: 'Leave fullscreen'
+        fullscreen: 'Maximize',
+        leaveFullscreen: 'Minimize'
       },
       WelcomeDashboard: {
         applications: 'Applications',