Skip to content

Commit 96f60ba

Browse files
author
rodriguez-facundo
committed
#136 Add left drawer
1 parent 3fe62df commit 96f60ba

7 files changed

Lines changed: 168 additions & 82 deletions

File tree

‎webapp/Theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default createMuiTheme({
2525
palette: {
2626
type: 'dark',
2727
primary: { main: primaryColor, },
28-
secondary: { main: bgLight, }
28+
secondary: { main: bgLight, },
2929
},
3030
overrides: {
3131
MuiInputLabel: { formControl: { top: '-6px' } },

‎webapp/components/NetPyNE.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
NetPyNEToolBar,
66
NetPyNETabs,
77
LayoutManager,
8+
Drawer
89
} from "netpyne/components";
910

1011
import { withStyles } from '@material-ui/core/styles'
@@ -32,7 +33,7 @@ const styles = ({ zIndex, palette, spacing }) => ({
3233
marginRight: spacing(-1)
3334
},
3435
drawer: { marginLeft: spacing(-1) },
35-
content: { position: "relative", zIndex: zIndex.appBar }
36+
content: { position: "relative", zIndex: zIndex.drawer + 1 }
3637
})
3738

3839

@@ -66,7 +67,10 @@ class NetPyNE extends React.Component {
6667
</div>
6768
</Toolbar>
6869
</div>
69-
<LayoutManager/>
70+
<div style={{ flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }}>
71+
<Drawer/>
72+
<LayoutManager/>
73+
</div>
7074
</div>
7175
);
7276
}

‎webapp/components/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,18 @@ export const NetPyNEPythonConsole = connect(
234234
})
235235
)(_NetPyNEPythonConsole)
236236

237+
import _Drawer from './settings/Drawer'
238+
export const Drawer = connect(
239+
state => ({
240+
widgets: state.flexlayout.widgets,
241+
editMode: state.general.editMode
242+
}),
243+
dispatch => ({
244+
newWidget: widget => dispatch(newWidget(widget)),
245+
activateWidget: widgetId => dispatch(activateWidget(widgetId))
246+
})
247+
)(_Drawer)
248+
237249
// ---------------------------------------------------------------------------------------- //
238250

239251
// DEFAULTS

‎webapp/components/layout/layoutConf.json‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,7 @@
1212
"children": [
1313
{
1414
"type": "row",
15-
"weight": 10,
16-
"children": [
17-
{
18-
"type": "tabset",
19-
"weight": 100,
20-
"id": "leftPanel",
21-
"enableDeleteWhenEmpty": false,
22-
"children": []
23-
}
24-
]
25-
},
26-
{
27-
"type": "row",
28-
"weight": 90,
15+
"weight": 100,
2916
"children": [
3017
{
3118
"type": "row",
@@ -59,15 +46,6 @@
5946
]
6047
}
6148
]
62-
},
63-
"borders": [
64-
{
65-
"type": "border",
66-
"location": "bottom",
67-
"size": 100,
68-
"children": [],
69-
"barSize": 10
70-
}
71-
]
49+
}
7250
}
7351

‎webapp/components/layout/simulateLayoutConf.json‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,7 @@
1212
"children": [
1313
{
1414
"type": "row",
15-
"weight": 10,
16-
"children": [
17-
{
18-
"type": "tabset",
19-
"weight": 100,
20-
"id": "leftPanel",
21-
"enableDeleteWhenEmpty": false,
22-
"children": []
23-
}
24-
]
25-
},
26-
{
27-
"type": "row",
28-
"weight": 40,
15+
"weight": 50,
2916
"children": [
3017
{
3118
"type": "tabset",
@@ -72,15 +59,6 @@
7259
]
7360
}
7461
]
75-
},
76-
"borders": [
77-
{
78-
"type": "border",
79-
"location": "bottom",
80-
"size": 100,
81-
"children": [],
82-
"barSize": 10
83-
}
84-
]
62+
}
8563
}
8664

