From 45d90d54f2bc795618684dbe37094139eb5a491b Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Feb 2021 14:14:55 +0100 Subject: [PATCH] fix: spacing between titlebar and filter badge (#1551) The recent changes for responsive dashboard caused too much space between the titlebar and the filter badges Minor refactoring: * FilterBadge and FilterBar changed to functional components * style moved to css module * FilterBar simplified to basically just be a container for managing the position of the badges * redux connected the FilterBadges resulting in simpler event callbacks --- src/components/FilterBar/FilterBadge.js | 109 +++++++----------- src/components/FilterBar/FilterBar.js | 51 ++------ .../FilterBar/styles/FilterBadge.module.css | 23 ++++ .../FilterBar/styles/FilterBar.module.css | 3 +- src/components/ItemGrid/EditItemGrid.js | 3 + src/components/ItemGrid/ViewItemGrid.js | 3 + .../ItemGrid/styles/ItemGrid.module.css | 3 + .../TitleBar/styles/ViewTitleBar.module.css | 3 +- 8 files changed, 86 insertions(+), 112 deletions(-) create mode 100644 src/components/FilterBar/styles/FilterBadge.module.css create mode 100644 src/components/ItemGrid/styles/ItemGrid.module.css diff --git a/src/components/FilterBar/FilterBadge.js b/src/components/FilterBar/FilterBadge.js index 99ff23df0..3ff28de66 100644 --- a/src/components/FilterBar/FilterBadge.js +++ b/src/components/FilterBar/FilterBadge.js @@ -1,75 +1,48 @@ -import React, { Component } from 'react' +import React from 'react' +import { connect } from 'react-redux' import PropTypes from 'prop-types' - import i18n from '@dhis2/d2-i18n' -import { colors } from '@dhis2/ui' - -const styles = { - badgeContainer: { - margin: '2px', - padding: '0 16px', - borderRadius: '4px', - color: colors.white, - backgroundColor: '#212934', - height: 36, - display: 'flex', - alignItems: 'center', - }, - badge: { - fontSize: '13px', - cursor: 'pointer', - whiteSpace: 'nowrap', - }, - badgeRemove: { - fontSize: '12px', - textDecoration: 'underline', - marginLeft: '24px', - cursor: 'pointer', - }, -} - -class FilterBadge extends Component { - onClick = id => () => this.props.onClick(id) - onRemove = id => () => this.props.onRemove(id) - - render() { - const { data } = this.props - - return ( -
- - {`${data.name}: ${ - data.values.length > 1 - ? i18n.t('{{count}} selected', { - count: data.values.length, - }) - : data.values[0].name - }`} - - - {i18n.t('Remove')} - -
- ) - } -} +import { acRemoveItemFilter } from '../../actions/itemFilters' +import { acSetActiveModalDimension } from '../../actions/activeModalDimension' + +import classes from './styles/FilterBadge.module.css' + +const FilterBadge = ({ filter, openFilterModal, removeFilter }) => ( +
+ + openFilterModal({ + id: filter.id, + name: filter.name, + }) + } + > + {`${filter.name}: ${ + filter.values.length > 1 + ? i18n.t('{{count}} selected', { + count: filter.values.length, + }) + : filter.values[0].name + }`} + + removeFilter(filter.id)} + > + {i18n.t('Remove')} + +
+) FilterBadge.propTypes = { - data: PropTypes.object.isRequired, - onClick: PropTypes.func.isRequired, - onRemove: PropTypes.func.isRequired, -} - -FilterBadge.defaultProps = { - onClick: Function.prototype, - onRemove: Function.prototype, + filter: PropTypes.object.isRequired, + openFilterModal: PropTypes.func.isRequired, + removeFilter: PropTypes.func.isRequired, } -export default FilterBadge +export default connect(null, { + openFilterModal: acSetActiveModalDimension, + removeFilter: acRemoveItemFilter, +})(FilterBadge) diff --git a/src/components/FilterBar/FilterBar.js b/src/components/FilterBar/FilterBar.js index 68a301d66..04a7165ae 100644 --- a/src/components/FilterBar/FilterBar.js +++ b/src/components/FilterBar/FilterBar.js @@ -1,62 +1,31 @@ -import React, { Component } from 'react' +import React from 'react' import { connect } from 'react-redux' import PropTypes from 'prop-types' import FilterBadge from './FilterBadge' - import { sGetNamedItemFilters } from '../../reducers/itemFilters' -import { acRemoveItemFilter } from '../../actions/itemFilters' -import { acSetActiveModalDimension } from '../../actions/activeModalDimension' import classes from './styles/FilterBar.module.css' -class FilterBar extends Component { - onBadgeRemove = id => { - this.props.removeItemFilter(id) - } - - onBadgeClick = id => { - this.props.setActiveModalDimension({ - id, - name: this.props.filters.find(item => item.id === id).name, - }) - } - - render() { - const { filters } = this.props - - return filters.length ? ( - // the 3 is calculated so that the FilterBar has the same vertical position as the TitleBar in relation to the ControlBar -
- {filters.map(filter => ( - - ))} -
- ) : null - } -} +const FilterBar = ({ filters }) => + filters.length ? ( +
+ {filters.map(filter => ( + + ))} +
+ ) : null FilterBar.propTypes = { filters: PropTypes.array.isRequired, - removeItemFilter: PropTypes.func.isRequired, - setActiveModalDimension: PropTypes.func, } FilterBar.defaultProps = { filters: [], - removeItemFIlter: Function.prototype, } const mapStateToProps = state => ({ filters: sGetNamedItemFilters(state), }) -export default connect(mapStateToProps, { - setActiveModalDimension: acSetActiveModalDimension, - removeItemFilter: acRemoveItemFilter, -})(FilterBar) +export default connect(mapStateToProps)(FilterBar) diff --git a/src/components/FilterBar/styles/FilterBadge.module.css b/src/components/FilterBar/styles/FilterBadge.module.css new file mode 100644 index 000000000..138153e0c --- /dev/null +++ b/src/components/FilterBar/styles/FilterBadge.module.css @@ -0,0 +1,23 @@ +.container { + margin: 2px; + padding: 0 var(--spacers-dp16); + border-radius: 4px; + color: var(--colors-white); + background-color: #212934; + height: 36px; + display: flex; + align-items: center; +} + +.badge { + font-size: 13px; + cursor: pointer; + white-space: nowrap; +} + +.removeButton { + font-size: 12px; + text-decoration: underline; + margin-left: var(--spacers-dp24); + cursor: pointer; +} diff --git a/src/components/FilterBar/styles/FilterBar.module.css b/src/components/FilterBar/styles/FilterBar.module.css index a17ee0d20..d6f1cc2a9 100644 --- a/src/components/FilterBar/styles/FilterBar.module.css +++ b/src/components/FilterBar/styles/FilterBar.module.css @@ -1,7 +1,8 @@ .bar { position: sticky; + top: var(--spacers-dp12); z-index: 7; - padding: 8px 0; + margin-top: var(--spacers-dp8); display: flex; justify-content: center; flex-wrap: wrap; diff --git a/src/components/ItemGrid/EditItemGrid.js b/src/components/ItemGrid/EditItemGrid.js index 8c7108bab..e0cc81bb4 100644 --- a/src/components/ItemGrid/EditItemGrid.js +++ b/src/components/ItemGrid/EditItemGrid.js @@ -32,6 +32,8 @@ import ProgressiveLoadingContainer from '../Item/ProgressiveLoadingContainer' import { EDIT } from '../Dashboard/dashboardModes' import { useWindowDimensions } from '../WindowDimensionsProvider' +import classes from './styles/ItemGrid.module.css' + import 'react-grid-layout/css/styles.css' import 'react-resizable/css/styles.css' import './styles/ItemGrid.css' @@ -102,6 +104,7 @@ const EditItemGrid = ({ ) : null} { ) : null}