Arvados Workbench 2

From: Pawel Kowalczyk Date: Mon, 4 Jun 2018 10:26:38 +0000 (+0200) Subject: Added icons to tree X-Git-Tag: 1.2.0~80^2~3^2~9 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/c92ee19217ebd5cce3c17f757b45bcfa1d5bc702 Added icons to tree Feature #13535 Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk : --- diff --git a/public/index.html b/public/index.html index f6111b91..a8d655e5 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,7 @@ --> + Arvados Workbench 2 + +

extends React.Component, {}> { const level = this.props.level ? this.props.level : 0; return {this.props.items && this.props.items.map((it: TreeItem, idx: number) => -

- this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 30}}> +

+ this.props.toggleItem(it.id)} style={{paddingLeft: (level + 1) * 20}}> + {this.props.render(it.data)} {it.items && it.items.length > 0 && diff --git a/src/index.tsx b/src/index.tsx index ae16dce3..d99c3d1a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -33,10 +33,11 @@ const sampleProjects = [ function buildProjectTree(tree: any[], level = 0): Array> { 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 ? : , createdAt: '2018-05-05', }, items: t.length > 1 ? buildProjectTree(t[1], level + 1) : [] @@ -59,12 +60,12 @@ const App = () =>
- +
; ReactDOM.render( - , + , document.getElementById('root') as HTMLElement ); diff --git a/src/models/project.ts b/src/models/project.ts index 2534ddcc..d730bcdf 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 7265380a..b11a1360 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 = (theme: Theme) => ({ root: { @@ -48,6 +49,9 @@ const styles: StyleRulesCallback = (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, WorkbenchState> { render() { - const {classes} = this.props; + const {classes, projects} = this.props; return (
@@ -77,9 +81,12 @@ class Workbench extends React.Component, W paper: classes.drawerPaper, }}>
- } + render={(p: Project) => +
{p.icon}
+
+ } />
diff --git a/yarn.lock b/yarn.lock index 6d5ec0d5..eb212ba3 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@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@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"