Mobile support for filter dialog

webapp/src/components/dialog.scss

@@ -48,13 +48,6 @@
             flex-direction: row;
             height: 30px;
             margin: 10px;
-
-            > .IconButton:first-child {
-                /* Hide close button on larger screens */
-                @media not screen and (max-width: 975px) {
-                    display: none;
-                }
-            }
         }
         > .content {
             display: flex;
@@ -71,5 +64,12 @@
         > .content.fullwidth {
             padding: 10px 0 10px 0;
         }
+
+        .hideOnWidescreen {
+            /* Hide controls (e.g. close button) on larger screens */
+            @media not screen and (max-width: 975px) {
+                display: none;
+            }
+        }
     }
 }

webapp/src/components/dialog.tsx

@@ -53,6 +53,7 @@ export default class Dialog extends React.PureComponent<Props> {
                             onClick={this.closeClicked}
                             icon={<CloseIcon/>}
                             title={'Close dialog'}
+                            className='hideOnWidescreen'
                         />
                         <div className='octo-spacer'/>
                         <MenuWrapper>

webapp/src/components/filterComponent.scss

@@ -9,6 +9,27 @@
 	background-color: rgb(var(--main-bg));
 	padding: 10px;
 
+    @media screen and (max-width: 420px) {
+        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: 420px) {
+            display: none !important;
+        }
+    }
+    > .toolbar {
+        display: flex;
+        flex-direction: row;
+        height: 30px;
+        margin-bottom: 10px;
+    }
     .octo-filterclause {
         display: flex;
         flex-direction: row;

webapp/src/components/filterComponent.tsx

@@ -1,20 +1,19 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import React from 'react'
-import {FormattedMessage, IntlShape, injectIntl} from 'react-intl'
+import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
 import {IPropertyTemplate} from '../blocks/board'
-
-import {BoardTree} from '../viewModel/boardTree'
 import {FilterClause, FilterCondition} from '../filterClause'
 import {FilterGroup} from '../filterGroup'
 import mutator from '../mutator'
 import {Utils} from '../utils'
-
-import MenuWrapper from '../widgets/menuWrapper'
-import Menu from '../widgets/menu'
+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'
 
 type Props = {
@@ -80,11 +79,18 @@ class FilterComponent extends React.Component<Props> {
                 className='FilterComponent'
                 ref={this.node}
             >
+                <div className='toolbar hideOnWidescreen'>
+                    <IconButton
+                        onClick={this.closeClicked}
+                        icon={<CloseIcon/>}
+                        title={'Close dialog'}
+                    />
+                </div>
+
                 {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(',')}`
-                    Utils.log(`FilterClause key: ${key}`)
                     return (
                         <div
                             className='octo-filterclause'
@@ -213,6 +219,10 @@ class FilterComponent extends React.Component<Props> {
         return undefined
     }
 
+    private closeClicked = () => {
+        this.props.onClose()
+    }
+
     private deleteClicked(filter: FilterClause) {
         const {boardTree} = this.props
         const {activeView: view} = boardTree

webapp/src/components/viewHeader.tsx

@@ -65,11 +65,11 @@ class ViewHeader extends React.Component<Props, State> {
         }
     }
 
-    private filterClicked = () => {
+    private showFilterDialog = () => {
         this.setState({showFilter: true})
     }
 
-    private hideFilter = () => {
+    private hideFilterDialog = () => {
         this.setState({showFilter: false})
     }
 
@@ -235,18 +235,18 @@ class ViewHeader extends React.Component<Props, State> {
                 <div className='filter-container'>
                     <Button
                         active={hasFilter}
-                        onClick={this.filterClicked}
+                        onClick={this.showFilterDialog}
                     >
                         <FormattedMessage
                             id='ViewHeader.filter'
                             defaultMessage='Filter'
                         />
-                        {this.state.showFilter &&
-                            <FilterComponent
-                                boardTree={boardTree}
-                                onClose={this.hideFilter}
-                            />}
                     </Button>
+                    {this.state.showFilter &&
+                    <FilterComponent
+                        boardTree={boardTree}
+                        onClose={this.hideFilterDialog}
+                    />}
                 </div>
                 <MenuWrapper>
                     <Button active={hasSort}>

webapp/src/widgets/buttons/button.tsx

@@ -13,8 +13,8 @@ type Props = {
     active?: boolean
 }
 
-export default class Button extends React.Component<Props> {
-    render() {
+export default class Button extends React.PureComponent<Props> {
+    render(): JSX.Element {
         return (
             <div
                 onClick={this.props.onClick}

webapp/src/widgets/buttons/iconButton.tsx

@@ -8,14 +8,19 @@ type Props = {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
     title?: string
     icon?: React.ReactNode
+    className?: string
 }
 
 export default class IconButton extends React.PureComponent<Props> {
     render(): JSX.Element {
+        let className = 'Button IconButton'
+        if (this.props.className) {
+            className += ' ' + this.props.className
+        }
         return (
             <div
                 onClick={this.props.onClick}
-                className='Button IconButton'
+                className={className}
                 title={this.props.title}
             >
                 {this.props.icon}