Skip to content

Commit a55776a

Browse files
author
rodriguez-facundo
committed
#147 Styling
1 parent b4950d7 commit a55776a

26 files changed

Lines changed: 350 additions & 305 deletions

‎webapp/components/definition/cellRules/NetPyNECellRule.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import MenuItem from '@material-ui/core/MenuItem';
33
import TextField from '@material-ui/core/TextField';
44

55
import Button from '@material-ui/core/Button';
6-
6+
import Box from '@material-ui/core/Box'
77
import Dialog from '@material-ui/core/Dialog/Dialog';
88

99
import DialogActions from '@material-ui/core/DialogActions';
@@ -102,16 +102,14 @@ class NetPyNECellRule extends React.Component {
102102
value={this.state.currentName}
103103
disabled={this.renaming}
104104
label="The name of the cell type"
105-
className={"netpyneField"}
106105
id={"cellRuleName"}
107-
style={{ marginTop: 8 }}
108106
/>
109107

110108

111109
<ExpansionPanel className={classes.expandable} elevation={0}>
112-
<div>
110+
<Box mb={1}>
113111
<b>Conditions (optional):</b>
114-
</div>
112+
</Box>
115113

116114
<NetPyNEField id={"netParams.cellParams.conds.cellModel"} >
117115
<NetPyNESelectField

‎webapp/components/definition/cellRules/sections/NetPyNESection.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,32 +94,31 @@ export default class NetPyNESection extends React.Component {
9494
content = (
9595
<div>
9696
<TextField
97+
fullWidth
9798
variant="filled"
98-
id={"cellParamsSectionName"}
9999
onChange={this.handleRenameChange}
100100
value = {this.state.currentName}
101101
label="The name of the section"
102-
className={"netpyneField"}
103102
/>
104103
</div>
105104
)
106105
} else if (this.state.sectionId == "Geometry") {
107106

108107
content = (<div>
109108
<NetPyNEField id="netParams.cellParams.secs.geom.diam" >
110-
<NetPyNETextField variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['diam']"} />
109+
<NetPyNETextField fullWidth variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['diam']"} />
111110
</NetPyNEField>
112111

113112
<NetPyNEField id="netParams.cellParams.secs.geom.L" >
114-
<NetPyNETextField variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['L']"} />
113+
<NetPyNETextField fullWidth variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['L']"} />
115114
</NetPyNEField>
116115

117116
<NetPyNEField id="netParams.cellParams.secs.geom.Ra" >
118-
<NetPyNETextField variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['Ra']"} />
117+
<NetPyNETextField fullWidth variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['Ra']"} />
119118
</NetPyNEField>
120119

121120
<NetPyNEField id="netParams.cellParams.secs.geom.cm" >
122-
<NetPyNETextField variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['cm']"} />
121+
<NetPyNETextField fullWidth variant="filled" model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['geom']['cm']"} />
123122
</NetPyNEField>
124123

125124
<NetPyNEField id="netParams.cellParams.secs.geom.pt3d" className="listStyle">
@@ -137,18 +136,18 @@ export default class NetPyNESection extends React.Component {
137136
postProcessItems={this.postProcessMenuItems}
138137
/>
139138
</NetPyNEField>
140-
<br />
141139

142140
<NetPyNEField id="netParams.cellParams.secs.topol.parentX" >
143141
<NetPyNETextField
144-
variant="filled"
142+
fullWidth
143+
variant="filled"
145144
model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['topol']['parentX']"}
146145
/>
147146
</NetPyNEField>
148-
<br />
149147

150148
<NetPyNEField id="netParams.cellParams.secs.topol.childX" >
151149
<NetPyNETextField
150+
fullWidth
152151
variant="filled"
153152
model={"netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.name + "']['topol']['childX']"}
154153
/>
@@ -169,7 +168,6 @@ export default class NetPyNESection extends React.Component {
169168
<BottomNavigation component={Paper} showLabels style={{ borderRadius: '4px' }} value={this.state.selectedIndex} showLabels>
170169
{bottomNavigationItems}
171170
</BottomNavigation>
172-
<br />
173171
{content}
174172
</div>
175173
);

‎webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanism.js‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
import React from 'react';
22
import TextField from '@material-ui/core/TextField';
33
import Utils from '../../../../../Utils';
4-
import { withStyles } from '@material-ui/core/styles';
5-
import { NetPyNETextField, } from 'netpyne/components';
4+
import Box from '@material-ui/core/Box'
5+
import { NetPyNETextField } from 'netpyne/components';
66

7-
const styles = ({ spacing }) => ({
8-
fields: {
9-
marginTop: spacing(3),
10-
width: '100%'
11-
}
12-
})
13-
class NetPyNEMechanism extends React.Component {
7+
export default class NetPyNEMechanism extends React.Component {
148

159
constructor (props) {
1610
super(props);
@@ -24,19 +18,32 @@ class NetPyNEMechanism extends React.Component {
2418
this.setState({ currentName: nextProps.name });
2519
}
2620

27-
renderMechFields = classes => {
21+
renderMechFields = () => {
2822
if (this.state.mechFields == '') {
2923
return <div key={"empty"}/>
30-
} else {
31-
var tag = "netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.section + "']['mechs']['" + this.state.currentName + "']"
32-
return this.state.mechFields.map((name, i) =>
33-
<NetPyNETextField variant="filled" variant="filled" id={"mechName" + name} name={name} key={name} model={tag + "['" + name + "']"} label={name} realType={"float"} className={classes.fields}/>
34-
)
35-
}
24+
}
25+
26+
const { currentName } = this.state
27+
const { cellRule, section, } = this.props
28+
let tag = `netParams.cellParams['${cellRule}']['secs']['${section}']['mechs']['${currentName}']`
29+
30+
return this.state.mechFields.map((name, i) => (
31+
<Box mb={1} key={name}>
32+
<NetPyNETextField
33+
fullWidth
34+
variant="filled"
35+
name={name}
36+
model={`${tag}['${name}']`}
37+
label={name}
38+
realType={"float"}
39+
/>
40+
</Box>
41+
42+
))
43+
3644
};
3745

3846
render () {
39-
const { classes } = this.props
4047
var content = []
4148
if (this.state.currentName != undefined && this.state.currentName != '') {
4249
Utils
@@ -46,25 +53,23 @@ class NetPyNEMechanism extends React.Component {
4653
this.setState({ mechFields: response })
4754
}
4855
})
49-
content.push(this.renderMechFields(classes))
56+
content.push(this.renderMechFields())
5057
}
5158

5259
return (
5360
<div>
54-
<TextField
55-
variant="filled"
56-
id={"singleMechName"}
57-
key="netpyneField"
58-
value={this.state.currentName}
59-
label="Mechanism"
60-
className={"netpyneField"}
61-
disabled={true}
62-
style={{ marginTop: 8 }}
63-
/>
64-
<br />
61+
<Box mb={1}>
62+
<TextField
63+
variant="filled"
64+
fullWidth
65+
value={this.state.currentName}
66+
label="The name of the mechanism"
67+
disabled={true}
68+
/>
69+
</Box>
70+
6571
{content}
6672
</div>
6773
);
6874
}
6975
}
70-
export default withStyles(styles)(NetPyNEMechanism)

‎webapp/components/definition/configuration/NetPyNESimConfig.js‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ class NetPyNESimConfig extends React.Component {
3737
contentLeft = (
3838
<div>
3939
<NetPyNEField id="simConfig.duration" >
40-
<NetPyNETextField variant="filled" model={"simConfig.duration"} />
40+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.duration"} />
4141
</NetPyNEField>
4242

4343
<NetPyNEField id="simConfig.dt" >
44-
<NetPyNETextField variant="filled" model={"simConfig.dt"} />
44+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.dt"} />
4545
</NetPyNEField>
4646

4747
<NetPyNEField id="simConfig.printRunTime" >
48-
<NetPyNETextField variant="filled" model={"simConfig.printRunTime"} />
48+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.printRunTime"} />
4949
</NetPyNEField>
5050

5151
<NetPyNEField id="simConfig.hParams" className="listStyle">
@@ -125,26 +125,26 @@ class NetPyNESimConfig extends React.Component {
125125
contentLeft = (
126126
<div>
127127
<NetPyNEField id="simConfig.simLabel" >
128-
<NetPyNETextField variant="filled" model={"simConfig.simLabel"} />
128+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.simLabel"} />
129129
</NetPyNEField>
130130

131131
{
132132
!window.isDocker
133133
&& <NetPyNEField id="simConfig.saveFolder" >
134-
<NetPyNETextField variant="filled" model={"simConfig.saveFolder"} />
134+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.saveFolder"} />
135135
</NetPyNEField>
136136
}
137137

138138
<NetPyNEField id="simConfig.filename" >
139-
<NetPyNETextField variant="filled" model={"simConfig.filename"} />
139+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.filename"} />
140140
</NetPyNEField>
141141

142142
<NetPyNEField id="simConfig.saveDataInclude" className="listStyle">
143143
<ListComponent model={"simConfig.saveDataInclude"} />
144144
</NetPyNEField>
145145

146146
<NetPyNEField id="simConfig.backupCfgFile" >
147-
<NetPyNETextField variant="filled" model={"simConfig.backupCfgFile"} />
147+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.backupCfgFile"} />
148148
</NetPyNEField>
149149

150150
</div>
@@ -212,7 +212,7 @@ class NetPyNESimConfig extends React.Component {
212212
</NetPyNEField>
213213

214214
<NetPyNEField id="simConfig.recordStep" >
215-
<NetPyNETextField variant="filled" model={"simConfig.recordStep"} />
215+
<NetPyNETextField fullWidth variant="filled" model={"simConfig.recordStep"} />
216216
</NetPyNEField>
217217

218218
</div>
@@ -232,23 +232,23 @@ class NetPyNESimConfig extends React.Component {
232232
var contentLeft = (
233233
<div >
234234
<NetPyNEField id="netParams.scale" >
235-
<NetPyNETextField variant="filled" model={"netParams.scale"} />
235+
<NetPyNETextField fullWidth variant="filled" model={"netParams.scale"} />
236236
</NetPyNEField>
237237

238238
<NetPyNEField id="netParams.defaultWeight" >
239-
<NetPyNETextField variant="filled" model={"netParams.defaultWeight"} />
239+
<NetPyNETextField fullWidth variant="filled" model={"netParams.defaultWeight"} />
240240
</NetPyNEField>
241241

242242
<NetPyNEField id="netParams.defaultDelay" >
243-
<NetPyNETextField variant="filled" model={"netParams.defaultDelay"} />
243+
<NetPyNETextField fullWidth variant="filled" model={"netParams.defaultDelay"} />
244244
</NetPyNEField>
245245

246246
<NetPyNEField id="netParams.scaleConnWeight" >
247-
<NetPyNETextField variant="filled" model={"netParams.scaleConnWeight"} />
247+
<NetPyNETextField fullWidth variant="filled" model={"netParams.scaleConnWeight"} />
248248
</NetPyNEField>
249249

250250
<NetPyNEField id="netParams.scaleConnWeightNetStims" >
251-
<NetPyNETextField variant="filled" model={"netParams.scaleConnWeightNetStims"} />
251+
<NetPyNETextField fullWidth variant="filled" model={"netParams.scaleConnWeightNetStims"} />
252252
</NetPyNEField>
253253

254254
<NetPyNEField id="netParams.scaleConnWeightModels" className={"listStyle"}>
@@ -260,27 +260,27 @@ class NetPyNESimConfig extends React.Component {
260260
contentRight = (
261261
<div >
262262
<NetPyNEField id="netParams.sizeX" >
263-
<NetPyNETextField variant="filled" model={"netParams.sizeX"} />
263+
<NetPyNETextField fullWidth variant="filled" model={"netParams.sizeX"} />
264264
</NetPyNEField>
265265

266266
<NetPyNEField id="netParams.sizeY" >
267-
<NetPyNETextField variant="filled" model={"netParams.sizeY"} />
267+
<NetPyNETextField fullWidth variant="filled" model={"netParams.sizeY"} />
268268
</NetPyNEField>
269269

270270
<NetPyNEField id="netParams.sizeZ" >
271-
<NetPyNETextField variant="filled" model={"netParams.sizeZ"} />
271+
<NetPyNETextField fullWidth variant="filled" model={"netParams.sizeZ"} />
272272
</NetPyNEField>
273273

274274
<NetPyNEField id="netParams.propVelocity" >
275-
<NetPyNETextField variant="filled" model={"netParams.propVelocity"} />
275+
<NetPyNETextField fullWidth variant="filled" model={"netParams.propVelocity"} />
276276
</NetPyNEField>
277277

278278
<NetPyNEField id="netParams.shape">
279279
<SelectField variant="filled" model={"netParams.shape"} />
280280
</NetPyNEField>
281281

282282
<NetPyNEField id="netParams.rotateCellsRandomly" >
283-
<NetPyNETextField variant="filled" model={"netParams.rotateCellsRandomly"} />
283+
<NetPyNETextField fullWidth variant="filled" model={"netParams.rotateCellsRandomly"} />
284284
</NetPyNEField>
285285

286286
</div>
@@ -311,7 +311,6 @@ const styles = ({ shape, spacing }) => ({
311311
bottomNav: {
312312
borderRadius: shape.borderRadius,
313313
backgroundColor: bgDark,
314-
marginBottom: spacing(1),
315314
overflow: 'hidden'
316315
},
317316
layout: { height: "100%", display: 'flex' }

0 commit comments

Comments
 (0)