fix: always show fs controls at bottm

dhis2 · Oct 10, 2024 · 540377c · 540377c
1 parent 6c4e86b
commit 540377c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 42 deletions.
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
@@ -50,6 +50,7 @@ import { pluginIsAvailable } from './Visualization/plugin.js'
 import Visualization from './Visualization/Visualization.js'
 
 const MIN_CLIENT_HEIGHT = 16
+const FS_CONTROLS_BUFFER = 48 // space for the fullscreen controls at bottom
 
 class Item extends Component {
     state = {
@@ -156,11 +157,12 @@ class Item extends Component {
 
     getAvailableHeight = ({ width }) => {
         if (this.props.isFS) {
-            const totalHeaderHeight =
+            const totalNonVisHeight =
                 (this.headerRef.current.clientHeight || MIN_CLIENT_HEIGHT) +
                 this.itemHeaderTotalMargin +
-                this.itemContentPadding
-            return `calc(100vh - ${totalHeaderHeight}px)`
+                this.itemContentPadding +
+                FS_CONTROLS_BUFFER
+            return `calc(100vh - ${totalNonVisHeight}px)`
         }
         const calculatedHeight =
             getItemHeightPx(this.props.item, width) -

diff --git a/src/pages/view/ItemGrid.js b/src/pages/view/ItemGrid.js
@@ -62,8 +62,6 @@ const ResponsiveItemGrid = () => {
     const fsItemStartingIndex = useSelector(sGetPresentDashboard)
     const [fsItemIndex, setFsItemIndex] = useState(null)
     const fsElement = useRef(null)
-    const hideControlsTimeout = useRef(null)
-    const controlsRef = useRef(null)
 
     useEffect(() => {
         const getItemsWithAdjustedHeight = (items) =>
@@ -130,7 +128,6 @@ const ResponsiveItemGrid = () => {
         } else {
             setFsItemIndex(fsItemIndex + 1)
         }
-        showControls()
     }, [fsItemIndex])
 
     const prevItem = useCallback(() => {
@@ -139,18 +136,8 @@ const ResponsiveItemGrid = () => {
         } else {
             setFsItemIndex(fsItemIndex - 1)
         }
-        showControls()
     }, [fsItemIndex])
 
-    const showControls = () => {
-        clearTimeout(hideControlsTimeout.current)
-
-        controlsRef.current?.classList.add(classes.visible)
-        hideControlsTimeout.current = setTimeout(() => {
-            controlsRef.current?.classList.remove(classes.visible)
-        }, 1000)
-    }
-
     // This effect handles the keyboard navigation for the fullscreen mode
     useEffect(() => {
         const handleKeyDown = (event) => {
@@ -174,16 +161,13 @@ const ResponsiveItemGrid = () => {
         window.addEventListener('keydown', handleKeyDown)
         document.addEventListener('fullscreenchange', handleFullscreenChange)
 
-        document.addEventListener('mousemove', showControls)
-
         // Clean up the event listener when the component is unmounted
         return () => {
             window.removeEventListener('keydown', handleKeyDown)
             document.removeEventListener(
                 'fullscreenchange',
                 handleFullscreenChange
             )
-            document.removeEventListener('mousemove', showControls)
         }
     }, [dispatch, nextItem, prevItem])
 
@@ -264,7 +248,9 @@ const ResponsiveItemGrid = () => {
             ref={fsElement}
         >
             <ResponsiveReactGridLayout
-                className={classes.grid}
+                className={cx(classes.grid, {
+                    [classes.fullscreenGrid]: Number.isInteger(fsItemIndex),
+                })}
                 rowHeight={GRID_ROW_HEIGHT_PX}
                 width={getGridWidth(width)}
                 cols={{ lg: GRID_COLUMNS, sm: SM_SCREEN_GRID_COLUMNS }}
@@ -286,14 +272,10 @@ const ResponsiveItemGrid = () => {
             >
                 {getItemComponents(displayItems)}
             </ResponsiveReactGridLayout>
+
             {Number.isInteger(fsItemIndex) && (
-                <>
-                    <div
-                        className={cx(classes.fullscreenControls, {
-                            [classes.visible]: true,
-                        })}
-                        ref={controlsRef}
-                    >
+                <div className={classes.fsControlsContainer}>
+                    <div className={classes.fullscreenControls}>
                         <button onClick={prevItem}>
                             <IconChevronLeft24 color={colors.white} />
                         </button>
@@ -307,7 +289,7 @@ const ResponsiveItemGrid = () => {
                             <IconCross24 color={colors.white} />
                         </button>
                     </div>
-                </>
+                </div>
             )}
         </div>
     )

diff --git a/src/pages/view/styles/ItemGrid.module.css b/src/pages/view/styles/ItemGrid.module.css
@@ -2,7 +2,7 @@
     margin-block-start: var(--spacers-dp16);
 }
 
-.fscreen > .grid {
+.fullscreenGrid {
     margin-block-start: 0;
 }
 
@@ -33,26 +33,20 @@
     transform: none !important;
 }
 
+.fsControlsContainer {
+    position: fixed;
+    inset-block-end: 0;
+    inline-size: 100vw;
+    display: flex;
+    justify-content: center;
+}
 .fullscreenControls {
     background: #202124;
     padding: 8px;
     border-radius: 5px;
-    position: fixed;
-    inset-block-start: 20px;
-    inset-inline-end: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s;
-    z-index: 10;
-}
-
-.fullscreenControls:hover,
-.fullscreenControls.visible {
-    opacity: 1;
-    visibility: visible;
 }
 
 .fullscreenControls button {