SSDM-7594 : NEW openBIS UI - General Template/Infrastructure for Tables -...

SSDM-7594 : NEW openBIS UI - General Template/Infrastructure for Tables - Visualisation/Creation/Edit - improve styling

openbis_ng_ui/src/components/common/table/ColumnConfig.jsx

 import _ from 'lodash'
 import React from 'react'
 import {withStyles} from '@material-ui/core/styles'
+import IconButton from '@material-ui/core/IconButton'
+import SettingsIcon from '@material-ui/icons/Settings'
 import Popover from '@material-ui/core/Popover'
-import Button from '@material-ui/core/Button'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Checkbox from '@material-ui/core/Checkbox'
 import logger from '../../../common/logger.js'
 
 const styles = () => ({
   container: {
-    flexGrow: 1
+    display: 'flex',
+    alignItems: 'center'
+  },
+  columns: {
+    listStyle: 'none',
+    padding: '10px 20px',
+    margin: 0
   }
 })
 
@@ -58,12 +65,11 @@ class ColumnConfig extends React.Component {
 
     return (
       <div className={classes.container}>
-        <Button
-          variant="contained"
-          onClick={this.handleOpen}
-        >
-        Columns
-        </Button>
+        <IconButton>
+          <SettingsIcon
+            onClick={this.handleOpen}
+          />
+        </IconButton>
         <Popover
           open={Boolean(el)}
           anchorEl={el}
@@ -77,18 +83,22 @@ class ColumnConfig extends React.Component {
             horizontal: 'center',
           }}
         >
-          {allColumns.map(column => (
-            <FormControlLabel key={column}
-              control={
-                <Checkbox
-                  value={column}
-                  checked={visibleColumns.includes(column)}
-                  onChange={this.handleChange}
+          <ol className={classes.columns}>
+            {allColumns.map(column => (
+              <li key={column}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      value={column}
+                      checked={visibleColumns.includes(column)}
+                      onChange={this.handleChange}
+                    />
+                  }
+                  label={column}
                 />
-              }
-              label={column}
-            />
-          ))}
+              </li>
+            ))}
+          </ol>
         </Popover>
       </div>
     )

openbis_ng_ui/src/components/common/table/PageConfig.jsx

 import _ from 'lodash'
 import React from 'react'
 import {withStyles} from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
 import TextField from '@material-ui/core/TextField'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
 import IconButton from '@material-ui/core/IconButton'
 import FirstPageIcon from '@material-ui/icons/FirstPage'
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
@@ -15,12 +17,11 @@ const styles = () => ({
     alignItems: 'center',
     flexShrink: 0
   },
-  pageSize: {
-    display: 'flex',
-    alignItems: 'center',
-    '& label': {
-      marginRight: '12px'
-    }
+  pageSizeLabelPlacement: {
+    marginRight: 0
+  },
+  pageSizeLabel: {
+    marginRight: '12px'
   },
   pageRange: {
     marginLeft: '24px'
@@ -70,22 +71,33 @@ class PageConfig extends React.Component {
     return (
       <div className={classes.container}>
         <div className={classes.pageSize}>
-          <label>Rows per page:</label>
-          <TextField
-            select
-            SelectProps={{
-              native: true
+          <FormControlLabel
+            control={
+              <TextField
+                select
+                SelectProps={{
+                  native: true
+                }}
+                value={pageSize}
+                onChange={this.handlePageSizeChange}
+              >
+                {[5, 10, 20, 50, 100].map(pageSize => (
+                  <option key={pageSize} value={pageSize}>{pageSize}</option>
+                ))}
+              </TextField>
+            }
+            classes={{
+              label: classes.pageSizeLabel,
+              labelPlacementStart: classes.pageSizeLabelPlacement
             }}
-            value={pageSize}
-            onChange={this.handlePageSizeChange}
-          >
-            {[5, 10, 20, 50, 100].map(pageSize => (
-              <option key={pageSize} value={pageSize}>{pageSize}</option>
-            ))}
-          </TextField>
+            label="Rows per page: "
+            labelPlacement="start"
+          />
         </div>
         <div className={classes.pageRange}>
-          {page * pageSize + 1}-{Math.min(count, (page + 1) * pageSize)} of {count}
+          <Typography>
+            {page * pageSize + 1}-{Math.min(count, (page + 1) * pageSize)} of {count}
+          </Typography>
         </div>
         <div className={classes.pageButtons}>
           <IconButton

openbis_ng_ui/src/components/types/search/Search.jsx

@@ -7,7 +7,6 @@ import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
-import TableFooter from '@material-ui/core/TableFooter'
 import TableRow from '@material-ui/core/TableRow'
 import TableSortLabel from '@material-ui/core/TableSortLabel'
 import FilterField from '../../common/form/FilterField.jsx'
@@ -25,11 +24,16 @@ const styles = (theme) => ({
     flexDirection: 'column',
     height: '100%'
   },
-  filterContainer: {
+  headerContainer: {
     flexGrow: 0,
     padding: theme.spacing.unit * 2,
     paddingBottom: 0
   },
+  footerContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
   tableContainer: {
     flexGrow: 1,
     overflow: 'auto',
@@ -53,18 +57,6 @@ const styles = (theme) => ({
       border: 0
     }
   },
-  tableFooter: {
-    '& td': {
-      position: 'sticky',
-      bottom: 0,
-      zIndex: 10,
-      backgroundColor: theme.palette.background.paper
-    }
-  },
-  tableFooterContent: {
-    display: 'flex',
-    alignItems: 'center'
-  },
   tableLink: {
     fontSize: 'inherit'
   }
@@ -262,7 +254,7 @@ class Search extends React.Component {
 
     return (
       <div className={classes.container}>
-        <div className={classes.filterContainer}>
+        <div className={classes.headerContainer}>
           <FilterField
             filter={filter}
             filterChange={this.handleFilterChange}
@@ -323,28 +315,22 @@ class Search extends React.Component {
                 <TableCell></TableCell>
               </TableRow>
             </TableBody>
-            <TableFooter classes={{ root: classes.tableFooter }}>
-              <TableRow>
-                <TableCell colSpan={Math.max(1, visibleColumns.length)}>
-                  <div className={classes.tableFooterContent}>
-                    <ColumnConfig
-                      allColumns={allColumns}
-                      visibleColumns={visibleColumns}
-                      onColumnsChange={this.handleColumnsChange}
-                    />
-                    <PageConfig
-                      count={allTypes.length}
-                      page={page}
-                      pageSize={pageSize}
-                      onPageChange={this.handlePageChange}
-                      onPageSizeChange={this.handlePageSizeChange}
-                    />
-                  </div>
-                </TableCell>
-              </TableRow>
-            </TableFooter>
           </Table>
         </div>
+        <div className={classes.footerContainer}>
+          <PageConfig
+            count={allTypes.length}
+            page={page}
+            pageSize={pageSize}
+            onPageChange={this.handlePageChange}
+            onPageSizeChange={this.handlePageSizeChange}
+          />
+          <ColumnConfig
+            allColumns={allColumns}
+            visibleColumns={visibleColumns}
+            onColumnsChange={this.handleColumnsChange}
+          />
+        </div>
       </div>
     )
   }