[Glitch] Make columns-area unscrollable when modal opened

Port 2091ae92be to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
neetshin 2018-01-15 05:51:00 +00:00 committed by Claire
parent a79bd2cd11
commit 6996b96fab
3 changed files with 8 additions and 2 deletions

View File

@ -58,6 +58,7 @@ const TabsBarPortal = () => {
export default class ColumnsArea extends ImmutablePureComponent { export default class ColumnsArea extends ImmutablePureComponent {
static propTypes = { static propTypes = {
columns: ImmutablePropTypes.list.isRequired, columns: ImmutablePropTypes.list.isRequired,
isModalOpen: PropTypes.bool.isRequired,
singleColumn: PropTypes.bool, singleColumn: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
openSettings: PropTypes.func, openSettings: PropTypes.func,
@ -145,7 +146,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
}; };
render () { render () {
const { columns, children, singleColumn, openSettings } = this.props; const { columns, children, singleColumn, isModalOpen, openSettings } = this.props;
const { renderComposePanel } = this.state; const { renderComposePanel } = this.state;
if (singleColumn) { if (singleColumn) {
@ -172,7 +173,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();
const other = params && params.other ? params.other : {}; const other = params && params.other ? params.other : {};

View File

@ -6,6 +6,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,
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({

View File

@ -2626,6 +2626,10 @@ a.account__display-name {
overflow-x: auto; overflow-x: auto;
position: relative; position: relative;
&.unscrollable {
overflow-x: hidden;
}
&__panels { &__panels {
display: flex; display: flex;
justify-content: center; justify-content: center;