Skip to content

Commit 94b1a29

Browse files
author
rodriguez-facundo
committed
Style drawer action dialog components
1 parent d509957 commit 94b1a29

6 files changed

Lines changed: 225 additions & 146 deletions

File tree

‎webapp/components/settings/actions/ActionDialog.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@ export default class ActionDialog extends React.Component {
161161
return (
162162

163163
<Dialog
164+
fullWidth
165+
maxWidth='sm'
164166
open={this.state.open}
165167
onClose={() => this.closeDialog()}
166168
>

‎webapp/components/settings/actions/ImportCellParams.js‎

Lines changed: 91 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,30 @@ import NetPyNEField from '../../general/NetPyNEField';
88

99
import IconButton from '@material-ui/core/IconButton';
1010
import Icon from '@material-ui/core/Icon';
11-
12-
const styles = {
13-
card: {
14-
main: { padding: 10, float: 'left', width: '100%' },
15-
title: { paddingBottom: 0 },
16-
cancel: { marginRight: 16 }
11+
import { withStyles } from '@material-ui/core/styles';
12+
13+
const styles = ({ spacing, typography, zIndex }) => ({
14+
container: {
15+
marginTop: spacing(2),
16+
display: 'flex',
17+
flexDirection: 'row',
18+
alignItems: 'flex-end',
19+
width: '100%'
1720
},
18-
mods: {
19-
container: { width: '100%', float: 'left', marginTop: '15px' },
20-
leftSubContainer: { float: 'left', width: '50%' },
21-
rightSubContainer: { float: 'right', width: '50%' },
22-
checkbox: { width: '90%' }
23-
}
24-
}
21+
icon: {
22+
'&:hover': { backgroundColor: 'inherit' },
23+
flex: '0 0 4%',
24+
marginRight: spacing(2),
25+
width: typography.h3.fontSize,
26+
height: typography.h3.fontSize,
27+
padding: '0px!important',
28+
zIndex: zIndex.modal
29+
},
30+
textField: { alignItems: 'center' },
31+
root:{ overflow: 'hidden' },
32+
})
2533

26-
export default class ImportCellParams extends React.Component {
34+
class ImportCellParams extends React.Component {
2735

2836
constructor (props) {
2937
super(props);
@@ -65,6 +73,7 @@ export default class ImportCellParams extends React.Component {
6573
}
6674

6775
render () {
76+
const { classes } = this.props
6877
const cellArgs = this.refs.cellArgs ? this.refs.cellArgs.state.children : {}
6978
const { label, fileName, cellName, modFolder, importSynMechs, compileMod, explorerDialogOpen, exploreOnlyDirs } = this.state;
7079

@@ -77,95 +86,90 @@ export default class ImportCellParams extends React.Component {
7786
args={{ cellArgs, fileName, cellName, label, modFolder, importSynMechs, compileMod }}
7887
{...this.props}
7988
>
80-
<TextField
81-
value={label}
82-
id="importCellTemplateName"
83-
label="Cell rule label"
84-
onChange={event => this.setState({ label: event.target.value })}
85-
/>
86-
87-
<NetPyNEField id="netParams.importCellParams.cellName" className="netpyneFieldNoWidth">
89+
<div className={classes.root}>
8890
<TextField
89-
value={cellName}
90-
id="importCellTemplateCellName"
91-
onChange={event => this.setState({ cellName: event.target.value })}
91+
value={label}
92+
className="netpyneField"
93+
id="importCellTemplateName"
94+
label="Cell rule label"
95+
onChange={event => this.setState({ label: event.target.value })}
9296
/>
93-
</NetPyNEField>
94-
95-
<div className="flex-row">
96-
<IconButton
97-
id="importCellTemplateFile"
98-
className='flex-row-icon b-4'
99-
onClick={() => this.showExplorerDialog('fileName', false)}
100-
tooltip-data='File explorer'
101-
>
102-
<Icon className='fa fa-folder-o listIcon' />
103-
</IconButton>
104-
105-
<NetPyNEField id="netParams.importCellParams.fileName" className="netpyneFieldNoWidth">
106-
<TextField
107-
className="netpyneFieldNoWidth fx-11 no-z-index"
108-
value={fileName}
109-
onChange={event => this.setState({ fileName: event.target.value })}
110-
/>
111-
</NetPyNEField>
112-
113-
</div>
114-
11597

116-
<div className="flex-row">
117-
<IconButton
118-
id="importCellTemplateModFile"
119-
className='flex-row-icon b-4'
120-
onClick={() => this.showExplorerDialog('modFolder', true)}
121-
tooltip-data='File explorer'
122-
>
123-
<Icon className="fa fa-folder-o listIcon" />
124-
</IconButton>
125-
126-
<NetPyNEField id="netParams.importCellParams.modFolder" className="netpyneRightField" >
127-
<TextField
128-
value={modFolder}
129-
className="netpyneFieldNoWidth fx-11 no-z-index"
130-
onChange={event => this.setState({ modFolder: event.target.value })}
98+
<NetPyNEField id="netParams.importCellParams.cellName" className={classes.textField}>
99+
<TextField
100+
value={cellName}
101+
id="importCellTemplateCellName"
102+
onChange={event => this.setState({ cellName: event.target.value })}
131103
/>
132104
</NetPyNEField>
133-
</div>
134-
135-
<div className="listStyle netpyneField">
136-
<ListComponent id="cellArgs" realType="dict" floatingLabelText="Cell Template Parameters (key:value pair)" ref="cellArgs" />
137-
</div>
138105

139-
<div style={styles.mods.container}>
140-
<div style={styles.mods.leftSubContainer}>
141-
<NetPyNEField id="netParams.importCellParams.importSynMechs" className="netpyneCheckbox netpyneFieldNoWidth" noStyle>
142-
<Checkbox
143-
checked={importSynMechs}
144-
style={styles.mods.checkbox}
145-
onChange={() => this.updateCheck('importSynMechs')}
106+
<div className={classes.container}>
107+
<IconButton
108+
id="importCellTemplateFile"
109+
className={classes.icon}
110+
onClick={() => this.showExplorerDialog('fileName', false)}
111+
tooltip-data='File explorer'
112+
>
113+
<Icon className='fa fa-folder-o listIcon' />
114+
</IconButton>
115+
116+
<NetPyNEField id="netParams.importCellParams.fileName">
117+
<TextField
118+
value={fileName}
119+
onChange={event => this.setState({ fileName: event.target.value })}
146120
/>
147121
</NetPyNEField>
122+
148123
</div>
149124

150-
<div style={styles.mods.rightSubContainer}>
151-
<NetPyNEField id="netParams.importCellParams.compileMod" className="netpyneCheckbox netpyneFieldNoWidth" noStyle>
152-
<Checkbox
153-
checked={compileMod}
154-
style={styles.mods.checkbox}
155-
id="importCellTemplateCompileMods"
156-
onChange={() => this.updateCheck('compileMod')}
125+
126+
<div className={classes.container}>
127+
<IconButton
128+
id="importCellTemplateModFile"
129+
className={classes.icon}
130+
onClick={() => this.showExplorerDialog('modFolder', true)}
131+
tooltip-data='File explorer'
132+
>
133+
<Icon className="fa fa-folder-o listIcon" />
134+
</IconButton>
135+
136+
<NetPyNEField id="netParams.importCellParams.modFolder">
137+
<TextField
138+
value={modFolder}
139+
onChange={event => this.setState({ modFolder: event.target.value })}
157140
/>
158141
</NetPyNEField>
159142
</div>
160-
</div>
161143

162-
<FileBrowser
163-
open={explorerDialogOpen}
164-
exploreOnlyDirs={exploreOnlyDirs}
165-
onRequestClose={selection => this.closeExplorerDialog(selection)}
166-
/>
144+
<div className="listStyle netpyneField">
145+
<ListComponent id="cellArgs" realType="dict" floatingLabelText="Cell Template Parameters (key:value pair)" ref="cellArgs" />
146+
</div>
147+
148+
<NetPyNEField id="netParams.importCellParams.importSynMechs" >
149+
<Checkbox
150+
checked={importSynMechs}
151+
onChange={() => this.updateCheck('importSynMechs')}
152+
/>
153+
</NetPyNEField>
154+
155+
<NetPyNEField id="netParams.importCellParams.compileMod" >
156+
<Checkbox
157+
checked={compileMod}
158+
id="importCellTemplateCompileMods"
159+
onChange={() => this.updateCheck('compileMod')}
160+
/>
161+
</NetPyNEField>
162+
167163

164+
<FileBrowser
165+
open={explorerDialogOpen}
166+
exploreOnlyDirs={exploreOnlyDirs}
167+
onRequestClose={selection => this.closeExplorerDialog(selection)}
168+
/>
169+
</div>
168170
</ActionDialog>
169171
)
170172
}
171173
}
174+
175+
export default withStyles(styles)(ImportCellParams)

‎webapp/components/settings/actions/ImportExportHLS.js‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,33 @@ const grey400 = grey[400];
1515
import IconButton from '@material-ui/core/IconButton';
1616
import Icon from '@material-ui/core/Icon';
1717

18-
export default class ImportExportHLS extends React.Component {
18+
import { withStyles } from '@material-ui/core/styles';
19+
20+
const styles = ({ spacing, typography, zIndex }) => ({
21+
container: {
22+
marginTop: spacing(2),
23+
display: 'flex',
24+
flexDirection: 'row',
25+
alignItems: 'baseline',
26+
width: '100%'
27+
},
28+
selectField: {
29+
marginTop: spacing(3),
30+
width: '100%'
31+
},
32+
selectFieldLabel: { top: -spacing(2) },
33+
icon: {
34+
'&:hover': { backgroundColor: 'inherit' },
35+
flex: '0 0 4%',
36+
marginRight: spacing(2),
37+
width: typography.h3.fontSize,
38+
height: typography.h3.fontSize,
39+
padding: '0px!important',
40+
zIndex: zIndex.modal
41+
}
42+
})
43+
44+
class ImportExportHLS extends React.Component {
1945
constructor (props) {
2046
super(props);
2147
this.state = this.initialState()
@@ -127,15 +153,16 @@ export default class ImportExportHLS extends React.Component {
127153
}
128154

129155
render () {
156+
const { classes } = this.props
130157
const disableLoadMod = this.state.loadMod === '' ? true : !this.state.loadMod
131158
switch (this.props.mode) {
132159
case 'IMPORT':
133160
var content = (
134161
<div>
135-
<div className="flex-row">
162+
<div className={classes.container}>
136163
<IconButton
137164
id="appBarImportFileName"
138-
className='flex-row-icon'
165+
className={classes.icon}
139166
onClick={() => this.showExplorerDialog('netParamsPath', false, '.py')}
140167
tooltip-data='File explorer'
141168
>
@@ -151,9 +178,9 @@ export default class ImportExportHLS extends React.Component {
151178
</div>
152179

153180

154-
<div className="flex-row">
181+
<div className={classes.container}>
155182
<IconButton
156-
className='flex-row-icon'
183+
className={classes.icon}
157184
onClick={() => this.showExplorerDialog('simConfigPath', false, '.py')}
158185
tooltip-data='File explorer'
159186
>
@@ -169,9 +196,9 @@ export default class ImportExportHLS extends React.Component {
169196

170197
</div>
171198

172-
<div className="flex-row">
199+
<div className={classes.container}>
173200
<IconButton
174-
className='flex-row-icon'
201+
className={classes.icon}
175202
onClick={() => this.showExplorerDialog('modFolder', true, false)}
176203
tooltip-data='File explorer'
177204
>
@@ -189,7 +216,7 @@ export default class ImportExportHLS extends React.Component {
189216
</div>
190217

191218

192-
<div className="flex-row">
219+
<div className={classes.container}>
193220
<TextField
194221
className="netpyneRightField fx-6 mr-2"
195222
label="NetParams variable"
@@ -204,11 +231,10 @@ export default class ImportExportHLS extends React.Component {
204231
/>
205232
</div>
206233

207-
<FormControl>
208-
<InputLabel>Are custom mod files required for this model?</InputLabel>
234+
<FormControl className={classes.selectField}>
235+
<InputLabel className={classes.selectFieldLabel}>Are custom mod files required for this model?</InputLabel>
209236
<Select
210237
id="appBarImportRequiresMod"
211-
className="netpyneField"
212238
style={{ marginTop:0 }}
213239
value={this.state.loadMod}
214240
onChange={event => this.setState({ loadMod: event.target.value })}
@@ -273,4 +299,6 @@ export default class ImportExportHLS extends React.Component {
273299
</ActionDialog>
274300
)
275301
}
276-
}
302+
}
303+
304+
export default withStyles(styles)(ImportExportHLS)

0 commit comments

Comments
 (0)