[ARVADOS-WORKBENCH2] updated: c92ee19217ebd5cce3c17f757b45bcfa1d5bc702
Git user
git at public.curoverse.com
Mon Jun 4 11:26:02 EDT 2018
Summary of changes:
public/index.html | 3 +++
src/components/tree/tree.tsx | 5 +++--
src/index.tsx | 7 ++++---
src/models/project.ts | 1 +
src/views/workbench/workbench.tsx | 15 +++++++++++----
yarn.lock | 4 ++--
6 files changed, 24 insertions(+), 11 deletions(-)
via c92ee19217ebd5cce3c17f757b45bcfa1d5bc702 (commit)
from cf035c0589f045849ba635a82b6857fdd6f618ed (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 c92ee19217ebd5cce3c17f757b45bcfa1d5bc702
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Mon Jun 4 12:26:38 2018 +0200
Added icons to tree
Feature #13535
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>:
diff --git a/public/index.html b/public/index.html
index f6111b9..a8d655e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+ <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
@@ -20,6 +21,8 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Arvados Workbench 2</title>
+ <script>FontAwesomeConfig = { autoReplaceSvg: 'nest' }</script>
+ <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
</head>
<body>
<noscript>
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index e8ba710..93e90c7 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -27,8 +27,9 @@ class Tree<T> extends React.Component<TreeProps<T>, {}> {
const level = this.props.level ? this.props.level : 0;
return <List component="div">
{this.props.items && this.props.items.map((it: TreeItem<T>, idx: number) =>
- <div key={`item/${level}/${idx}`}>
- <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 30}}>
+ <div key={`item/${level}/${idx}`}>
+ <ListItem button onClick={() => this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 20}}>
+ <i style={{marginRight: "10px"}} className={it.open ? "fas fa-caret-down" : "fas fa-caret-right"} />
{this.props.render(it.data)}
</ListItem>
{it.items && it.items.length > 0 &&
diff --git a/src/index.tsx b/src/index.tsx
index ae16dce..d99c3d1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -33,10 +33,11 @@ const sampleProjects = [
function buildProjectTree(tree: any[], level = 0): Array<TreeItem<Project>> {
const projects = tree.map((t, idx) => ({
- id: `l${level}i${idx}`,
+ id: `l${level}i${idx}${t[0]}`,
open: false,
data: {
name: t[0],
+ icon: level === 0 ? <i className="icon-th"/> : <i className="fas fa-folder"/>,
createdAt: '2018-05-05',
},
items: t.length > 1 ? buildProjectTree(t[1], level + 1) : []
@@ -59,12 +60,12 @@ const App = () =>
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
- <Route path="/" component={Workbench}/>
+ <Route path="/" component={Workbench} />
</div>
</ConnectedRouter>
</Provider>;
ReactDOM.render(
- <App/>,
+ <App />,
document.getElementById('root') as HTMLElement
);
diff --git a/src/models/project.ts b/src/models/project.ts
index 2534ddc..d730bcd 100644
--- a/src/models/project.ts
+++ b/src/models/project.ts
@@ -5,4 +5,5 @@
export interface Project {
name: string;
createdAt: string;
+ icon?: any;
}
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 7265380..b11a136 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -19,10 +19,11 @@ 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';
const drawerWidth = 240;
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'row' | 'toolbar';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@ -48,6 +49,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
padding: theme.spacing.unit * 3,
minWidth: 0,
},
+ row: {
+ display: 'flex'
+ },
toolbar: theme.mixins.toolbar
});
@@ -61,7 +65,7 @@ interface WorkbenchState {
class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, WorkbenchState> {
render() {
- const {classes} = this.props;
+ const {classes, projects} = this.props;
return (
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
@@ -77,9 +81,12 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
paper: classes.drawerPaper,
}}>
<div className={classes.toolbar}/>
- <Tree items={this.props.projects}
+ <Tree items={projects}
toggleItem={this.props.toggleProjectTreeItem}
- render={(p: Project) => <ListItemText primary={p.name}/>}
+ render={(p: Project) => <span className={classes.row}>
+ <div style={{marginTop: "3px"}}><ListItemIcon>{p.icon}</ListItemIcon></div>
+ <div><ListItemText primary={p.name}/></div>
+ </span>}
/>
</Drawer>
<main className={classes.content}>
diff --git a/yarn.lock b/yarn.lock
index 6d5ec0d..eb212ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -70,7 +70,7 @@
csstype "^2.0.0"
indefinite-observable "^1.0.1"
-"@types/lodash@^4.14.109":
+"@types/lodash at 4.14.109":
version "4.14.109"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.109.tgz#b1c4442239730bf35cabaf493c772b18c045886d"
@@ -4490,7 +4490,7 @@ lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash at 4.17.10, "lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
version "4.17.10"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list