Skip to content

Commit

Permalink
fix: filter bar position (DHIS2-9453) (#1073)
Browse files Browse the repository at this point in the history
* fix: filter bar position (DHIS2-9453)

The calculation of the position of the filter bar was based on the
height of the control bar.
After the change for the scrollbar, the filter bar was positioned lower
than where it should have.
Removing the height of the control bar from the top position of the
filter bar puts it back in the right place.

* chore: explain the FilterBar top position value

Co-authored-by: Jan Henrik Øverland <jan@dhis2.org>
  • Loading branch information
edoardo and janhenrikoverland authored Sep 21, 2020
1 parent 491d592 commit f573db0
Showing 1 changed file with 3 additions and 8 deletions.
11 changes: 3 additions & 8 deletions src/components/FilterBar/FilterBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import PropTypes from 'prop-types'
import FilterBadge from './FilterBadge'

import { sGetNamedItemFilters } from '../../reducers/itemFilters'
import { sGetControlBarUserRows } from '../../reducers/controlBar'
import { getControlBarHeight } from '../ControlBar/controlBarDimensions'
import { acRemoveItemFilter } from '../../actions/itemFilters'
import { acSetActiveModalDimension } from '../../actions/activeModalDimension'

Expand All @@ -25,12 +23,11 @@ export class FilterBar extends Component {
}

render() {
const { filters, userRows } = this.props

const top = getControlBarHeight(userRows) + 10
const { filters } = this.props

return filters.length ? (
<div className={classes.bar} style={{ top }}>
// the 3 is calculated so that the FilterBar has the same vertical position as the TitleBar in relation to the ControlBar
<div className={classes.bar} style={{ top: 3 }}>
{filters.map(filter => (
<FilterBadge
key={filter.id}
Expand All @@ -48,7 +45,6 @@ FilterBar.propTypes = {
filters: PropTypes.array.isRequired,
removeItemFilter: PropTypes.func.isRequired,
setActiveModalDimension: PropTypes.func,
userRows: PropTypes.number,
}

FilterBar.defaultProps = {
Expand All @@ -58,7 +54,6 @@ FilterBar.defaultProps = {

const mapStateToProps = state => ({
filters: sGetNamedItemFilters(state),
userRows: sGetControlBarUserRows(state),
})

export default connect(mapStateToProps, {
Expand Down

0 comments on commit f573db0

Please sign in to comment.