SSDM-12024 : Table Widget : Global filter with AND/OR options (as in the old...

SSDM-12024 : Table Widget : Global filter with AND/OR options (as in the old grid) - use inline-block mask only for tables

openbis_ng_ui/src/js/components/common/grid/Grid.jsx

@@ -27,6 +27,9 @@ const styles = theme => ({
   loadingContainer: {
     flex: '1 1 auto'
   },
+  loading: {
+    display: 'inline-block'
+  },
   header: {
     paddingBottom: 0
   },
@@ -142,7 +145,7 @@ class Grid extends React.PureComponent {
           )}
         </div>
         <div className={classes.loadingContainer}>
-          <Loading loading={loading}>
+          <Loading loading={loading} styles={{ root: classes.loading }}>
             <div
               className={classes.tableContainer}
               onClick={this.handleClickTable}

openbis_ng_ui/src/js/components/common/loading/Loading.jsx

@@ -10,10 +10,10 @@ class Loading extends React.Component {
   render() {
     logger.log(logger.DEBUG, 'Loading.render')
 
-    const { loading, children } = this.props
+    const { loading, styles, children } = this.props
 
     return (
-      <Mask visible={loading} icon={<CircularProgress />}>
+      <Mask visible={loading} styles={styles} icon={<CircularProgress />}>
         {children}
       </Mask>
     )

openbis_ng_ui/src/js/components/common/loading/Mask.jsx

 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import util from '@src/js/common/util.js'
 import logger from '@src/js/common/logger.js'
 
 const styles = theme => ({
   container: {
-    display: 'inline-block',
+    display: 'block',
     minWidth: '100%',
     height: '100%',
     position: 'relative'
@@ -30,10 +31,10 @@ class Mask extends React.Component {
   render() {
     logger.log(logger.DEBUG, 'Mask.render')
 
-    const { visible, icon, children, classes } = this.props
+    const { visible, icon, children, styles = {}, classes } = this.props
 
     return (
-      <div className={classes.container}>
+      <div className={util.classNames(classes.container, styles.root)}>
         {visible && (
           <React.Fragment>
             <div className={classes.mask}></div>