[ARVADOS-WORKBENCH2] updated: 73da4aae95f9186c71533e3c26cecce23f52fc02
Git user
git at public.curoverse.com
Wed Jun 6 09:22:39 EDT 2018
Summary of changes:
src/components/tree/tree.tsx | 11 ++++++++---
src/index.tsx | 3 ++-
src/store/project-reducer.ts | 12 ++++++++++++
src/views/workbench/workbench.tsx | 15 +++++++++------
4 files changed, 31 insertions(+), 10 deletions(-)
via 73da4aae95f9186c71533e3c26cecce23f52fc02 (commit)
via 1e99be6bc2fba403c15bdbcea5b3b4165225ca3e (commit)
from abf519da836b635eac4cf1f728615472169ba032 (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 73da4aae95f9186c71533e3c26cecce23f52fc02
Merge: 1e99be6 abf519d
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Wed Jun 6 15:18:59 2018 +0200
Merge conflicts
Feature #13535
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
commit 1e99be6bc2fba403c15bdbcea5b3b4165225ca3e
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Wed Jun 6 15:18:04 2018 +0200
Added color for active leaf of tree
Feature #13535
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index bb6c93e..0be5499 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -12,16 +12,21 @@ export interface TreeItem<T> {
data: T;
id: string;
open: boolean;
+ active: boolean;
items?: Array<TreeItem<T>>;
}
interface TreeProps<T> {
items?: Array<TreeItem<T>>;
- render: (item: T) => ReactElement<{}>;
+ render: (item: TreeItem<T>) => ReactElement<{}>;
toggleItem: (id: string) => any;
level?: number;
}
+function colorArrows(open: boolean, color: string){
+ return <i style={{marginRight: '10px', minWidth: '10px', color}} className={open ? "fas fa-caret-down" : "fas fa-caret-right"} />
+}
+
class Tree<T> extends React.Component<TreeProps<T>, {}> {
render(): ReactElement<any> {
const level = this.props.level ? this.props.level : 0;
@@ -29,8 +34,8 @@ class Tree<T> extends React.Component<TreeProps<T>, {}> {
{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) * 15, paddingBottom: '3px', paddingTop: '3px'}}>
- <i style={{marginRight: "10px"}} className={it.open ? "fas fa-caret-down" : "fas fa-caret-right"} />
- {this.props.render(it.data)}
+ {it.active ? colorArrows(it.open, "#4285F6") : colorArrows(it.open, "#333")}
+ {this.props.render(it)}
</ListItem>
{it.items && it.items.length > 0 &&
<Collapse in={it.open} timeout="auto" unmountOnExit>
diff --git a/src/index.tsx b/src/index.tsx
index d99c3d1..9cc33fe 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -35,9 +35,10 @@ function buildProjectTree(tree: any[], level = 0): Array<TreeItem<Project>> {
const projects = tree.map((t, idx) => ({
id: `l${level}i${idx}${t[0]}`,
open: false,
+ active: false,
data: {
name: t[0],
- icon: level === 0 ? <i className="icon-th"/> : <i className="fas fa-folder"/>,
+ icon: level === 0 ? <i className="fas fa-th"/> : <i className="fas fa-folder"/>,
createdAt: '2018-05-05',
},
items: t.length > 1 ? buildProjectTree(t[1], level + 1) : []
diff --git a/src/store/project-reducer.ts b/src/store/project-reducer.ts
index f1056f3..42442ba 100644
--- a/src/store/project-reducer.ts
+++ b/src/store/project-reducer.ts
@@ -23,6 +23,16 @@ function findTreeItem<T>(tree: Array<TreeItem<T>>, itemId: string): TreeItem<T>
return item;
}
+function resetTreeActivity<T>(tree: Array<TreeItem<T>>): boolean | undefined {
+ let item;
+ for (const leaf of tree) {
+ item = leaf.active === true
+ ? leaf.active = false
+ : resetTreeActivity(leaf.items ? leaf.items : []);
+ }
+ return item;
+}
+
const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
switch (action.type) {
case getType(actions.createProject): {
@@ -31,9 +41,11 @@ const projectsReducer = (state: ProjectState = [], action: ProjectAction) => {
case getType(actions.toggleProjectTreeItem): {
const tree = _.cloneDeep(state);
const itemId = action.payload;
+ resetTreeActivity(tree);
const item = findTreeItem(tree, itemId);
if (item) {
item.open = !item.open;
+ item.active = true;
}
return tree;
}
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 8d9e35e..5643602 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -23,7 +23,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
const drawerWidth = 240;
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'active' | 'drawerPaper' | 'content' | 'row' | 'treeContainer' | 'toolbar';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@ -39,6 +39,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
zIndex: theme.zIndex.drawer + 1,
backgroundColor: '#692498'
},
+ active: {
+ color: '#4285F6',
+ },
drawerPaper: {
position: 'relative',
width: drawerWidth,
@@ -51,14 +54,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
},
row: {
display: 'flex',
- alignItems: 'center'
+ alignItems: 'center',
},
treeContainer: {
position: 'absolute',
overflowX: 'visible',
marginTop: '80px',
minWidth: drawerWidth,
- whiteSpace: 'nowrap'
+ whiteSpace: 'nowrap',
},
toolbar: theme.mixins.toolbar
});
@@ -92,9 +95,9 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
<div className={classes.treeContainer}>
<Tree items={projects}
toggleItem={this.props.toggleProjectTreeItem}
- render={(p: Project) => <span className={classes.row}>
- <div><ListItemIcon>{p.icon}</ListItemIcon></div>
- <div><ListItemText primary={p.name}/></div>
+ 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>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list