Skip to content

Commit cd615fe

Browse files
author
rodriguez-facundo
committed
Styling
1 parent 6655086 commit cd615fe

14 files changed

Lines changed: 387 additions & 309 deletions

‎webapp/Main.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,12 @@ jQuery(function () {
1414
var Console = require('geppetto-client/js/components/interface/console/Console');
1515
var TabbedDrawer = require('geppetto-client/js/components/interface/drawer/TabbedDrawer');
1616
var PythonConsole = require('geppetto-client/js/components/interface/pythonConsole/PythonConsole');
17-
17+
var theme = require('./Theme').default
18+
1819
require('./css/netpyne.less');
1920
require('./css/material.less');
2021
require('./css/traceback.less');
2122

22-
23-
const customTheme = {
24-
palette: {
25-
primary1Color: '#543a73',
26-
primary2Color: '#eb557a',
27-
primary3Color: '#ebd07a'
28-
}
29-
};
30-
31-
const theme = getMuiTheme(customTheme);
32-
3323
function App (data = {}) {
3424
return (
3525
<div>

‎webapp/Theme.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
2+
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
3+
import purple from '@material-ui/core/colors/purple';
4+
import pink from '@material-ui/core/colors/pink';
5+
6+
// pink
7+
const secondaryColor = pink['A200']
8+
// purple
9+
const primaryColor = 'rgb(84, 58, 115)'
10+
11+
12+
export default createMuiTheme({
13+
typography: {
14+
useNextVariants: true,
15+
htmlFontSize: 14,
16+
fontSize: 14,
17+
fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
18+
button: {
19+
textTransform: "none",
20+
fontSize: "1.0rem"
21+
}
22+
},
23+
palette: {
24+
primary: { main: primaryColor, },
25+
secondary: { main: secondaryColor, }
26+
},
27+
overrides: {
28+
MuiInputLabel: { formControl: { top: '-6px' } },
29+
MuiInput: {
30+
input: {
31+
outline: 'none !important',
32+
border: 'none !important',
33+
boxShadow: 'none !important'
34+
},
35+
},
36+
MuiIconButton:{ root: { '&:hover': { backgroundColor: 'inherit' } } },
37+
MuiSelect: {
38+
root: {
39+
outline: 'none !important',
40+
border: 'none !important',
41+
boxShadow: 'none !important'
42+
},
43+
select: { "&:focus" :{ background: "none" } }
44+
},
45+
}
46+
});

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

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@ import Select from '../../general/Select';
99
import NetPyNECoordsRange from '../../general/NetPyNECoordsRange';
1010
import Dialog from '@material-ui/core/Dialog/Dialog';
1111

12+
import DialogActions from '@material-ui/core/DialogActions';
13+
import DialogContent from '@material-ui/core/DialogContent';
14+
import DialogContentText from '@material-ui/core/DialogContentText';
15+
import DialogTitle from '@material-ui/core/DialogTitle';
16+
1217
var PythonControlledCapability = require('geppetto-client/js/communication/geppettoJupyter/PythonControlledCapability');
1318
var PythonMethodControlledSelectField = PythonControlledCapability.createPythonControlledControlWithPythonDataFetch(Select);
1419

20+
1521
export default class NetPyNECellRule extends React.Component {
1622

1723
constructor (props) {
@@ -84,24 +90,26 @@ export default class NetPyNECellRule extends React.Component {
8490
}
8591

8692
render () {
87-
var actions = [
88-
<Button
89-
variant="contained"
90-
color="primary"
91-
label={"BACK"}
92-
onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
93-
/>
94-
];
95-
var title = this.state.errorMessage;
96-
var children = this.state.errorDetails;
97-
var dialogPop = (this.state.errorMessage != undefined ? <Dialog
98-
title={title}
99-
open={true}
100-
actions={actions}
101-
bodyStyle={{ overflow: 'auto' }}
102-
style={{ whiteSpace: "pre-wrap" }}>
103-
{children}
104-
</Dialog>
93+
94+
var dialogPop = (this.state.errorMessage != undefined ? (
95+
<Dialog
96+
open={true}
97+
style={{ whiteSpace: "pre-wrap" }}>
98+
<DialogTitle id="alert-dialog-title">{this.state.errorMessage}</DialogTitle>
99+
<DialogContent style={{ overflow: 'auto' }}>
100+
<DialogContentText id="alert-dialog-description">
101+
{this.state.errorDetails}
102+
</DialogContentText>
103+
</DialogContent>
104+
<DialogActions>
105+
<Button
106+
variant="contained"
107+
color="primary"
108+
onClick={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
109+
>BACK</Button>
110+
</DialogActions>
111+
</Dialog>
112+
)
105113
: undefined
106114
)
107115
return (

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

Lines changed: 70 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import React from 'react';
22
import Button from '@material-ui/core/Button';
33
import ContentAdd from '@material-ui/icons/Add';
44
import NavigationMoreHoriz from '@material-ui/icons/MoreHoriz';
5-
import { Card, CardHeader, CardContent } from '@material-ui/core';
6-
import FloatingActionButton from '@material-ui/core/Fab';
5+
import Card from '@material-ui/core/Card';
6+
import CardHeader from '@material-ui/core/CardHeader';
7+
import CardContent from '@material-ui/core/CardContent';
8+
import Fab from '@material-ui/core/Fab';
79
import NetPyNECellRule from './NetPyNECellRule';
810
import NetPyNEThumbnail from '../../general/NetPyNEThumbnail';
911
import NetPyNESection from './sections/NetPyNESection';
@@ -17,27 +19,18 @@ import Dialog from '@material-ui/core/Dialog/Dialog';
1719
import Utils from '../../../Utils';
1820
import NetPyNEHome from '../../general/NetPyNEHome';
1921

20-
const styles = {
21-
rightArrow : {
22-
float: 'left',
23-
color: 'grey',
24-
fontSize: "20px",
25-
marginLeft: '15px'
26-
},
27-
cellRule: {
28-
marginTop: "15px",
29-
float: "left",
30-
textAlign: 'center'
31-
},
32-
sections: {
33-
container: {
34-
marginLeft: '15px',
35-
float: 'left',
36-
borderRadius: 25,
37-
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, 0.19)',
38-
}
39-
}
40-
}
22+
import DialogActions from '@material-ui/core/DialogActions';
23+
import DialogContent from '@material-ui/core/DialogContent';
24+
import DialogContentText from '@material-ui/core/DialogContentText';
25+
import DialogTitle from '@material-ui/core/DialogTitle';
26+
27+
import { withStyles } from '@material-ui/core/styles'
28+
29+
const styles = ({ spacing }) => ({
30+
arrowRight : { marginLeft: spacing(1) },
31+
addCellRule: { marginLeft: spacing(1) },
32+
sections: { marginLeft: spacing(1) }
33+
})
4134

4235
export default class NetPyNECellRules extends React.Component {
4336

@@ -448,8 +441,8 @@ export default class NetPyNECellRules extends React.Component {
448441
switch (rule) {
449442
case 'cellRule':
450443
if (page !== 'main'){
451-
if (selectedCellRule.length > 8 ){
452-
return selectedCellRule.slice(0,7) + '...'
444+
if (selectedCellRule.length > 6 ){
445+
return selectedCellRule.slice(0,5) + '...'
453446
} else {
454447
return selectedCellRule
455448
}
@@ -492,23 +485,27 @@ export default class NetPyNECellRules extends React.Component {
492485
let selection = null;
493486
let container = null;
494487

495-
const actions = (
496-
<Button
497-
variant="contained"
498-
color="primary"
499-
label={"BACK"}
500-
onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
501-
/>
502-
)
503-
504488
const dialogPop = (errorMessage != undefined
505489
? <Dialog
506490
title={errorMessage}
507491
open={true}
508-
actions={actions}
509-
bodyStyle={{ overflow: 'auto' }}
510-
style={{ whiteSpace: "pre-wrap" }}>
511-
{errorDetails}
492+
style={{ whiteSpace: "pre-wrap" }}
493+
>
494+
<DialogTitle id="alert-dialog-title">{errorMessage}</DialogTitle>
495+
<DialogContent style={{ overflow: 'auto' }}>
496+
<DialogContentText id="alert-dialog-description">
497+
{errorDetails}
498+
</DialogContentText>
499+
</DialogContent>
500+
<DialogActions>
501+
<Button
502+
variant="contained"
503+
color="primary"
504+
onClick={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
505+
>
506+
Back
507+
</Button>
508+
</DialogActions>
512509
</Dialog>
513510
: undefined
514511
);
@@ -591,34 +588,42 @@ export default class NetPyNECellRules extends React.Component {
591588
handleClick={() => this.setState({ page: 'main', selectedCellRule: undefined, selectedSection: undefined, selectedMechanism: undefined })}
592589
/>
593590

594-
<FloatingActionButton
595-
id="newCellRuleButton"
596-
style={styles.cellRule}
597-
color={ page == 'main' ? 'primary' : 'secondary'}
598-
data-tooltip={ this.createTooltip('cellRule')}
599-
className={"actionButton smallActionButton"}
600-
onClick={() => this.handleHierarchyClick('main')}
601-
>
602-
{ this.createLabel('cellRule')}
603-
</FloatingActionButton>
604-
605-
<NavigationChevronRight style={styles.rightArrow}/>
606-
607-
<Button
608-
id="newSectionButton"
609-
variant="contained"
610-
style={styles.sections.container}
611-
color={ page === 'mechanisms' ? 'secondary' : 'primary'}
612-
disabled={ selectedCellRule == undefined }
613-
onClick={ () => this.handleHierarchyClick('sections') }
614-
data-tooltip={ this.createTooltip('section')}
615-
>
616-
<p style={{ color: 'white', height: '100%' }}>
591+
<div className='ml-2'>
592+
<Fab
593+
id="newCellRuleButton"
594+
style={{ minWidth: 56 }}
595+
color={ page == 'main' ? 'primary' : 'secondary'}
596+
data-tooltip={ this.createTooltip('cellRule')}
597+
onClick={() => this.handleHierarchyClick('main')}
598+
>
599+
{this.createLabel('cellRule')}
600+
</Fab>
601+
</div>
602+
603+
<NavigationChevronRight
604+
className='ml-2'
605+
color='disabled'
606+
/>
607+
608+
<div className='ml-2'>
609+
<Fab
610+
id="newSectionButton"
611+
variant="extended"
612+
style={{ minWidth: '100px' }}
613+
color={ page === 'mechanisms' ? 'secondary' : 'primary'}
614+
disabled={ selectedCellRule == undefined }
615+
onClick={ () => this.handleHierarchyClick('sections') }
616+
data-tooltip={ this.createTooltip('section')}
617+
>
617618
{this.createLabel('sections')}
618-
</p>
619-
</Button>
619+
</Fab>
620+
</div>
621+
620622

621-
<NavigationChevronRight style={styles.rightArrow}/>
623+
<NavigationChevronRight
624+
className='ml-2'
625+
color='disabled'
626+
/>
622627

623628
<NetPyNENewMechanism
624629
handleClick={this.handleNewMechanism}
@@ -648,4 +653,4 @@ export default class NetPyNECellRules extends React.Component {
648653
</Card>
649654
);
650655
}
651-
}
656+
}

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

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import MenuItem from '@material-ui/core/MenuItem';
33
import TextField from '@material-ui/core/TextField';
44
import FontIcon from '@material-ui/core/Icon';
55
import CardContent from '@material-ui/core/CardContent';
6-
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
6+
import BottomNavigation from '@material-ui/core/BottomNavigation';
7+
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
78
import Select from '../../../general/Select';
89
import ListComponent from '../../../general/List';
910
import NetPyNEField from '../../../general/NetPyNEField';
10-
import Dialog from '@material-ui/core/Dialog/Dialog';
11-
import Button from '@material-ui/core/Button';
1211

1312
import Utils from '../../../../Utils';
1413

@@ -93,28 +92,6 @@ export default class NetPyNESection extends React.Component {
9392
}
9493

9594
render () {
96-
var actions = [
97-
<Button
98-
variant="contained"
99-
color="primary"
100-
label={"BACK"}
101-
onTouchTap={() => this.setState({ errorMessage: undefined, errorDetails: undefined })}
102-
/>
103-
];
104-
var title = this.state.errorMessage;
105-
var children = this.state.errorDetails;
106-
var dialogPop = (this.state.errorMessage != undefined
107-
? <Dialog
108-
title={title}
109-
open={true}
110-
actions={actions}
111-
bodyStyle={{ overflow: 'auto' }}
112-
style={{ whiteSpace: "pre-wrap" }}>
113-
{children}
114-
</Dialog>
115-
: undefined
116-
);
117-
11895
var content = <div/>;
11996
var that = this;
12097
if (this.state.sectionId == "General") {
@@ -191,8 +168,8 @@ export default class NetPyNESection extends React.Component {
191168
return (
192169
<div>
193170

194-
<CardContent>
195-
<BottomNavigation value={this.state.selectedIndex}>
171+
<CardContent style={{ "zIndex": 0 }}>
172+
<BottomNavigation value={this.state.selectedIndex} showLabels>
196173
{bottomNavigationItems}
197174
</BottomNavigation>
198175
</CardContent>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class NetPyNESectionThumbnail extends React.Component {
3737

3838
let label;
3939
if (isHovered && selected) {
40-
label = <FontIcon className="fa fa-trash-o"/>
40+
label = <FontIcon className="fa fa-trash-o" style={{ color: "white" }}/>
4141
} else {
4242
label = name.length > 14 ? `${name.slice(0,10)}...` : name
4343
}

0 commit comments

Comments
 (0)