From 70f248c248d364c02f3edc87069e1b07326764f5 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Thu, 2 May 2019 14:29:12 +0200
Subject: [PATCH] fix: set filter badge top position based on offset height
 (#301)

Fixes [DHIS2-6631]

The top position of the filter badges should be based on the height of the dashboards bar, so that the dashboards bar doesn't hide the badge if its been configured to more than one row
---
 src/components/ControlBar/controlBarDimensions.js   |  8 ++++++--
 src/components/Dashboard/DashboardVerticalOffset.js |  5 ++---
 src/components/FilterBar/FilterBar.js               | 12 ++++++++----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/ControlBar/controlBarDimensions.js b/src/components/ControlBar/controlBarDimensions.js
index e050e877a..3425a38c2 100644
--- a/src/components/ControlBar/controlBarDimensions.js
+++ b/src/components/ControlBar/controlBarDimensions.js
@@ -3,10 +3,10 @@ import { SHOWMORE_BAR_HEIGHT } from './ShowMoreButton';
 
 export const CONTROL_BAR_ROW_HEIGHT = 36;
 export const FIRST_ROW_PADDING_HEIGHT = 10;
-export const HEADERBAR_HEIGHT = 48;
-
 export const MIN_ROW_COUNT = 1;
 
+const HEADERBAR_HEIGHT = 48;
+
 const CONTROL_BAR_OUTER_HEIGHT_DIFF =
     FIRST_ROW_PADDING_HEIGHT + SHOWMORE_BAR_HEIGHT - 2; // 2 pixel "adjustment"
 
@@ -20,6 +20,10 @@ export const getNumRowsFromHeight = height => {
     );
 };
 
+export const getTopOffset = rows => {
+    return HEADERBAR_HEIGHT + getControlBarHeight(rows, false);
+};
+
 export const getControlBarHeight = (rows, expandable) => {
     const flapHeight = !expandable ? END_FLAP_HEIGHT : 0;
 
diff --git a/src/components/Dashboard/DashboardVerticalOffset.js b/src/components/Dashboard/DashboardVerticalOffset.js
index bd0823892..30579a1f4 100644
--- a/src/components/Dashboard/DashboardVerticalOffset.js
+++ b/src/components/Dashboard/DashboardVerticalOffset.js
@@ -2,15 +2,14 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import {
-    HEADERBAR_HEIGHT,
-    getControlBarHeight,
+    getTopOffset,
     MIN_ROW_COUNT,
 } from '../ControlBar/controlBarDimensions';
 import { sGetControlBarUserRows } from '../../reducers/controlBar';
 
 const DashboardVerticalOffset = props => {
     const rows = props.editMode ? MIN_ROW_COUNT : props.userRows;
-    const marginTop = HEADERBAR_HEIGHT + getControlBarHeight(rows, false);
+    const marginTop = getTopOffset(rows);
 
     return <div className="page-container-top-margin" style={{ marginTop }} />;
 };
diff --git a/src/components/FilterBar/FilterBar.js b/src/components/FilterBar/FilterBar.js
index 7a8d83d4d..98898876a 100644
--- a/src/components/FilterBar/FilterBar.js
+++ b/src/components/FilterBar/FilterBar.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
+import { withStyles } from '@material-ui/core/styles';
 
 import { sGetDimensions } from '../../reducers/dimensions';
 import { sGetItemFiltersRoot } from '../../reducers/itemFilters';
+import { sGetControlBarUserRows } from '../../reducers/controlBar';
+import { getTopOffset } from '../ControlBar/controlBarDimensions';
 import { acRemoveItemFilter } from '../../actions/itemFilters';
 import { acRemoveEditItemFilter } from '../../actions/editItemFilters';
 import { acSetActiveModalDimension } from '../../actions/activeModalDimension';
@@ -14,7 +17,6 @@ import FilterBadge from './FilterBadge';
 const styles = {
     bar: {
         position: 'sticky',
-        top: 130,
         zIndex: 7,
         padding: '8px 0',
         display: 'flex',
@@ -37,10 +39,11 @@ export class FilterBar extends Component {
     };
 
     render() {
-        const { filters } = this.props;
+        const { filters, userRows, classes } = this.props;
+        const top = getTopOffset(userRows) + 10;
 
         return filters.length ? (
-            <div style={styles.bar}>
+            <div className={classes.bar} style={{ top }}>
                 {filters.map(filter => (
                     <FilterBadge
                         key={filter.id}
@@ -87,6 +90,7 @@ const filtersSelector = createSelector(
 
 const mapStateToProps = state => ({
     filters: filtersSelector(state),
+    userRows: sGetControlBarUserRows(state),
 });
 
 export default connect(
@@ -96,4 +100,4 @@ export default connect(
         removeItemFilter: acRemoveItemFilter,
         removeEditItemFilter: acRemoveEditItemFilter,
     }
-)(FilterBar);
+)(withStyles(styles)(FilterBar));