Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 2, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/components/ControlBar/controlBarDimensions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

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

Expand Down
5 changes: 2 additions & 3 deletions src/components/Dashboard/DashboardVerticalOffset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }} />;
};
Expand Down
12 changes: 8 additions & 4 deletions src/components/FilterBar/FilterBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -14,7 +17,6 @@ import FilterBadge from './FilterBadge';
const styles = {
bar: {
position: 'sticky',
top: 130,
zIndex: 7,
padding: '8px 0',
display: 'flex',
Expand All @@ -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}
Expand Down Expand Up @@ -87,6 +90,7 @@ const filtersSelector = createSelector(

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

export default connect(
Expand All @@ -96,4 +100,4 @@ export default connect(
removeItemFilter: acRemoveItemFilter,
removeEditItemFilter: acRemoveEditItemFilter,
}
)(FilterBar);
)(withStyles(styles)(FilterBar));