projects / arvados-workbench2.git / commitdiff
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cf035c0)
Added icons to tree
authorPawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Mon, 4 Jun 2018 10:26:38 +0000 (12:26 +0200)
committerPawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Mon, 4 Jun 2018 15:23:12 +0000 (17:23 +0200)
Feature #13535

 Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>:

public/index.html patch | blob | history
src/components/tree/tree.tsx patch | blob | history
src/index.tsx patch | blob | history
src/models/project.ts patch | blob | history
src/views/workbench/workbench.tsx patch | blob | history
yarn.lock patch | blob | history

diff --git a/public/index.html b/public/index.html
index f6111b91895db5aad0429e757fb378ec2ba66c3a..a8d655e5872080571e26bf3f5a830046b3ffcffe 100644 (file)
--- 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 e8ba710398ba653743ac65f29a2fce5a38ac75ab..93e90c7772ef924f98b534ca5d1ac1f8e7c976d6 100644 (file)
--- 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 ae16dce3501120a5b12940e6790481f4088ba6d2..d99c3d1a310a6885370fcac69b75f01f8d11603f 100644 (file)
--- 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 2534ddcca69ec2c67f2a165a732631d5c1d92a60..d730bcdfd8c02ce676f368044dbf876367593a9c 100644 (file)
--- 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 7265380a2a665aef0b315326d8c235b0145733ec..b11a1360c4665318871e289af6739f85517cb56c 100644 (file)
--- 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 6d5ec0d58124f1a0103ea44abf0a35a8c9188ddd..eb212ba32f02bcfe86f641e2bf0811bd8d863fa2 100644 (file)
--- 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"