Update layout to match new latest mockups

Feature #13601

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 2c2c56e9998986cfc0078bce0ccb61811b071032..9aeb28a7a5d5f50115774c7a21c8588bc23df3ab 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { DataTable, DataTableProps, DataColumn, ColumnSelector } from "../../components/data-table";
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
+import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText, Paper, Toolbar } from '@material-ui/core';
 import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import Popover from '../popover/popover';
@@ -55,16 +55,26 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
                 name: "Actions",
                 selected: true,
                 configurable: false,
-                renderHeader: () => this.renderActionsHeader(),
+                renderHeader: () => null,
                 render: renderItemActions
             }
         ]
     };
 
     render() {
-        return <DataTable
-            columns={this.state.columns}
-            items={this.props.items} />;
+        return <Paper>
+            <Toolbar>
+                <Grid container justify="flex-end">
+                    <ColumnSelector
+                        columns={this.state.columns}
+                        onColumnToggle={this.toggleColumn} />
+                </Grid>
+            </Toolbar>
+            <DataTable
+                columns={this.state.columns}
+                items={this.props.items} />
+            <Toolbar />
+        </Paper>;
     }
 
     toggleColumn = (column: DataColumn<DataItem>) => {
@@ -74,13 +84,6 @@ class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState>
         this.setState({ columns });
     }
 
-    renderActionsHeader = () =>
-        <Grid container justify="flex-end">
-            <ColumnSelector
-                columns={this.state.columns}
-                onColumnToggle={this.toggleColumn} />
-        </Grid>
-
     renderName = (item: DataItem) =>
         <Grid
             container

diff --git a/src/components/data-table/data-column.ts b/src/components/data-table/data-column.ts
index f991f62730d14d16b42c8bf81ffaac5c055c21dd..d3b147362651256d2c1cf546643ef2788de2c7f0 100644 (file)
--- a/src/components/data-table/data-column.ts
+++ b/src/components/data-table/data-column.ts
@@ -8,7 +8,7 @@ export interface DataColumn<T> {
     configurable?: boolean;
     key?: React.Key;
     render: (item: T) => React.ReactElement<void>;
-    renderHeader?: () => React.ReactElement<void>;
+    renderHeader?: () => React.ReactElement<void> | null;
 }
 
 export const isColumnConfigurable = <T>(column: DataColumn<T>) => {

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 0367dfa9c7f65609cfb26180d6d31de8534a8c37..e7ce03ada3d4cdd24bec91e9b643c12f9a299382 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -46,12 +46,17 @@ class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRul
                                 </TableRow>
                             )}
                     </TableBody>
-                </Table> : <Typography>No items</Typography>}
+                </Table> : <Typography 
+                    className={classes.noItemsInfo}
+                    variant="body2"
+                    gutterBottom>
+                    No items
+                </Typography>}
         </div>;
     }
 }
 
-type CssRules = "tableBody" | "tableContainer";
+type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {
@@ -59,6 +64,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
     tableBody: {
         background: theme.palette.background.paper
+    },
+    noItemsInfo: {
+        textAlign: "center",
+        padding: theme.spacing.unit
     }
 });
 

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 20e3648e0561151c8d63fd57ef04858206f5d914..90df260b974d983842f67aa2d5ab90a7b8fd63c8 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -171,6 +171,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                             toggleProjectTreeItem={this.toggleProjectTreeItem} />
                     </Drawer>}
                 <main className={classes.content}>
+                    <div className={classes.toolbar} />
                     <div className={classes.toolbar} />
                     <Switch>
                         <Route path="/project/:name" component={DataExplorer} />