Support closing toolbar by clicking on the overlay

master
Torjus 2018-08-09 09:22:37 +02:00
parent 87e389a956
commit 5f3635e5f8
1 changed files with 8 additions and 4 deletions

View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import * as toolTabActions from '../../redux/stateActions'; import * as stateActions from '../../redux/stateActions';
import ParticipantList from '../ParticipantList/ParticipantList'; import ParticipantList from '../ParticipantList/ParticipantList';
import Chat from '../Chat/Chat'; import Chat from '../Chat/Chat';
import Settings from '../Settings'; import Settings from '../Settings';
@ -22,7 +22,8 @@ class ToolArea extends React.Component
currentToolTab, currentToolTab,
toolAreaOpen, toolAreaOpen,
unreadMessages, unreadMessages,
unreadFiles unreadFiles,
toggleToolArea
} = this.props; } = this.props;
const VisibleTab = { const VisibleTab = {
@ -38,6 +39,7 @@ class ToolArea extends React.Component
className={classNames('toolarea-shade', { className={classNames('toolarea-shade', {
open : toolAreaOpen open : toolAreaOpen
})} })}
onClick={toggleToolArea}
/> />
<div <div
@ -86,7 +88,8 @@ ToolArea.propTypes =
setToolTab : PropTypes.func.isRequired, setToolTab : PropTypes.func.isRequired,
unreadMessages : PropTypes.number.isRequired, unreadMessages : PropTypes.number.isRequired,
unreadFiles : PropTypes.number.isRequired, unreadFiles : PropTypes.number.isRequired,
toolAreaOpen : PropTypes.bool toolAreaOpen : PropTypes.bool,
toggleToolArea : PropTypes.func.isRequired
}; };
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
@ -97,7 +100,8 @@ const mapStateToProps = (state) => ({
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
setToolTab : toolTabActions.setToolTab setToolTab : stateActions.setToolTab,
toggleToolArea : stateActions.toggleToolArea
}; };
const ToolAreaContainer = connect( const ToolAreaContainer = connect(