Make columns-area unscrollable when modal opened (#6241)

* Add aria-autocomplete='list' in Textaria

ref: https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete

* Make detect empty string brefore assign upload description

* Change code elements in keyboard-shortcuts component to kbd

* Add validation for onMuteNotifications

* Make columns-area unscrollable when modal opend

* Make columns-area unscrollable when modal opened
pull/6203/merge
neetshin 2018-01-15 05:51:00 +00:00 committed by Eugen Rochko
parent dcc614f869
commit 2091ae92be
3 changed files with 8 additions and 2 deletions

View File

@ -37,6 +37,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
columns: ImmutablePropTypes.list.isRequired, columns: ImmutablePropTypes.list.isRequired,
isModalOpen: PropTypes.bool.isRequired,
singleColumn: PropTypes.bool, singleColumn: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
}; };
@ -144,7 +145,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
} }
render () { render () {
const { columns, children, singleColumn } = this.props; const { columns, children, singleColumn, isModalOpen } = this.props;
const { shouldAnimate } = this.state; const { shouldAnimate } = this.state;
const columnIndex = getIndex(this.context.router.history.location.pathname); const columnIndex = getIndex(this.context.router.history.location.pathname);
@ -159,7 +160,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
} }
return ( return (
<div className='columns-area' ref={this.setRef}> <div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
{columns.map(column => { {columns.map(column => {
const params = column.get('params', null) === null ? null : column.get('params').toJS(); const params = column.get('params', null) === null ? null : column.get('params').toJS();

View File

@ -3,6 +3,7 @@ import ColumnsArea from '../components/columns_area';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
columns: state.getIn(['settings', 'columns']), columns: state.getIn(['settings', 'columns']),
isModalOpen: !!state.get('modal').modalType,
}); });
export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea); export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea);

View File

@ -1613,6 +1613,10 @@
justify-content: flex-start; justify-content: flex-start;
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
&.unscrollable {
overflow-x: hidden;
}
} }
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {