[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:
parent
a79bd2cd11
commit
6996b96fab
|
@ -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 : {};
|
||||||
|
|
|
@ -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 => ({
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue