Skip to content

Commit 652ff27

Browse files
filippomcfilippomc
committed
#147 Styling
1 parent a9955da commit 652ff27

25 files changed

Lines changed: 276 additions & 255 deletions

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Button from '@material-ui/core/Button';
33
import ContentAdd from '@material-ui/icons/Add';
44
import NavigationMoreHoriz from '@material-ui/icons/MoreHoriz';
55
import Fab from '@material-ui/core/Fab';
6-
6+
import Icon from '@material-ui/core/Icon';
77

88
import {
99
NetPyNECellRule,
@@ -18,7 +18,7 @@ import NetPyNESection from './sections/NetPyNESection';
1818
import NetPyNEMechanism from './sections/mechanisms/NetPyNEMechanism';
1919
import NetPyNENewMechanism from './sections/mechanisms/NetPyNENewMechanism';
2020

21-
import NavigationChevronRight from '@material-ui/icons/ChevronRight';
21+
2222
import Dialog from '@material-ui/core/Dialog/Dialog';
2323

2424
import Utils from '../../../Utils';
@@ -653,7 +653,7 @@ export default class NetPyNECellRules extends React.Component {
653653

654654
<div>
655655
<ExpansionPanel>
656-
<div className="breadcrumby">
656+
<div className="breadcrumb">
657657
<NetPyNEHome
658658
selection={selectedCellRule}
659659
handleClick={() => this.setState({ page: 'main', selectedCellRule: undefined, selectedSection: undefined, selectedMechanism: undefined })}
@@ -670,9 +670,9 @@ export default class NetPyNECellRules extends React.Component {
670670
</Fab>
671671
</Tooltip>
672672
</div>
673-
<NavigationChevronRight
674-
className='ml-2'
675-
color='disabled'
673+
<Icon
674+
color="disabled"
675+
className="fa fa-angle-right"
676676
/>
677677
<div className='ml-2'>
678678
<Tooltip title={this.createTooltip('section')} placement="top">
@@ -693,9 +693,9 @@ export default class NetPyNECellRules extends React.Component {
693693

694694
</div>
695695

696-
<NavigationChevronRight
697-
className='ml-2'
698-
color='disabled'
696+
<Icon
697+
color="disabled"
698+
className="fa fa-angle-right"
699699
/>
700700
<NetPyNENewMechanism
701701
className="ml-2"

‎webapp/components/definition/connectivity/NetPyNEConnectivityRules.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export default class NetPyNEConnectivityRules extends Component {
202202
<GridLayout>
203203
<div>
204204
<ExpansionPanel>
205-
<div className="breadcrumby">
205+
<div className="breadcrumb">
206206
<NetPyNEHome
207207
selection={this.state.selectedConnectivityRule}
208208
handleClick={() => this.setState({ selectedConnectivityRule: undefined })}

‎webapp/components/definition/plots/NetPyNEPlots.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export default class NetPyNEPlots extends React.Component {
123123
<GridLayout>
124124
<div>
125125
<ExpansionPanel>
126-
<div className="breadcrumby">
126+
<div className="breadcrumb">
127127
<NetPyNENewPlot handleClick={this.handleNewPlot} />
128128
</div>
129129
<RulePath style={{ paddingBottom: 8 }} text={`simConfig.analysis["${this.state.selectedPlot}"]`}/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export default class NetPyNEPopulations extends React.Component {
201201
<div>
202202

203203
<ExpansionPanel>
204-
<div className="breadcrumby">
204+
<div className="breadcrumb">
205205
<NetPyNEHome
206206
selection={this.state.selectedPopulation}
207207
handleClick={() => this.setState({ selectedPopulation: undefined })}

‎webapp/components/definition/stimulationSources/NetPyNEStimulationSources.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export default class NetPyNEStimulationSources extends Component {
177177
<GridLayout>
178178
<div>
179179
<ExpansionPanel>
180-
<div className="breadcrumby">
180+
<div className="breadcrumb">
181181
<NetPyNEHome
182182
selection={this.state.selectedStimulationSource}
183183
handleClick={() => this.setState({ selectedStimulationSource: undefined })}

‎webapp/components/definition/stimulationTargets/NetPyNEStimulationTargets.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ export default class NetPyNEStimulationTargets extends Component {
176176
<GridLayout>
177177
<div>
178178
<ExpansionPanel>
179-
<div className="breadcrumby">
179+
<div className="breadcrumb">
180180
<NetPyNEHome
181181
selection={this.state.selectedStimulationTarget}
182182
handleClick={() => this.setState({ selectedStimulationTarget: undefined })}

‎webapp/components/definition/synapses/NetPyNESynapses.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ export default class NetPyNESynapses extends Component {
175175
<GridLayout>
176176
<div>
177177
<ExpansionPanel>
178-
<div className="breadcrumby">
178+
<div className="breadcrumb">
179179
<NetPyNEHome
180180
selection={this.state.selectedSynapse}
181181
handleClick={() => this.setState({ selectedSynapse: undefined })}

‎webapp/components/general/GridLayout.js‎

Lines changed: 18 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,41 @@
11
import React from 'react'
22
import Grid from '@material-ui/core/Grid'
33
import { makeStyles } from '@material-ui/core/styles'
4-
import Paper from '@material-ui/core/Paper'
5-
import { bgDark } from '../../theme'
4+
import Card from '@material-ui/core/Card';
5+
import CardContent from '@material-ui/core/CardContent';
66

7-
const useStyles = makeStyles(({ spacing, palette }) => ({
8-
container:{ height: 'calc(100% - 8px)', alignItems: 'stretch' },
9-
grid: {
10-
flex: '1 0 0',
11-
minWidth: 400,
12-
minHeight: 350,
13-
maxHeight: '100%',
14-
marginRight: spacing(1),
15-
marginBottom: spacing(1)
16-
},
17-
paper: { height: '100%', backgroundColor: bgDark },
18-
root: { height: '100%', overflowY: 'visible', overflowX: 'hidden', marginRight: -spacing(1) }
19-
}))
7+
const useStyles = makeStyles(({ spacing, palette }) => ({}))
208

219
export default function GridLayout ({ children }) {
2210
const classes = useStyles()
2311
// left-hand-side-top - left-hand-side-bottom - right-hand-side - others
2412
const [lhst, lhsb, rhs, ...others] = children
2513
return (
2614
<div className={classes.root}>
27-
<Grid container className={classes.container} alignItems="flex-start">
15+
<Grid container elevation={0} spacing={1} alignItems="stretch">
2816

29-
<Grid item className={classes.grid}>
30-
<Paper className={classes.paper} >
31-
<SingleComponent>
17+
<Grid item>
18+
<Card elevation={0}>
19+
<CardContent >
3220
{lhst}
3321
{lhsb}
34-
</SingleComponent>
35-
</Paper>
22+
</CardContent>
23+
</Card>
3624

3725
</Grid>
3826

39-
<Grid item className={classes.grid}>
40-
<Paper className={classes.paper}>
41-
<SingleComponent>
42-
{[rhs]}
43-
</SingleComponent>
44-
</Paper>
45-
</Grid>
46-
27+
{ rhs
28+
? <Grid item >
29+
<Card elevation={0}>
30+
<CardContent>
31+
{[rhs]}
32+
</CardContent>
33+
</Card>
34+
</Grid> : ''
35+
}
4736
</Grid>
4837
{others}
4938
</div>
5039

5140
)
5241
}
53-
54-
const useComponentStyles = makeStyles(({ spacing }) => ({
55-
container: {
56-
display: 'flex',
57-
flexDirection: 'column',
58-
height: '100%',
59-
margin: `0px ${spacing(1)}px`,
60-
paddingTop: spacing(1)
61-
},
62-
element: {
63-
overflowY:'auto',
64-
overflowX:'hidden',
65-
maxHeight: '100%',
66-
// height: '100%'
67-
}
68-
}))
69-
70-
function SingleComponent ({ children = [] }) {
71-
const classes = useComponentStyles()
72-
const [topChild, ...otherChildren] = children
73-
74-
return (
75-
<div className={classes.container}>
76-
<div >
77-
{otherChildren.length > 0 ? topChild : null}
78-
</div>
79-
80-
<div className={classes.element}>
81-
{otherChildren.length > 0 ? otherChildren : topChild}
82-
</div>
83-
</div>
84-
)
85-
86-
}

‎webapp/components/general/NetPyNEHome.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import React from 'react';
22
import Icon from '@material-ui/core/Icon';
3-
import NavigationChevronRight from '@material-ui/icons/ChevronRight';
43
import { makeStyles } from '@material-ui/core/styles'
54
import Tooltip from '../general/Tooltip'
65
const useStyles = makeStyles(({ spacing, palette }) => ({
7-
rightArrow : { marginLeft: spacing(1) },
86
home: { },
97
root: {
108
display: 'flex',
119
alignItems: 'center'
1210
},
13-
icon: { color: palette.common.white, fontSize: 40 }
11+
icon: { fontSize: 40, fontWeight: 'bold' }
1412
}))
1513

1614

@@ -27,14 +25,17 @@ export default ({ handleClick, selection }) => {
2725
}}
2826
>
2927
<Icon
28+
color="primary"
3029
classes={{ root: classes.icon }}
31-
className="fa fa-home"
30+
className="fa fa-angle-right"
3231
/>
3332
</div>
3433
</Tooltip>
35-
36-
37-
<NavigationChevronRight className={classes.rightArrow} color="disabled"/>
34+
<Icon
35+
color="disabled"
36+
className="fa fa-angle-right"
37+
/>
38+
3839
</div>
3940
)
4041

‎webapp/components/settings/Drawer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
117117
};
118118

119119
return (
120-
<Paper className={expand ? classes.openDrawer : classes.closeDrawer}>
120+
<Paper elevation={0} className={expand ? classes.openDrawer : classes.closeDrawer}>
121121
<div className={classes.container}>
122122
<div >
123123
<List dense>

0 commit comments

Comments
 (0)