[ARVADOS-WORKBENCH2] updated: b29bd8eeb72369e20317329f63406a2faf3a165d
Git user
git at public.curoverse.com
Fri Jun 8 08:21:43 EDT 2018
Summary of changes:
src/components/project-tree/project-tree.tsx | 56 ++++++++++++++++++++++++++++
src/components/tree/tree.tsx | 2 -
src/views/workbench/workbench.tsx | 54 ++++++---------------------
3 files changed, 67 insertions(+), 45 deletions(-)
create mode 100644 src/components/project-tree/project-tree.tsx
via b29bd8eeb72369e20317329f63406a2faf3a165d (commit)
via 7ee704ab48987ee6223528c5b7526ef246709a4c (commit)
from 6f513b1b01da5299775cd64e5963a2693e0c71d7 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit b29bd8eeb72369e20317329f63406a2faf3a165d
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Fri Jun 8 14:21:30 2018 +0200
export workbenchprops interface
Feature #13535
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/project-tree/project-tree.tsx b/src/components/project-tree/project-tree.tsx
index a6ef2a9..39c4711 100644
--- a/src/components/project-tree/project-tree.tsx
+++ b/src/components/project-tree/project-tree.tsx
@@ -32,7 +32,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
}
});
-interface WorkbenchProps {
+export interface WorkbenchProps {
projects: Array<TreeItem<Project>>;
toggleProjectTreeItem: (id: string) => any;
}
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 25868c3..6f39ac7 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -16,9 +16,7 @@ import { Route, Switch } from "react-router";
import { Link } from "react-router-dom";
import { actions as projectActions } from "../../store/project-action";
-import ProjectTree from '../../components/project-tree/project-tree';
-import { TreeItem } from '../../components/tree/tree';
-import { Project } from '../../models/project';
+import ProjectTree, { WorkbenchProps } from '../../components/project-tree/project-tree';
const drawerWidth = 240;
@@ -51,11 +49,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
toolbar: theme.mixins.toolbar
});
-interface WorkbenchProps {
- projects: Array<TreeItem<Project>>;
- toggleProjectTreeItem: (id: string) => any;
-}
-
class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
render() {
const { classes } = this.props;
commit 7ee704ab48987ee6223528c5b7526ef246709a4c
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Fri Jun 8 14:17:53 2018 +0200
project-tree component
Feature #13535
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/project-tree/project-tree.tsx b/src/components/project-tree/project-tree.tsx
new file mode 100644
index 0000000..a6ef2a9
--- /dev/null
+++ b/src/components/project-tree/project-tree.tsx
@@ -0,0 +1,56 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
+import ListItemText from "@material-ui/core/ListItemText/ListItemText";
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Typography from '@material-ui/core/Typography';
+
+import Tree, { TreeItem } from '../tree/tree';
+import { Project } from '../../models/project';
+
+type CssRules = 'active' | 'row' | 'treeContainer';
+
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+ active: {
+ color: '#4285F6',
+ },
+ row: {
+ display: 'flex',
+ alignItems: 'center',
+ marginLeft: '20px',
+ },
+ treeContainer: {
+ position: 'absolute',
+ overflowX: 'visible',
+ marginTop: '80px',
+ minWidth: '240px',
+ whiteSpace: 'nowrap',
+ }
+});
+
+interface WorkbenchProps {
+ projects: Array<TreeItem<Project>>;
+ toggleProjectTreeItem: (id: string) => any;
+}
+
+class ProjectTree<T> extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
+ render(): ReactElement<any> {
+ const {classes, projects} = this.props;
+ return (
+ <div className={classes.treeContainer}>
+ <Tree items={projects}
+ toggleItem={this.props.toggleProjectTreeItem}
+ render={(project: TreeItem<Project>) => <span className={classes.row}>
+ <div><ListItemIcon className={project.active ? classes.active : ''}>{project.data.icon}</ListItemIcon></div>
+ <div><ListItemText primary={<Typography className={project.active ? classes.active : ''}>{project.data.name}</Typography>} /></div>
+ </span>} />
+ </div>
+ );
+ }
+}
+
+export default withStyles(styles)(ProjectTree)
\ No newline at end of file
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index c76d29f..214ac7d 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -43,8 +43,6 @@ interface TreeProps<T> {
level?: number;
}
-
-
class Tree<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
renderArrow (items: Array<TreeItem<T>> | undefined, arrowClass: string, isOpen: boolean, arrowRotation: string){
return items && items.length > 0 ? <i className={`${arrowClass} ${isOpen ? "fas fa-caret-down" : `fas fa-caret-down ${arrowRotation}`}`} /> : ''
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 58f2fcf..25868c3 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -10,20 +10,19 @@ import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { connect } from "react-redux";
-import Tree, { TreeItem } from "../../components/tree/tree";
-import { Project } from "../../models/project";
import { RootState } from "../../store/root-reducer";
import ProjectList from "../../components/project-list/project-list";
import { Route, Switch } from "react-router";
import { Link } from "react-router-dom";
import { actions as projectActions } from "../../store/project-action";
-import ListItemText from "@material-ui/core/ListItemText/ListItemText";
-import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ProjectTree from '../../components/project-tree/project-tree';
+import { TreeItem } from '../../components/tree/tree';
+import { Project } from '../../models/project';
const drawerWidth = 240;
-type CssRules = 'root' | 'appBar' | 'active' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@ -39,9 +38,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
zIndex: theme.zIndex.drawer + 1,
backgroundColor: '#692498'
},
- active: {
- color: '#4285F6',
- },
drawerPaper: {
position: 'relative',
width: drawerWidth,
@@ -52,18 +48,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
padding: theme.spacing.unit * 3,
minWidth: 0,
},
- row: {
- display: 'flex',
- alignItems: 'center',
- marginLeft: '20px',
- },
- treeContainer: {
- position: 'absolute',
- overflowX: 'visible',
- marginTop: '80px',
- minWidth: drawerWidth,
- whiteSpace: 'nowrap',
- },
toolbar: theme.mixins.toolbar
});
@@ -72,18 +56,15 @@ interface WorkbenchProps {
toggleProjectTreeItem: (id: string) => any;
}
-interface WorkbenchState {
-}
-
-class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, WorkbenchState> {
+class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>> {
render() {
- const {classes, projects} = this.props;
+ const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Toolbar>
<Typography variant="title" color="inherit" noWrap>
- Arvados<br/>Workbench 2
+ Arvados<br />Workbench 2
</Typography>
</Toolbar>
</AppBar>
@@ -92,24 +73,18 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
classes={{
paper: classes.drawerPaper,
}}>
- <div className={classes.toolbar}/>
- <div className={classes.treeContainer}>
- <Tree items={projects}
- toggleItem={this.props.toggleProjectTreeItem}
- render={(project: TreeItem<Project>) => <span className={classes.row}>
- <div><ListItemIcon className={project.active ? classes.active : ''}>{project.data.icon}</ListItemIcon></div>
- <div><ListItemText primary={<Typography className={project.active ? classes.active : ''}>{project.data.name}</Typography>} /></div>
- </span>}
- />
- </div>
+ <div className={classes.toolbar} />
+ <ProjectTree
+ projects={this.props.projects}
+ toggleProjectTreeItem={this.props.toggleProjectTreeItem} />
</Drawer>
<main className={classes.content}>
- <div className={classes.toolbar}/>
+ <div className={classes.toolbar} />
<Switch>
<Route exact path="/">
<Typography noWrap>Hello new workbench!</Typography>
</Route>
- <Route path="/project/:name" component={ProjectList}/>
+ <Route path="/project/:name" component={ProjectList} />
</Switch>
</main>
</div>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list