From 3ead678d53d138def2bf3430d443f9225ab64d19 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 1 Sep 2020 10:22:29 +0200 Subject: [PATCH 01/13] fix: scrollbar fixes for View and Edit mode --- src/components/App.css | 6 ++++++ src/components/ControlBar/ControlBar.js | 2 +- .../ControlBar/controlBarDimensions.js | 1 + .../Dashboard/DashboardVerticalOffset.js | 3 ++- src/components/Dashboard/EditDashboard.js | 11 ++++++++++- src/components/Dashboard/ViewDashboard.js | 16 +++++++++++++++- src/components/TitleBar/TitleBar.js | 2 +- 7 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/components/App.css b/src/components/App.css index 81077ca02..850f501db 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -15,10 +15,16 @@ body { } } +.app-shell-app { + overflow: hidden !important; +} + .dashboard-wrapper { background-color: #f4f6f8; padding-left: 10px; padding-right: 10px; + overflow: auto; + padding-bottom: 100px; } /* plugin TODO */ diff --git a/src/components/ControlBar/ControlBar.js b/src/components/ControlBar/ControlBar.js index 68e9b6baf..38cb9dad8 100644 --- 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/controlBarDimensions.js b/src/components/ControlBar/controlBarDimensions.js index 883dd3e41..ae9d5e425 100644 --- 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/Dashboard/DashboardVerticalOffset.js b/src/components/Dashboard/DashboardVerticalOffset.js index 8f214b742..f57701d4f 100644 --- 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
} diff --git a/src/components/Dashboard/EditDashboard.js b/src/components/Dashboard/EditDashboard.js index 3b364383e..32656c2f3 100644 --- a/src/components/Dashboard/EditDashboard.js +++ b/src/components/Dashboard/EditDashboard.js @@ -16,6 +16,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 +48,13 @@ export class EditDashboard extends Component { return } + const style = { + height: + window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1), + } + return ( -
+
diff --git a/src/components/Dashboard/ViewDashboard.js b/src/components/Dashboard/ViewDashboard.js index 519647d1e..13568a3d7 100644 --- a/src/components/Dashboard/ViewDashboard.js +++ b/src/components/Dashboard/ViewDashboard.js @@ -9,8 +9,13 @@ import DashboardsBar from '../ControlBar/DashboardsBar' import DashboardVerticalOffset from './DashboardVerticalOffset' import { sGetIsEditing } from '../../reducers/editDashboard' import { sGetIsPrinting } from '../../reducers/printDashboard' +import { sGetControlBarUserRows } from '../../reducers/controlBar' import { acClearEditDashboard } from '../../actions/editDashboard' import { acClearPrintDashboard } from '../../actions/printDashboard' +import { + getControlBarHeight, + HEADERBAR_HEIGHT, +} from '../ControlBar/controlBarDimensions' export const ViewDashboard = props => { useEffect(() => { @@ -21,11 +26,18 @@ export const ViewDashboard = props => { } }, [props.dashboardIsEditing, props.dashboardIsPrinting]) + const style = { + height: + window.innerHeight - + HEADERBAR_HEIGHT - + getControlBarHeight(props.controlBarRows), + } + return ( <> -
+
@@ -37,6 +49,7 @@ export const ViewDashboard = props => { ViewDashboard.propTypes = { clearEditDashboard: PropTypes.func, clearPrintDashboard: PropTypes.func, + controlBarRows: PropTypes.number, dashboardIsEditing: PropTypes.bool, dashboardIsPrinting: PropTypes.bool, } @@ -45,6 +58,7 @@ const mapStateToProps = state => { return { dashboardIsEditing: sGetIsEditing(state), dashboardIsPrinting: sGetIsPrinting(state), + controlBarRows: sGetControlBarUserRows(state), } } diff --git a/src/components/TitleBar/TitleBar.js b/src/components/TitleBar/TitleBar.js index b593b84e7..f8c256a43 100644 --- a/src/components/TitleBar/TitleBar.js +++ b/src/components/TitleBar/TitleBar.js @@ -26,7 +26,7 @@ const TitleBar = ({ edit }) => {
{edit ? ( From ee81e00ecfd3b242ddaa0d04f02ae6e6efd7ec25 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 1 Sep 2020 13:23:04 +0200 Subject: [PATCH 02/13] fix: print actions bar is now fixed --- src/components/Dashboard/PrintActionsBar.js | 23 +++++++++++-------- .../styles/PrintActionsBar.module.css | 7 ++++++ 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/Dashboard/PrintActionsBar.js b/src/components/Dashboard/PrintActionsBar.js index deb2304de..40435975e 100644 --- a/src/components/Dashboard/PrintActionsBar.js +++ b/src/components/Dashboard/PrintActionsBar.js @@ -15,17 +15,20 @@ const PrintActionsBar = ({ id }) => { : window.innerWidth return ( -
-
- - - - + <> +
+
+ + + + +
-
+
+ ) } diff --git a/src/components/Dashboard/styles/PrintActionsBar.module.css b/src/components/Dashboard/styles/PrintActionsBar.module.css index f8b84c85d..e46385396 100644 --- a/src/components/Dashboard/styles/PrintActionsBar.module.css +++ b/src/components/Dashboard/styles/PrintActionsBar.module.css @@ -2,6 +2,13 @@ background-color: var(--colors-grey600); width: 100%; padding: 3px; + position: fixed; + z-index: 10; + height: 42px; +} + +.topMargin { + margin-top: 42px; } .inner { From 549254cd13f467c02204b76bdca5c9e0900e2395 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 1 Sep 2020 13:40:12 +0200 Subject: [PATCH 03/13] fix: css priority --- src/components/App.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/App.css b/src/components/App.css index 850f501db..2e76a23e3 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -2,6 +2,10 @@ body { background-color: #f4f6f8; } +.app-shell-app { + overflow: hidden !important; +} + @media print { body { width: 100% !important; @@ -15,10 +19,6 @@ body { } } -.app-shell-app { - overflow: hidden !important; -} - .dashboard-wrapper { background-color: #f4f6f8; padding-left: 10px; From 9cacb34859469b5786db5b18f50f579eef11cd02 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 1 Sep 2020 15:24:03 +0200 Subject: [PATCH 04/13] fix: scrollbars in print mode --- src/components/App.css | 26 +++++++++---------- src/components/Dashboard/PrintDashboard.js | 7 ++++- .../Dashboard/PrintLayoutDashboard.js | 12 ++++++++- .../styles/PrintActionsBar.module.css | 4 +++ .../styles/PrintDashboard.module.css | 10 +++---- .../styles/PrintLayoutDashboard.module.css | 10 +++---- 6 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/components/App.css b/src/components/App.css index 2e76a23e3..cecfe7266 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -6,19 +6,6 @@ body { overflow: hidden !important; } -@media print { - body { - width: 100% !important; - padding: 0 !important; - margin: 0 !important; - background-color: white; - } - - .app-shell-app { - overflow: visible !important; - } -} - .dashboard-wrapper { background-color: #f4f6f8; padding-left: 10px; @@ -41,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/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js index 850644f89..effc5bf39 100644 --- a/src/components/Dashboard/PrintDashboard.js +++ b/src/components/Dashboard/PrintDashboard.js @@ -75,11 +75,16 @@ export class PrintDashboard extends Component { } } + getHeight = () => { + return window.innerHeight - 42 + } + render() { + const height = this.getHeight() return ( <> -
+
{ + return this.props.fromEdit + ? window.innerHeight + : window.innerHeight - 42 + } + render() { const style = this.props.fromEdit ? { marginTop: '100px' } : {} + style.height = this.getHeight() + return ( <> {!this.props.fromEdit && ( - + <> + + )}
{!this.props.fromEdit && } diff --git a/src/components/Dashboard/styles/PrintActionsBar.module.css b/src/components/Dashboard/styles/PrintActionsBar.module.css index e46385396..824f06144 100644 --- a/src/components/Dashboard/styles/PrintActionsBar.module.css +++ b/src/components/Dashboard/styles/PrintActionsBar.module.css @@ -27,4 +27,8 @@ .container { display: none; } + + .topMargin { + margin-top: 0px; + } } diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css index 95c2e39b3..07d6ab43a 100644 --- a/src/components/Dashboard/styles/PrintDashboard.module.css +++ b/src/components/Dashboard/styles/PrintDashboard.module.css @@ -1,6 +1,8 @@ .wrapper { background-color: #f4f6f8; - margin-left: 30px; + margin-left: var(--spacers-dp32); + padding-left: var(--spacers-dp12); + overflow-y: auto; } .pageOuter { @@ -12,12 +14,10 @@ } @media print { - .pageWrapper { - display: none; - } - .wrapper { background-color: white; + height: auto !important; + overflow: visible !important; } .pageOuter { diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css index 95c2e39b3..07d6ab43a 100644 --- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css +++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css @@ -1,6 +1,8 @@ .wrapper { background-color: #f4f6f8; - margin-left: 30px; + margin-left: var(--spacers-dp32); + padding-left: var(--spacers-dp12); + overflow-y: auto; } .pageOuter { @@ -12,12 +14,10 @@ } @media print { - .pageWrapper { - display: none; - } - .wrapper { background-color: white; + height: auto !important; + overflow: visible !important; } .pageOuter { From 1ea488629c3a170edbc0e9892d5d96093ee69d1e Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 1 Sep 2020 16:13:38 +0200 Subject: [PATCH 05/13] fix: scrollbars in print preview mode --- src/components/ControlBar/EditBar.js | 1 + src/components/ControlBar/styles/DashboardsBar.module.css | 4 ++++ src/components/Dashboard/EditDashboard.js | 2 -- src/components/Dashboard/PrintLayoutDashboard.js | 5 +++-- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js index b56703a2c..46cebbdf0 100644 --- a/src/components/ControlBar/EditBar.js +++ b/src/components/ControlBar/EditBar.js @@ -210,6 +210,7 @@ export class EditBar extends Component {
+
{this.translationDialog()} {this.confirmDeleteDialog()} diff --git a/src/components/ControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/styles/DashboardsBar.module.css index 7276f8e0e..74515c1ce 100644 --- 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/EditDashboard.js b/src/components/Dashboard/EditDashboard.js index 32656c2f3..30e3ce5c3 100644 --- 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' @@ -65,7 +64,6 @@ export class EditDashboard extends Component { return ( <> - {this.props.updateAccess ? ( this.renderGrid() ) : ( diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index c04dc0bcc..db6581a98 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import PropTypes from 'prop-types' +import { spacers } from '@dhis2/ui' import PrintInfo from './PrintInfo' import PrintActionsBar from './PrintActionsBar' @@ -95,12 +96,12 @@ export class PrintLayoutDashboard extends Component { getHeight = () => { return this.props.fromEdit - ? window.innerHeight + ? window.innerHeight - 71 - 48 : window.innerHeight - 42 } render() { - const style = this.props.fromEdit ? { marginTop: '100px' } : {} + const style = this.props.fromEdit ? { paddingTop: spacers.dp24 } : {} style.height = this.getHeight() return ( From 031890a0ebc4f90a06b7e59784d51143f546d22c Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 2 Sep 2020 10:57:47 +0200 Subject: [PATCH 06/13] fix: resizing of pages to deal with margin changes --- .../Dashboard/PrintLayoutDashboard.js | 41 +++++++++++++------ .../styles/PrintLayoutDashboard.module.css | 5 ++- .../Dashboard/styles/print-layout.css | 13 +++--- src/components/ItemGrid/gridUtil.js | 3 +- src/modules/printUtils.js | 2 + 5 files changed, 43 insertions(+), 21 deletions(-) diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index db6581a98..45f72726e 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -21,31 +21,48 @@ import { sGetDashboardItems, } from '../../reducers/dashboards' import { PAGEBREAK, PRINT_TITLE_PAGE } from '../../modules/itemTypes' -import { a4LandscapeWidthPx } from '../../modules/printUtils' +import { + a4LandscapeWidthPx, + MAX_ITEM_GRID_HEIGHT, +} from '../../modules/printUtils' import classes from './styles/PrintLayoutDashboard.module.css' import './styles/print.css' import './styles/print-layout.css' -const isEven = n => n % 2 == 0 +const isLeapPage = n => { + // pages 5,9,13,17,21,25,29... are leap pages + let x = 0 + const startPage = 1 + const getMultiple = factor => startPage + 4 * factor + let multiple = getMultiple(0) + let isLeapPage = false + while (multiple < n) { + multiple = getMultiple(x) + ++x + if (multiple === n) { + isLeapPage = true + break + } + } + return isLeapPage +} const addPageBreaks = ({ items, addDashboardItem }) => { // add enough page breaks so that each item could // be put on its own page. Due to the react-grid-layout // unit system, we have to estimate roughly the size of each - // page. At regular intervals adding an extra unit, like a leap year :P + // page. At regular intervals subtract a unit, like a backwards leap year :P let yPos = 0 const yPosList = [] - for (let i = 0; i < items.length; ++i) { - if (i === 0) { + for (let pageNum = 1; pageNum <= items.length; ++pageNum) { + if (pageNum === 1) { yPos += 35 - } else if (i === 4 || i === 10) { - yPos += 40 - } else if (isEven(i)) { - yPos += 39 + } else if (isLeapPage(pageNum)) { + yPos += 38 } else { - yPos += 40 + yPos += 39 } yPosList.push(yPos) } @@ -69,9 +86,9 @@ export class PrintLayoutDashboard extends Component { // If any items are taller than one page, reduce it to one // page (react-grid-layout units) this.props.items.forEach(item => { - if (item.h > 34) { + if (item.h > MAX_ITEM_GRID_HEIGHT) { this.props.updateDashboardItem( - Object.assign({}, item, { h: 34 }) + Object.assign({}, item, { h: MAX_ITEM_GRID_HEIGHT }) ) } }) diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css index 07d6ab43a..a065c66f0 100644 --- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css +++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css @@ -18,10 +18,13 @@ background-color: white; height: auto !important; overflow: visible !important; + margin-left: 0px; + padding-left: 0px; } .pageOuter { box-shadow: none; - border-radius: none; + border-radius: 0px; + padding: 0px; } } diff --git a/src/components/Dashboard/styles/print-layout.css b/src/components/Dashboard/styles/print-layout.css index 7437b79b2..ba8445f59 100644 --- a/src/components/Dashboard/styles/print-layout.css +++ b/src/components/Dashboard/styles/print-layout.css @@ -1,16 +1,15 @@ -@media print { - .react-grid-item.layout.PAGEBREAK { - display: none !important; - } -} - .react-grid-item.layout.PAGEBREAK { margin-left: -23px; min-height: 50px !important; height: 50px !important; - margin-bottom: 40px !important; } .react-grid-item.layout.SPACER { visibility: hidden; } + +@media print { + .react-grid-item.layout.PAGEBREAK { + display: none !important; + } +} diff --git a/src/components/ItemGrid/gridUtil.js b/src/components/ItemGrid/gridUtil.js index 060c4b6b6..953244b9b 100644 --- a/src/components/ItemGrid/gridUtil.js +++ b/src/components/ItemGrid/gridUtil.js @@ -1,6 +1,7 @@ import isFunction from 'd2-utilizr/lib/isFunction' import { orObject } from '../../modules/util' +import { MAX_ITEM_GRID_HEIGHT } from '../../modules/printUtils' // Dimensions for the react-grid-layout @@ -83,7 +84,7 @@ export const getPrintTitlePageItemShape = () => { x: 0, y: 0, w: GRID_COLUMNS - 1, - h: 30, + h: MAX_ITEM_GRID_HEIGHT, static: true, minH: 1, } diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index 465df314e..2678efa98 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -7,6 +7,8 @@ import { itemTypeMap } from './itemTypes' // const a4LandscapeHeightPx = 794 export const a4LandscapeWidthPx = 1102 +export const MAX_ITEM_GRID_HEIGHT = 34 + export const getDomGridItemsSortedByYPos = elements => { const types = Object.keys(itemTypeMap) const elementsWithBoundingRect = orArray(elements).map(el => { From 573d55e78f1a766a1220f8ea373e6ee4ccbdebf2 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 2 Sep 2020 11:06:30 +0200 Subject: [PATCH 07/13] fix: update snapshots --- .../__snapshots__/EditBar.spec.js.snap | 21 +++++++++++++++++++ .../Dashboard/__tests__/ViewDashboard.spec.js | 1 + .../__snapshots__/EditDashboard.spec.js.snap | 14 +++++-------- .../__snapshots__/ViewDashboard.spec.js.snap | 5 +++++ 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap index a46240776..16a44a638 100644 --- 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`] = `
+
`; @@ -67,6 +70,9 @@ exports[`EditBar when update access is false renders only the Discard button 1`]
+
`; @@ -132,6 +138,9 @@ exports[`EditBar when update access is true when dashboard id property provided
+
+
+
+
+
`; diff --git a/src/components/Dashboard/__tests__/ViewDashboard.spec.js b/src/components/Dashboard/__tests__/ViewDashboard.spec.js index f3dac4493..313b5066b 100644 --- a/src/components/Dashboard/__tests__/ViewDashboard.spec.js +++ b/src/components/Dashboard/__tests__/ViewDashboard.spec.js @@ -23,6 +23,7 @@ describe('ViewDashboard', () => { clearPrintDashboard: jest.fn(), dashboardIsEditing: false, dashboardIsPrinting: false, + controlBarRows: 2, } }) diff --git a/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap index 514654f9a..e58517503 100644 --- a/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap +++ b/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap @@ -3,11 +3,13 @@ exports[`EditDashboard renders message when enough access 1`] = ` -
- @@ -34,9 +33,6 @@ exports[`EditDashboard renders message when not enough access 1`] = ` exports[`EditDashboard renders print preview 1`] = ` - diff --git a/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap b/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap index 2f9cd8ca2..60712f37e 100644 --- a/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap +++ b/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap @@ -6,6 +6,11 @@ exports[`ViewDashboard renders correctly default 1`] = `
Date: Wed, 2 Sep 2020 11:29:03 +0200 Subject: [PATCH 08/13] fix: name some constants --- src/components/ControlBar/EditBar.js | 3 +++ src/components/Dashboard/PrintActionsBar.js | 3 +++ src/components/Dashboard/PrintLayoutDashboard.js | 11 ++++++----- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js index 46cebbdf0..8dbc66d81 100644 --- a/src/components/ControlBar/EditBar.js +++ b/src/components/ControlBar/EditBar.js @@ -42,6 +42,9 @@ const buttonBarStyle = { marginRight: '15px', } +// see DashboardsBar.module.css +export const EDIT_BAR_HEIGHT = 71 + export class EditBar extends Component { state = { translationDialogIsOpen: false, diff --git a/src/components/Dashboard/PrintActionsBar.js b/src/components/Dashboard/PrintActionsBar.js index 40435975e..81e015e53 100644 --- a/src/components/Dashboard/PrintActionsBar.js +++ b/src/components/Dashboard/PrintActionsBar.js @@ -8,6 +8,9 @@ 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 diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index 45f72726e..30e3aae3c 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -25,6 +25,9 @@ import { a4LandscapeWidthPx, MAX_ITEM_GRID_HEIGHT, } from '../../modules/printUtils' +import { HEADERBAR_HEIGHT } from '../ControlBar/controlBarDimensions' +import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar' +import { EDIT_BAR_HEIGHT } from '../ControlBar/EditBar' import classes from './styles/PrintLayoutDashboard.module.css' @@ -113,8 +116,8 @@ export class PrintLayoutDashboard extends Component { getHeight = () => { return this.props.fromEdit - ? window.innerHeight - 71 - 48 - : window.innerHeight - 42 + ? window.innerHeight - EDIT_BAR_HEIGHT - HEADERBAR_HEIGHT + : window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT } render() { @@ -124,9 +127,7 @@ export class PrintLayoutDashboard extends Component { return ( <> {!this.props.fromEdit && ( - <> - - + )}
{!this.props.fromEdit && } From ba87c855ce8993b187cb77ed04812518a5477cee Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 2 Sep 2020 18:28:29 +0200 Subject: [PATCH 09/13] fix: new dashboard --- src/components/ControlBar/EditBar.js | 3 --- src/components/Dashboard/EditDashboard.js | 8 +++--- src/components/Dashboard/NewDashboard.js | 12 ++++++--- src/components/Dashboard/PrintDashboard.js | 8 +++--- .../Dashboard/PrintLayoutDashboard.js | 26 ++++++++++++------- src/components/Dashboard/ViewDashboard.js | 12 ++++----- 6 files changed, 37 insertions(+), 32 deletions(-) diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js index 8dbc66d81..46cebbdf0 100644 --- a/src/components/ControlBar/EditBar.js +++ b/src/components/ControlBar/EditBar.js @@ -42,9 +42,6 @@ const buttonBarStyle = { marginRight: '15px', } -// see DashboardsBar.module.css -export const EDIT_BAR_HEIGHT = 71 - export class EditBar extends Component { state = { translationDialogIsOpen: false, diff --git a/src/components/Dashboard/EditDashboard.js b/src/components/Dashboard/EditDashboard.js index 30e3ce5c3..39972bc83 100644 --- a/src/components/Dashboard/EditDashboard.js +++ b/src/components/Dashboard/EditDashboard.js @@ -47,13 +47,11 @@ export class EditDashboard extends Component { return } - const style = { - height: - window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1), - } + const height = + window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1) return ( -
+
diff --git a/src/components/Dashboard/NewDashboard.js b/src/components/Dashboard/NewDashboard.js index ea610f53d..4d6547d40 100644 --- 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 ( <> - {this.props.isPrintPreviewView ? ( ) : ( -
+
diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js index effc5bf39..f33140198 100644 --- 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' @@ -75,12 +76,9 @@ export class PrintDashboard extends Component { } } - getHeight = () => { - return window.innerHeight - 42 - } - render() { - const height = this.getHeight() + const height = window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT + return ( <> diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index 30e3aae3c..605f1a01c 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -25,15 +25,20 @@ import { a4LandscapeWidthPx, MAX_ITEM_GRID_HEIGHT, } from '../../modules/printUtils' -import { HEADERBAR_HEIGHT } from '../ControlBar/controlBarDimensions' +import { + getControlBarHeight, + HEADERBAR_HEIGHT, +} from '../ControlBar/controlBarDimensions' import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar' -import { EDIT_BAR_HEIGHT } from '../ControlBar/EditBar' +import { DRAG_HANDLE_HEIGHT } from '../ControlBar/ControlBar' import classes from './styles/PrintLayoutDashboard.module.css' import './styles/print.css' import './styles/print-layout.css' +const EDIT_BAR_HEIGHT = getControlBarHeight(1) + DRAG_HANDLE_HEIGHT + const isLeapPage = n => { // pages 5,9,13,17,21,25,29... are leap pages let x = 0 @@ -114,22 +119,25 @@ export class PrintLayoutDashboard extends Component { } } - getHeight = () => { + getWrapperStyle = () => { return this.props.fromEdit - ? window.innerHeight - EDIT_BAR_HEIGHT - HEADERBAR_HEIGHT - : window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT + ? { + paddingTop: spacers.dp24, + height: + window.innerHeight - EDIT_BAR_HEIGHT - HEADERBAR_HEIGHT, + } + : { + height: window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT, + } } render() { - const style = this.props.fromEdit ? { paddingTop: spacers.dp24 } : {} - style.height = this.getHeight() - return ( <> {!this.props.fromEdit && ( )} -
+
{!this.props.fromEdit && }
{ } }, [props.dashboardIsEditing, props.dashboardIsPrinting]) - const style = { - height: - window.innerHeight - - HEADERBAR_HEIGHT - - getControlBarHeight(props.controlBarRows), - } + const height = + window.innerHeight - + HEADERBAR_HEIGHT - + getControlBarHeight(props.controlBarRows) return ( <> -
+
From 3933416c1f9a47845ed8f735fcf41d57c84774db Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 3 Sep 2020 08:34:15 +0200 Subject: [PATCH 10/13] fix: more adjustments to get the page to fit right --- src/components/Dashboard/PrintLayoutDashboard.js | 2 +- .../Dashboard/styles/PrintLayoutDashboard.module.css | 3 +-- src/components/Dashboard/styles/print-layout.css | 4 ++++ src/modules/printUtils.js | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index 605f1a01c..809575101 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -68,7 +68,7 @@ const addPageBreaks = ({ items, addDashboardItem }) => { if (pageNum === 1) { yPos += 35 } else if (isLeapPage(pageNum)) { - yPos += 38 + yPos += 40 } else { yPos += 39 } diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css index a065c66f0..e3d9987ee 100644 --- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css +++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css @@ -6,7 +6,7 @@ } .pageOuter { - padding: 10px; + padding: var(--spacers-dp12); background-color: white; border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); @@ -25,6 +25,5 @@ .pageOuter { box-shadow: none; border-radius: 0px; - padding: 0px; } } diff --git a/src/components/Dashboard/styles/print-layout.css b/src/components/Dashboard/styles/print-layout.css index ba8445f59..b1290e3f7 100644 --- a/src/components/Dashboard/styles/print-layout.css +++ b/src/components/Dashboard/styles/print-layout.css @@ -10,6 +10,10 @@ @media print { .react-grid-item.layout.PAGEBREAK { + visibility: hidden !important; + } + + .react-grid-item.layout.PAGEBREAK.removed { display: none !important; } } diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index 2678efa98..788498f4d 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -7,7 +7,7 @@ import { itemTypeMap } from './itemTypes' // const a4LandscapeHeightPx = 794 export const a4LandscapeWidthPx = 1102 -export const MAX_ITEM_GRID_HEIGHT = 34 +export const MAX_ITEM_GRID_HEIGHT = 33 export const getDomGridItemsSortedByYPos = elements => { const types = Object.keys(itemTypeMap) From e76a6b4ad10fbec178d017535f73c4213ae791e1 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 3 Sep 2020 09:24:18 +0200 Subject: [PATCH 11/13] fix: correct scroll container --- src/components/Dashboard/styles/print-layout.css | 2 +- src/components/Item/ProgressiveLoadingContainer.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/styles/print-layout.css b/src/components/Dashboard/styles/print-layout.css index b1290e3f7..7b163f9a4 100644 --- a/src/components/Dashboard/styles/print-layout.css +++ b/src/components/Dashboard/styles/print-layout.css @@ -1,5 +1,5 @@ .react-grid-item.layout.PAGEBREAK { - margin-left: -23px; + margin-left: -25px; min-height: 50px !important; height: 50px !important; } diff --git a/src/components/Item/ProgressiveLoadingContainer.js b/src/components/Item/ProgressiveLoadingContainer.js index f202c5136..60968d490 100644 --- a/src/components/Item/ProgressiveLoadingContainer.js +++ b/src/components/Item/ProgressiveLoadingContainer.js @@ -53,7 +53,7 @@ class ProgressiveLoadingContainer extends Component { const containers = [ window, // this is probably unnecessary - ...document.getElementsByClassName('app-shell-app'), + ...document.getElementsByClassName('dashboard-wrapper'), ] containers.forEach(container => { container.addEventListener('scroll', this.shouldLoadHandler) @@ -62,7 +62,7 @@ class ProgressiveLoadingContainer extends Component { removeHandler() { const containers = [ window, // this is probably unnecessary - ...document.getElementsByClassName('app-shell-app'), + ...document.getElementsByClassName('dashboard-wrapper'), ] containers.forEach(container => { container.removeEventListener('scroll', this.shouldLoadHandler) From 43bcdfe4979b49f88099703e369deb11a1bbc359 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 3 Sep 2020 09:34:26 +0200 Subject: [PATCH 12/13] fix: comment --- src/components/Dashboard/PrintLayoutDashboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index 809575101..77fde0684 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -61,7 +61,7 @@ const addPageBreaks = ({ items, addDashboardItem }) => { // add enough page breaks so that each item could // be put on its own page. Due to the react-grid-layout // unit system, we have to estimate roughly the size of each - // page. At regular intervals subtract a unit, like a backwards leap year :P + // page. At regular intervals add a unit, like a leap year let yPos = 0 const yPosList = [] for (let pageNum = 1; pageNum <= items.length; ++pageNum) { From 37c9f490060079800618551cfc82ad3a62084abe Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 3 Sep 2020 09:42:53 +0200 Subject: [PATCH 13/13] fix: use same styles for layout and oipp print --- src/components/Dashboard/styles/PrintDashboard.module.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css index 07d6ab43a..e3d9987ee 100644 --- a/src/components/Dashboard/styles/PrintDashboard.module.css +++ b/src/components/Dashboard/styles/PrintDashboard.module.css @@ -6,7 +6,7 @@ } .pageOuter { - padding: 10px; + padding: var(--spacers-dp12); background-color: white; border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); @@ -18,10 +18,12 @@ background-color: white; height: auto !important; overflow: visible !important; + margin-left: 0px; + padding-left: 0px; } .pageOuter { box-shadow: none; - border-radius: none; + border-radius: 0px; } }