Skip to content

Commit 8a194a3

Browse files
author
rodriguez-facundo
committed
#147 Apply styling, remove as much css as possible, use Grid and Box for alignment, splash page
1 parent fbf93a5 commit 8a194a3

18 files changed

Lines changed: 1098 additions & 1078 deletions

File tree

‎webapp/.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ module.exports = {
33
"./node_modules/@geppettoengine/geppetto-client/.eslintrc.js",
44
"plugin:jest/recommended"
55
],
6+
rules: {
7+
'multiline-comment-style': 0,
8+
},
69
plugins: ["jest"],
710
globals: {
811
page: true,

‎webapp/components/NetPyNE.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,12 @@ class NetPyNE extends React.Component {
5252
GEPPETTO.Manager.loadExperiment(1, [], []);
5353
Utils.execPythonMessage('from netpyne_ui.netpyne_geppetto import netpyne_geppetto');
5454
Utils.evalPythonMessage('netpyne_geppetto.getData',[]).then(response => {
55+
GEPPETTO.trigger(GEPPETTO.Events.Show_spinner, "LOADING NETPYNE-UI");
5556
const data = Utils.convertToJSON(response);
5657
this.addMetadataToWindow(data);
57-
this.props.modelLoaded();
5858
this.props.setWidgets(EDIT_WIDGETS);
59-
GEPPETTO.trigger("spinner:hide");
59+
this.props.modelLoaded();
60+
GEPPETTO.trigger(GEPPETTO.Events.Hide_spinner);
6061
})
6162

6263
});