‎webapp/components/settings/Drawer.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React, { useState } from 'react'
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Drawer from '@material-ui/core/Drawer';
4+
5+
import IconButton from '@material-ui/core/IconButton'
6+
import Toolbar from '@material-ui/core/Toolbar';
7+
import List from '@material-ui/core/List';
8+
9+
import ListItem from '@material-ui/core/ListItem';
10+
import ListItemIcon from '@material-ui/core/ListItemIcon';
11+
import ListItemText from '@material-ui/core/ListItemText';
12+
13+
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
14+
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
15+
import Typography from '@material-ui/core/Typography';
16+
17+
import AdjustIcon from '@material-ui/icons/Adjust';
18+
import {
19+
HLS_WIDGETS, PYTHON_CONSOLE_WIDGET,
20+
FLEXLAYOUT_DEFAULT_STATE, MORPHOLOGY_WIDGET
21+
} from '../../redux/reducers/flexlayout'
22+
23+
24+
const drawerOpenWidth = 200;
25+
const drawerCloseWidth = 54;
26+
27+
const createTransition = (entering, transitions) => (
28+
transitions.create('width', {
29+
easing: transitions.easing.sharp,
30+
duration: entering ? transitions.duration.enteringScreen : transitions.duration.leavingScreen,
31+
})
32+
)
33+
34+
const drawerCss = (entering, transitions, palette) => ({
35+
overflow: 'hidden',
36+
width: props => props.width,
37+
flexShrink: 0,
38+
backgroundColor: props => props.dark ? palette.grey[900] : palette.grey[800],
39+
borderRight: 'none',
40+
transition: transitions.create('width', {
41+
easing: transitions.easing.sharp,
42+
duration: entering ? transitions.duration.enteringScreen : transitions.duration.leavingScreen,
43+
})
44+
})
45+
46+
const useStyles = makeStyles(({ transitions, palette }) => ({
47+
openDrawer: drawerCss(true, transitions, palette),
48+
49+
closeDrawer: drawerCss(false, transitions, palette),
50+
51+
colapse: {
52+
color: 'white',
53+
position: 'absolute',
54+
bottom: 0,
55+
right: 2
56+
},
57+
paper: { backgroundColor: palette.grey['900'] },
58+
59+
selected: { height: 60, color: palette.primary.main },
60+
unselected: { height: 60, color: palette.common.white },
61+
noColor: { color: 'inherit' }
62+
}))
63+
64+
export default ({ widgets, newWidget, editMode }) => {
65+
const [expand, setExpand] = useState({ dark: !editMode })
66+
67+
const classes = useStyles({ dark: !editMode, width: expand ? drawerOpenWidth : drawerCloseWidth });
68+
69+
function createWidget (widgetId) {
70+
if (!widgets[widgetId]) {
71+
let widget = HLS_WIDGETS[widgetId]
72+
if (!editMode) {
73+
widget = MORPHOLOGY_WIDGET
74+
}
75+
76+
newWidget({ path: widget.id, ...widget })
77+
}
78+
}
79+
80+
function getMenu () {
81+
if (editMode) {
82+
return Object.values({ ...HLS_WIDGETS, python: PYTHON_CONSOLE_WIDGET })
83+
} else {
84+
return Object.values({ ...FLEXLAYOUT_DEFAULT_STATE.widgetsBackground, python: PYTHON_CONSOLE_WIDGET })
85+
}
86+
87+
}
88+
89+
return (
90+
<div>
91+
<Drawer
92+
variant="permanent"
93+
className={expand ? classes.openDrawer : classes.closeDrawer}
94+
classes={{ paper: expand ? classes.openDrawer : classes.closeDrawer }}
95+
>
96+
<div>
97+
<Toolbar/>
98+
<List>
99+
{getMenu().map(({ name, id }) => (
100+
<ListItem
101+
button
102+
key={name}
103+
className={widgets[id] ? classes.selected : classes.unselected}
104+
onClick={() => createWidget(id)}
105+
>
106+
<ListItemIcon className={classes.noColor}>
107+
<AdjustIcon/>
108+
</ListItemIcon>
109+
<ListItemText>
110+
<Typography noWrap>{name}</Typography>
111+
</ListItemText>
112+
</ListItem>
113+
))}
114+
</List>
115+
116+
117+
<IconButton
118+
className={classes.colapse}
119+
onClick={() => setExpand(!expand)}
120+
>
121+
{expand ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
122+
</IconButton>
123+
124+
125+
</div>
126+
127+
</Drawer>
128+
</div>
129+
)
130+
131+
}

0 commit comments

Comments
 (0)