fix: apply scrollbar to the dashboard area below the control bars and…

… headerbar [DHIS2-9371] (#1034) The overflow property of app-shell-app has to be overridden to achieve the scrollbar on the dashboard area. Then, the height of the dashboard area is calculated from window.innerHeight - any visible control/header bars. A few margin and padding updates were needed, which affected the print "page" size. As part of the implementation, the print actions bar is now fixed and stays in place when scrolling through the print dashboard.
dhis2 · Sep 4, 2020 · ed049fe · ed049fe
1 parent c6ef175
commit ed049fe
Show file tree

Hide file tree

Showing 24 changed files with 205 additions and 79 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -2,23 +2,16 @@ body {
     background-color: #f4f6f8;
 }
 
-@media print {
-    body {
-        width: 100% !important;
-        padding: 0 !important;
-        margin: 0 !important;
-        background-color: white;
-    }
-
-    .app-shell-app {
-        overflow: visible !important;
-    }
+.app-shell-app {
+    overflow: hidden !important;
 }
 
 .dashboard-wrapper {
     background-color: #f4f6f8;
     padding-left: 10px;
     padding-right: 10px;
+    overflow: auto;
+    padding-bottom: 100px;
 }
 
 /* plugin TODO */
@@ -35,3 +28,16 @@ table.pivot * {
 .secondary-light-bg {
     background-color: #48a999;
 }
+
+@media print {
+    body {
+        width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        background-color: white;
+    }
+
+    .app-shell-app {
+        overflow: visible !important;
+    }
+}
diff --git a/src/components/ControlBar/ControlBar.js b/src/components/ControlBar/ControlBar.js
@@ -4,7 +4,7 @@ import { colors } from '@dhis2/ui'
 
 import classes from './styles/ControlBar.module.css'
 
-const DRAG_HANDLE_HEIGHT = 7
+export const DRAG_HANDLE_HEIGHT = 7
 
 class ControlBar extends React.Component {
     constructor(props) {

diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js
@@ -210,6 +210,7 @@ export class EditBar extends Component {
                         </div>
                     </div>
                 </ControlBar>
+                <div className={classes.topMargin} />
                 {this.translationDialog()}
                 {this.confirmDeleteDialog()}
             </>

diff --git a/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
@@ -32,6 +32,9 @@ exports[`EditBar renders the EditBar 1`] = `
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
 
@@ -67,6 +70,9 @@ exports[`EditBar when update access is false renders only the Discard button 1`]
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
 
@@ -132,6 +138,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -226,6 +235,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -320,6 +332,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -421,6 +436,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <ConfirmDeleteDialog
     onContinueEditing={[Function]}
     onDeleteConfirmed={[Function]}
@@ -484,5 +502,8 @@ exports[`EditBar when update access is true when no dashboard id property render
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
diff --git a/src/components/ControlBar/controlBarDimensions.js b/src/components/ControlBar/controlBarDimensions.js
@@ -3,6 +3,7 @@ import { SHOWMORE_BAR_HEIGHT } from './ShowMoreButton'
 export const CONTROL_BAR_ROW_HEIGHT = 40
 export const FIRST_ROW_PADDING_HEIGHT = 10
 export const MIN_ROW_COUNT = 1
+export const HEADERBAR_HEIGHT = 48
 
 const CONTROL_BAR_OUTER_HEIGHT_DIFF =
     FIRST_ROW_PADDING_HEIGHT + SHOWMORE_BAR_HEIGHT - 2 // 2 pixel "adjustment"

diff --git a/src/components/ControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/styles/DashboardsBar.module.css
@@ -10,3 +10,7 @@
 .rightControls {
     float: right;
 }
+
+.topMargin {
+    margin-top: 71px;
+}
diff --git a/src/components/Dashboard/DashboardVerticalOffset.js b/src/components/Dashboard/DashboardVerticalOffset.js
@@ -7,10 +7,11 @@ import {
     MIN_ROW_COUNT,
 } from '../ControlBar/controlBarDimensions'
 import { sGetControlBarUserRows } from '../../reducers/controlBar'
+import { DRAG_HANDLE_HEIGHT } from '../ControlBar/ControlBar'
 
 const DashboardVerticalOffset = props => {
     const rows = props.editMode ? MIN_ROW_COUNT : props.userRows
-    const marginTop = getControlBarHeight(rows)
+    const marginTop = getControlBarHeight(rows) + DRAG_HANDLE_HEIGHT
 
     return <div className="page-container-top-margin" style={{ marginTop }} />
 }

diff --git a/src/components/Dashboard/EditDashboard.js b/src/components/Dashboard/EditDashboard.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 
-import DashboardVerticalOffset from './DashboardVerticalOffset'
 import TitleBar from '../TitleBar/TitleBar'
 import ItemGrid from '../ItemGrid/ItemGrid'
 import EditBar from '../ControlBar/EditBar'
@@ -16,6 +15,10 @@ import {
     sGetDashboardItems,
 } from '../../reducers/dashboards'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
 
 export class EditDashboard extends Component {
     state = {
@@ -44,8 +47,11 @@ export class EditDashboard extends Component {
             return <LayoutPrintPreview fromEdit={true} />
         }
 
+        const height =
+            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+
         return (
-            <div className="dashboard-wrapper">
+            <div className="dashboard-wrapper" style={{ height }}>
                 <TitleBar edit={true} />
                 <ItemGrid edit={true} />
             </div>
@@ -56,7 +62,6 @@ export class EditDashboard extends Component {
         return (
             <>
                 <EditBar />
-                <DashboardVerticalOffset editMode={true} />
                 {this.props.updateAccess ? (
                     this.renderGrid()
                 ) : (

diff --git a/src/components/Dashboard/NewDashboard.js b/src/components/Dashboard/NewDashboard.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import DashboardVerticalOffset from './DashboardVerticalOffset'
 import EditBar from '../ControlBar/EditBar'
 import TitleBar from '../TitleBar/TitleBar'
 import ItemGrid from '../ItemGrid/ItemGrid'
@@ -11,20 +10,27 @@ import LayoutPrintPreview from './PrintLayoutDashboard'
 import { acSetEditNewDashboard } from '../../actions/editDashboard'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
 
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
+
 class NewDashboard extends Component {
     componentDidMount() {
         this.props.setNewDashboard()
     }
 
     render() {
+        const height =
+            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+
         return (
             <>
                 <EditBar />
-                <DashboardVerticalOffset editMode={true} />
                 {this.props.isPrintPreviewView ? (
                     <LayoutPrintPreview fromEdit={true} />
                 ) : (
-                    <div className="dashboard-wrapper">
+                    <div className="dashboard-wrapper" style={{ height }}>
                         <TitleBar edit={true} />
                         <ItemGrid edit={true} />
                     </div>

diff --git a/src/components/Dashboard/PrintActionsBar.js b/src/components/Dashboard/PrintActionsBar.js
@@ -8,24 +8,30 @@ import { a4LandscapeWidthPx } from '../../modules/printUtils'
 
 import classes from './styles/PrintActionsBar.module.css'
 
+// 42px set in the module css file
+export const PRINT_ACTIONS_BAR_HEIGHT = 42
+
 const PrintActionsBar = ({ id }) => {
     const width =
         a4LandscapeWidthPx < window.innerWidth
             ? a4LandscapeWidthPx
             : window.innerWidth
 
     return (
-        <div className={classes.container}>
-            <div className={classes.inner} style={{ width }}>
-                <Link className={classes.link} to={`/${id}`}>
-                    <Button>
-                        <LessHorizontalIcon />
-                        {i18n.t('Exit print preview')}
-                    </Button>
-                </Link>
-                <Button onClick={window.print}>{i18n.t('Print')}</Button>
+        <>
+            <div className={classes.container}>
+                <div className={classes.inner} style={{ width }}>
+                    <Link className={classes.link} to={`/${id}`}>
+                        <Button>
+                            <LessHorizontalIcon />
+                            {i18n.t('Exit print preview')}
+                        </Button>
+                    </Link>
+                    <Button onClick={window.print}>{i18n.t('Print')}</Button>
+                </div>
             </div>
-        </div>
+            <div className={classes.topMargin} />
+        </>
     )
 }
 

diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js
@@ -18,6 +18,7 @@ import {
 } from '../../reducers/dashboards'
 import { PAGEBREAK, PRINT_TITLE_PAGE, SPACER } from '../../modules/itemTypes'
 import { a4LandscapeWidthPx } from '../../modules/printUtils'
+import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar'
 
 import classes from './styles/PrintDashboard.module.css'
 
@@ -76,10 +77,12 @@ export class PrintDashboard extends Component {
     }
 
     render() {
+        const height = window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT
+
         return (
             <>
                 <PrintActionsBar id={this.props.dashboard.id} />
-                <div className={classes.wrapper}>
+                <div className={classes.wrapper} style={{ height }}>
                     <PrintInfo isLayout={false} />
                     <div
                         className={classes.pageOuter}