‎webapp/components/definition/populations/Dimensions.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ class DimensionsComponent extends Component {
102102
return (
103103
<div>
104104
<NetPyNEField id="netParams.popParams.numCells" className={classes.selectField}>
105-
<FormControl fullWidth margin="normal">
105+
<FormControl fullWidth>
106106
<InputLabel>
107107
<Box mt={1} ml={2}>Dimension type</Box>
108108
</InputLabel>
@@ -129,7 +129,7 @@ class DimensionsComponent extends Component {
129129
{
130130
this.state.dimension != undefined && this.state.dimension != ""
131131
&& (
132-
<Box mt={1}>
132+
<Box ml={1}>
133133
<NetPyNEField id={"netParams.popParams." + this.state.dimension} className={classes.fields}>
134134
<NetPyNETextField
135135
fullWidth

‎webapp/components/general/Checkbox.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,31 @@ import { bgLight } from '../../theme'
88

99
export default class Checkbox extends Component {
1010
render () {
11+
const { fullWidth, noBackground, styles } = this.props
12+
const localStyle = fullWidth ? { width: '100%' } : {}
13+
if (noBackground) {
14+
localStyle.backgroundColor = 'inherit'
15+
}
16+
1117
return (
12-
<FormGroup style={{
13-
backgroundColor: bgLight,
14-
borderTopLeftRadius: 4,
15-
borderTopRightRadius: 4,
16-
}}>
18+
<FormGroup
19+
style={{
20+
backgroundColor: bgLight,
21+
borderTopLeftRadius: 4,
22+
borderTopRightRadius: 4,
23+
...localStyle,
24+
...styles
25+
}}
26+
>
1727
<FormControlLabel
1828
disabled={!!this.props.disabled}
1929
label={this.props.label ? this.props.label : ''}
2030
control={
21-
<Box marginLeft={1}>
31+
<Box ml={1}>
2232
<MuiCheckbox
2333
id={this.props.id}
2434
color="primary"
35+
disabled={!!this.props.disabled}
2536
checked={this.props.checked || false}
2637
onChange={this.props.onChange}
2738
/>

‎webapp/components/general/FileBrowser.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import Utils from '../../Utils';
44
import Button from '@material-ui/core/Button';
55
import { changeNodeAtPath } from 'react-sortable-tree';
66
import Dialog from '@material-ui/core/Dialog';
7-
7+
import Box from '@material-ui/core/Box'
8+
import Grid from '@material-ui/core/Grid'
89
import DialogActions from '@material-ui/core/DialogActions';
910
import DialogContent from '@material-ui/core/DialogContent';
10-
11+
import { Tooltip } from 'netpyne/components'
1112
import IconButton from '@material-ui/core/IconButton';
1213
import Icon from '@material-ui/core/Icon';
1314
import { walk } from 'react-sortable-tree';
14-
15+
import { bgLight, fontColor } from '../../theme'
1516
export default class FileBrowser extends React.Component {
1617

1718
constructor (props) {
@@ -121,8 +122,7 @@ export default class FileBrowser extends React.Component {
121122
<Button
122123
key='cancel'
123124
onClick={event => this.onCancelFileBrowser()}
124-
style={{ marginRight: 16 }}
125-
>cancel</Button>,
125+
>CANCEL</Button>,
126126
<Button
127127
id="browserAccept"
128128
key="select"
@@ -132,7 +132,7 @@ export default class FileBrowser extends React.Component {
132132
this.props.onRequestClose(this.props.toggleMode ? this.getSelectedFiles() : this.state.selection )
133133
}}
134134
disabled={this.disableSelectButton()}
135-
>select</Button>
135+
>SELECT</Button>
136136
];
137137

138138
var selectMessage = this.props.exploreOnlyDirs ? "Select a folder. " : "Select a file. ";
@@ -142,37 +142,39 @@ export default class FileBrowser extends React.Component {
142142
fullWidth
143143
maxWidth="sm"
144144
onClose={() => this.props.onRequestClose()}
145-
style={{ zIndex: 5000 }}
145+
style={{ zIndex: 1350 }}
146146
>
147147
<DialogContent>
148-
<div style={{ marginBottom: '15px', color: 'white' }}>
149-
<b>{selectMessage}</b>
150-
These paths are relative to:<br/>
151-
<div className="flex-row fx-center ">
152-
<span className="code-p w-80">{this.currentFolder || window.currentFolder}</span>
148+
<Box color={fontColor}>{`${selectMessage}Paths are relative to:`}</Box>
149+
150+
<Grid container alignItems="center">
151+
<Grid item>
152+
<Box m={1} p={1} color="lightgrey" bgcolor={bgLight}>{this.currentFolder || window.currentFolder}</Box>
153+
</Grid>
154+
155+
<Tooltip title="Enclosing Folder" placement="top">
153156
<IconButton
154-
id="file-browser-level-up"
155157
disableTouchRipple
156-
className='simple-icon mrg-2'
157158
onClick={() => this.handleMoveUp()}
158-
tooltip-data='Enclosing Folder'
159159
>
160-
<Icon className={'fa fa-level-up listIcon'} />
160+
<Icon className={'fa fa-level-up'} />
161161
</IconButton>
162+
</Tooltip>
163+
164+
<Tooltip title="Home folder" placement="top">
162165
<IconButton
163166
disableTouchRipple
164-
className='simple-icon mrg-2'
165167
onClick={() => this.handleMoveUp(true)}
166-
tooltip-data='Home folder'
167168
>
168-
<Icon className={'fa fa-home listIcon'} />
169+
<Icon className={'fa fa-home'} />
169170
</IconButton>
170-
</div>
171-
172-
</div>
173-
< Tree
171+
</Tooltip>
172+
</Grid>
173+
174+
175+
<Tree
174176
id="TreeContainerCutting"
175-
style={{ width: "100%", height: "400px", float: 'left' }}
177+
style={{ width: "100%", height: 400 }}
176178
treeData={[]}
177179
handleClick={this.handleClickVisualize}
178180
rowHeight={30}

‎webapp/components/general/List.js‎

Lines changed: 27 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { Component } from 'react';
22
import TextField from '@material-ui/core/TextField';
33
import IconButton from '@material-ui/core/IconButton';
4-
import Icon from '@material-ui/core/Icon';
4+
55
import Tooltip from './Tooltip'
66
import Chip from '@material-ui/core/Chip'
77
import Grid from '@material-ui/core/Grid'
8+
import NetPyNEIcon from '../general/NetPyNEIcons';
9+
import Box from '@material-ui/core/Box'
810
import { withStyles } from '@material-ui/core/styles'
911
/**
1012
* Generic List/Dict Component
@@ -213,51 +215,34 @@ class ListComponent extends Component {
213215
} else {
214216
var value = this.state.children[key];
215217
}
216-
return (
217-
<Grid item key={key}>
218-
<Chip key={key}label={value} onDelete={() => this.removeChild(key)} color="primary" />
219-
</Grid>
220-
)
221-
218+
return <Chip key={key} label={value} style={{ marginRight: 8 }} onDelete={() => this.removeChild(key)} color="primary" />
222219
});
223220

224221
const { classes } = this.props
225222
return (
226-
<Grid container spacing={1}>
227-
<Grid container item xs={12} alignItems="center">
228-
<Grid item xs={11}>
229-
<TextField
230-
variant="filled"
231-
id={this.props.id}
232-
label={this.props.label ? 'Add new ' + this.props.label : 'Add new item'}
233-
onChange={this.handleNewItemChange}
234-
onKeyPress={e => e.key === 'Enter' ? this.addChild() : null }
235-
value={this.state.newItemValue}
236-
style={{ width: '100%' }}
237-
helperText={this.state.newItemErrorText}
238-
/>
239-
</Grid>
240-
241-
<Grid item xs={1}>
242-
<Tooltip title="Add item to the list" placement="top">
243-
<IconButton
244-
className={classes.addButton}
245-
onClick={this.addChild}
246-
color="primary"
247-
>
248-
<Icon className="fa fa-plus-circle"/>
249-
</IconButton>
250-
</Tooltip>
251-
</Grid>
252-
253-
</Grid>
254-
255-
<Grid container item xs={12} spacing={1}>
256-
{childrenWithExtraProp}
257-
258-
</Grid>
259-
260-
</Grid>
223+
<Box >
224+
<TextField
225+
variant="filled"
226+
id={this.props.id}
227+
label={this.props.label ? 'Add new ' + this.props.label : 'Add new item'}
228+
onChange={this.handleNewItemChange}
229+
onKeyPress={e => e.key === 'Enter' ? this.addChild() : null }
230+
value={this.state.newItemValue}
231+
fullWidth
232+
helperText={this.state.newItemErrorText}
233+
InputProps={{
234+
endAdornment: (
235+
<Tooltip title="Add item to the list" placement="top">
236+
<IconButton size="small" onClick={this.addChild}>
237+
<NetPyNEIcon name="add"/>
238+
</IconButton>
239+
</Tooltip>
240+
)
241+
}}
242+
/>
243+
<Box m={1}>{childrenWithExtraProp}</Box>
244+
245+
</Box>
261246
)
262247
}
263248
}

‎webapp/components/general/NetPyNEField.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default class NetPyNEField extends Component {
112112
name = child.type.options.name
113113
}
114114
}
115-
if (["Select", "TextField", "Checkbox", "MuiTextField", "PythonControlledControlWithPythonDataFetch"].indexOf(name) === -1){
115+
if (["Select", "TextField", "MuiFormControl", "Checkbox", "MuiTextField", "PythonControlledControlWithPythonDataFetch"].indexOf(name) === -1){
116116
extraProps['validate'] = this.setErrorMessage;
117117
extraProps['prePythonSyncProcessing'] = this.prePythonSyncProcessing;
118118

@@ -155,6 +155,11 @@ export default class NetPyNEField extends Component {
155155
));
156156
}
157157

158+
// // This seems a more material way to add the help icon (at least for TextFields)
159+
// if (child.props.fullWidth) {
160+
// extraProps.InputProps = { endAdornment: helpComponent }
161+
// }
162+
158163
return React.cloneElement(child, extraProps);
159164
});
160165

‎webapp/components/general/Splash.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import Box from '@material-ui/core/Box'
44
export default class Splash extends Component {
55
render () {
66
return (
7-
<Box position='fixed' top={0} bgcolor="white" height="100%" width="100%">
8-
<img style={{ width: '100%' }} src="geppetto/build/static/splash.png"/>
7+
<Box position='fixed' top={0} bgcolor="white" height="100%" width="100%" textAlign="center">
8+
<img style={{ width: '50%' }} src="geppetto/build/static/splash.png"/>
99
</Box>
1010
)
1111
}

‎webapp/components/topbar/dialogs/ActionDialog.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ export default class ActionDialog extends React.Component {
8585
</DialogContent>
8686
<DialogActions>
8787
<Button
88-
color="primary"
8988
onClick={this.cancelDialog}
9089
style={styles.cancel}
9190
key="CANCEL"

0 commit comments

Comments
 (0)