fix: set filter badge top position based on offset height (#301) (#303)

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

@@ -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;
 

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 }} />;
 };

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));