[ARVADOS-WORKBENCH2] created: a9deea73c1982bf90150c6dbc8caca385ad68d04
Git user
git at public.curoverse.com
Fri Jun 8 08:58:16 EDT 2018
at a9deea73c1982bf90150c6dbc8caca385ad68d04 (commit)
commit a9deea73c1982bf90150c6dbc8caca385ad68d04
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Jun 8 14:57:58 2018 +0200
Create main app bar prototype
Feature #13590
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at 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
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 8c3145b..dbf7832 100644
--- 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>
commit f87e91a3d8cfbcd1bebf116701423c2c54bc5e19
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Jun 8 14:50:27 2018 +0200
Update SearchBar layout to stretch horizontally to wrapping container
Feature #13590
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/main-app-bar/search-bar/search-bar.tsx b/src/components/main-app-bar/search-bar/search-bar.tsx
index 95b2860..c07ddca 100644
--- a/src/components/main-app-bar/search-bar/search-bar.tsx
+++ b/src/components/main-app-bar/search-bar/search-bar.tsx
@@ -56,13 +56,16 @@ const styles: StyleRulesCallback<CssRules> = theme => {
const { unit } = theme.spacing
return {
container: {
- position: 'relative'
+ position: 'relative',
+ width: '100%'
},
input: {
border: 'none',
+ borderRadius: unit / 4,
+ boxSizing: 'border-box',
padding: unit,
paddingRight: unit * 4,
- borderRadius: unit / 4
+ width: '100%',
},
button: {
position: 'absolute',
commit 06b26e9f05f048c3ea593a96d2659b6eecf847ea
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Jun 8 14:48:34 2018 +0200
Create breadcrumbs component
Feature #13590
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx b/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 0000000..9803683
--- /dev/null
+++ b/src/components/main-app-bar/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,58 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { withStyles } from '@material-ui/core';
+
+interface BreadcrumbsDataProps {
+ items: string[]
+}
+
+type BreadcrumbsProps = BreadcrumbsDataProps & WithStyles<CssRules>;
+
+class Breadcrumbs extends React.Component<BreadcrumbsProps> {
+
+ render() {
+ const { classes } = this.props;
+ return <Grid container alignItems="center">
+ {
+ this.getInactiveItems().map((item, index) => (
+ <React.Fragment key={index}>
+ <Button color="inherit" className={classes.inactiveItem}>{item}</Button>
+ <ChevronRightIcon color="inherit" className={classes.inactiveItem} />
+ </React.Fragment>
+ ))
+ }
+ {
+ this.getActiveItem().map((item, index) => (
+ <Button key={index} color="inherit">{item}</Button>
+ ))
+ }
+ </Grid>
+ }
+
+ getInactiveItems = () => {
+ return this.props.items.slice(0, -1)
+ }
+
+ getActiveItem = () => {
+ return this.props.items.slice(-1)
+ }
+}
+
+type CssRules = 'inactiveItem'
+
+const styles: StyleRulesCallback<CssRules> = theme => {
+ const { unit } = theme.spacing
+ return {
+ inactiveItem: {
+ opacity: 0.6
+ }
+ }
+}
+
+export default withStyles(styles)(Breadcrumbs)
+
commit a097022b5fcc344eedc8b8ad31e77c6590ff999e
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Jun 8 13:37:14 2018 +0200
Create search bar component
Feature #13590
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/main-app-bar/search-bar/search-bar.tsx b/src/components/main-app-bar/search-bar/search-bar.tsx
new file mode 100644
index 0000000..95b2860
--- /dev/null
+++ b/src/components/main-app-bar/search-bar/search-bar.tsx
@@ -0,0 +1,77 @@
+// 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';
+
+interface SearchBarDataProps {
+ value: string;
+}
+
+interface SearchBarActionProps {
+ onChange: (value: string) => any;
+ onSubmit: () => any;
+}
+
+type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>
+
+class SearchBar extends React.Component<SearchBarProps> {
+ render() {
+ const { classes } = this.props
+ return <Paper className={classes.container}>
+ <form onSubmit={this.handleSubmit}>
+ <input
+ className={classes.input}
+ onChange={this.handleChange}
+ placeholder="Search"
+ value={this.props.value}
+ />
+ <IconButton className={classes.button}>
+ <SearchIcon />
+ </IconButton>
+ </form>
+ </Paper>
+ }
+
+ handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ this.props.onSubmit();
+ }
+
+ handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.onChange(event.target.value);
+ }
+
+}
+
+type CssRules = 'container' | 'input' | 'button'
+
+const styles: StyleRulesCallback<CssRules> = theme => {
+ const { unit } = theme.spacing
+ return {
+ container: {
+ position: 'relative'
+ },
+ input: {
+ border: 'none',
+ padding: unit,
+ paddingRight: unit * 4,
+ borderRadius: unit / 4
+ },
+ button: {
+ position: 'absolute',
+ top: unit / 2,
+ right: unit / 2,
+ width: unit * 3,
+ height: unit * 3
+ }
+ }
+}
+
+export default withStyles(styles)(SearchBar)
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list