Create main app bar prototype

Feature #13590

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

diff --git a/src/components/main-app-bar/main-app-bar.tsx b/src/components/main-app-bar/main-app-bar.tsx
new file mode 100644 (file)
index 0000000..885948f
--- /dev/null
+++ b/src/components/main-app-bar/main-app-bar.tsx
@@ -0,0 +1,63 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Paper, Input, StyleRulesCallback, withStyles, WithStyles } from "@material-ui/core";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import PersonIcon from "@material-ui/icons/Person";
+import HelpIcon from "@material-ui/icons/Help";
+import SearchIcon from "@material-ui/icons/Search";
+import { AppBarProps } from "@material-ui/core/AppBar";
+import SearchBar from "./search-bar/search-bar";
+import Breadcrumbs from "./breadcrumbs/breadcrumbs"
+
+type CssRules = "appBar"
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+    appBar: {
+        backgroundColor: "#692498"
+    }
+})
+
+export class MainAppBar extends React.Component<WithStyles<CssRules>> {
+    render() {
+        const { classes } = this.props
+        return <AppBar className={classes.appBar} position="static">
+            <Toolbar>
+                <Grid
+                    container
+                    justify="space-between"
+                >
+                    <Grid item xs={3}>
+                        <Typography variant="title" color="inherit" noWrap style={{ flexGrow: 1 }}>
+                            <span>Arvados</span><br /><span style={{ fontSize: 12 }}>Workbench 2</span>
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={6} container alignItems="center">
+                        <SearchBar value="" onChange={console.log} onSubmit={() => console.log("submit")} />
+                    </Grid>
+                    <Grid item xs={3} container alignItems="center" justify="flex-end">
+                        <IconButton color="inherit">
+                            <Badge badgeContent={3} color="primary">
+                                <NotificationsIcon />
+                            </Badge>
+                        </IconButton>
+                        <IconButton color="inherit">
+                            <PersonIcon />
+                        </IconButton>
+                        <IconButton color="inherit">
+                            <HelpIcon />
+                        </IconButton>
+                    </Grid>
+                </Grid>
+            </Toolbar>
+            <Toolbar>
+                <Breadcrumbs items={["Projects", "Project 1"]} />
+            </Toolbar>
+        </AppBar>
+    }
+
+}
+
+export default withStyles(styles)(MainAppBar)
\ No newline at end of file

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 8c3145b823e1950a58aa2bca49129ab23c0e8023..dbf7832272d3e31dc9bafa61007e4a1e053fff41 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -24,6 +24,7 @@ import { AccountCircle } from "@material-ui/icons";
 import { User } from "../../models/user";
 import Grid from "@material-ui/core/Grid/Grid";
 import { RootState } from "../../store/store";
+import MainAppBar from '../../components/main-app-bar/main-app-bar';
 
 const drawerWidth = 240;
 
@@ -154,12 +155,15 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                         paper: classes.drawerPaper,
                     }}>
                     <div className={classes.toolbar}/>
+                    <div className={classes.toolbar}/>
                     <Tree items={this.props.projects} render={(p: Project) =>
                         <Link to={`/project/${p.name}`}>{p.name}</Link>
                     }/>
                 </Drawer>}
                 <main className={classes.content}>
                     <div className={classes.toolbar}/>
+                    <div className={classes.toolbar}/>
+                    <MainAppBar/>
                     <Switch>
                         <Route path="/project/:name" component={ProjectList}/>
                     </Switch>