diff --git a/webapp/src/components/filterComponent.scss b/webapp/src/components/filterComponent.scss index 100da01d8..75be9c623 100644 --- a/webapp/src/components/filterComponent.scss +++ b/webapp/src/components/filterComponent.scss @@ -1,35 +1,4 @@ .FilterComponent { - position: absolute; - top: 25px; - left: -200px; - z-index: 10; - - min-width: 430px; - box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px; - background-color: rgb(var(--main-bg)); - padding: 10px; - - @media screen and (max-width: 430px) { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - min-width: 0; - } - - .hideOnWidescreen { - /* Hide controls (e.g. close button) on larger screens */ - @media not screen and (max-width: 430px) { - display: none !important; - } - } - > .toolbar { - display: flex; - flex-direction: row; - height: 30px; - margin-bottom: 10px; - } .octo-filterclause { display: flex; flex-direction: row; diff --git a/webapp/src/components/filterComponent.tsx b/webapp/src/components/filterComponent.tsx index d24be97c4..7d0491290 100644 --- a/webapp/src/components/filterComponent.tsx +++ b/webapp/src/components/filterComponent.tsx @@ -10,11 +10,11 @@ import mutator from '../mutator' import {Utils} from '../utils' import {BoardTree} from '../viewModel/boardTree' import Button from '../widgets/buttons/button' -import IconButton from '../widgets/buttons/iconButton' -import CloseIcon from '../widgets/icons/close' import Menu from '../widgets/menu' import MenuWrapper from '../widgets/menuWrapper' + import './filterComponent.scss' +import Modal from './modal' type Props = { boardTree: BoardTree @@ -23,33 +23,10 @@ type Props = { } class FilterComponent extends React.Component { - private node: React.RefObject - public shouldComponentUpdate(): boolean { return true } - public constructor(props: Props) { - super(props) - this.node = React.createRef() - } - - public componentDidMount(): void { - document.addEventListener('click', this.closeOnBlur, true) - } - - public componentWillUnmount(): void { - document.removeEventListener('click', this.closeOnBlur, true) - } - - private closeOnBlur = (e: Event) => { - if (this.node && this.node.current && e.target && this.node.current.contains(e.target as Node)) { - return - } - - this.props.onClose() - } - private conditionClicked = (optionId: string, filter: FilterClause): void => { const {boardTree} = this.props const {activeView: view} = boardTree @@ -75,97 +52,92 @@ class FilterComponent extends React.Component { const filters: FilterClause[] = activeView.filter?.filters.filter((o) => !FilterGroup.isAnInstanceOf(o)) as FilterClause[] || [] return ( -
-
- } - title={'Close dialog'} - /> -
- - {filters.map((filter) => { - const template = board.cardProperties.find((o) => o.id === filter.propertyId) - const propertyName = template ? template.name : '(unknown)' // TODO: Handle error - const key = `${filter.propertyId}-${filter.condition}-${filter.values.join(',')}` - return ( -
- - - - {board.cardProperties.filter((o) => o.type === 'select').map((o) => ( +
+ {filters.map((filter) => { + const template = board.cardProperties.find((o) => o.id === filter.propertyId) + const propertyName = template ? template.name : '(unknown)' // TODO: Handle error + const key = `${filter.propertyId}-${filter.condition}-${filter.values.join(',')}` + return ( +
+ + + + {board.cardProperties.filter((o) => o.type === 'select').map((o) => ( + { + const filterIndex = activeView.filter.filters.indexOf(filter) + Utils.assert(filterIndex >= 0, "Can't find filter") + const filterGroup = new FilterGroup(activeView.filter) + const newFilter = filterGroup.filters[filterIndex] as FilterClause + Utils.assert(newFilter, `No filter at index ${filterIndex}`) + if (newFilter.propertyId !== optionId) { + newFilter.propertyId = optionId + newFilter.values = [] + mutator.changeViewFilter(activeView, filterGroup) + } + }} + />))} + + + + + { - const filterIndex = activeView.filter.filters.indexOf(filter) - Utils.assert(filterIndex >= 0, "Can't find filter") - const filterGroup = new FilterGroup(activeView.filter) - const newFilter = filterGroup.filters[filterIndex] as FilterClause - Utils.assert(newFilter, `No filter at index ${filterIndex}`) - if (newFilter.propertyId !== optionId) { - newFilter.propertyId = optionId - newFilter.values = [] - mutator.changeViewFilter(activeView, filterGroup) - } - }} - />))} - - - - - - this.conditionClicked(id, filter)} + id='includes' + name={intl.formatMessage({id: 'Filter.includes', defaultMessage: 'includes'})} + onClick={(id) => this.conditionClicked(id, filter)} + /> + this.conditionClicked(id, filter)} + /> + this.conditionClicked(id, filter)} + /> + this.conditionClicked(id, filter)} + /> + + + { + template && this.filterValue(filter, template) + } +
+
- - { - template && this.filterValue(filter, template) - } -
- -
) - })} + +
) + })} -
+
- -
+ + + ) } @@ -219,10 +191,6 @@ class FilterComponent extends React.Component { return undefined } - private closeClicked = () => { - this.props.onClose() - } - private deleteClicked(filter: FilterClause) { const {boardTree} = this.props const {activeView: view} = boardTree diff --git a/webapp/src/components/viewHeader.scss b/webapp/src/components/viewHeader.scss index 9a56ff7ac..68ed2bb50 100644 --- a/webapp/src/components/viewHeader.scss +++ b/webapp/src/components/viewHeader.scss @@ -28,9 +28,4 @@ .octo-spacer { flex: 1; } - - .filter-container { - position: relative; - overflow: unset; - } } diff --git a/webapp/src/components/viewHeader.tsx b/webapp/src/components/viewHeader.tsx index 9aa0d1fea..2fcf5f6f9 100644 --- a/webapp/src/components/viewHeader.tsx +++ b/webapp/src/components/viewHeader.tsx @@ -171,7 +171,7 @@ class ViewHeader extends React.Component { {/* Filter */} -
+
+ {/* Sort */}