Skip to content

Commit 9622b64

Browse files
author
rodriguez-facundo
committed
#143 Remove old tooltip and replace it with material-ui tooltip, css styling
1 parent 77b1717 commit 9622b64

14 files changed

Lines changed: 158 additions & 194 deletions

File tree

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

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
3232
import RulePath from '../../general/RulePath'
3333
import ExpansionPanel from '../../general/ExpansionPanel'
3434
import Divider from '@material-ui/core/Divider';
35+
import Tooltip from '../../general/Tooltip';
3536

3637
const styles = ({ spacing }) => ({
3738
arrowRight : { marginLeft: spacing(1) },
@@ -658,32 +659,38 @@ export default class NetPyNECellRules extends React.Component {
658659
handleClick={() => this.setState({ page: 'main', selectedCellRule: undefined, selectedSection: undefined, selectedMechanism: undefined })}
659660
/>
660661
<div className='ml-2'>
661-
<Fab
662-
id="newCellRuleButton"
663-
style={{ width: 40, height: 40 }}
664-
color={ page == 'main' ? 'primary' : 'secondary'}
665-
data-tooltip={ this.createTooltip('cellRule')}
666-
onClick={() => this.handleHierarchyClick('main')}
667-
>
668-
{this.createLabel('cellRule')}
669-
</Fab>
662+
<Tooltip title={this.createTooltip('cellRule')} placement="top">
663+
<Fab
664+
id="newCellRuleButton"
665+
style={{ width: 40, height: 40 }}
666+
color={ page == 'main' ? 'primary' : 'secondary'}
667+
onClick={() => this.handleHierarchyClick('main')}
668+
>
669+
{this.createLabel('cellRule')}
670+
</Fab>
671+
</Tooltip>
670672
</div>
671673
<NavigationChevronRight
672674
className='ml-2'
673675
color='disabled'
674676
/>
675677
<div className='ml-2'>
676-
<Fab
677-
id="newSectionButton"
678-
variant="extended"
679-
style={{ minWidth: 100, height: 40 }}
680-
color={ page === 'mechanisms' ? 'secondary' : 'primary'}
681-
disabled={ selectedCellRule == undefined }
682-
onClick={ () => this.handleHierarchyClick('sections') }
683-
data-tooltip={ this.createTooltip('section')}
684-
>
685-
{this.createLabel('sections')}
686-
</Fab>
678+
<Tooltip title={this.createTooltip('section')} placement="top">
679+
<div>
680+
<Fab
681+
id="newSectionButton"
682+
variant="extended"
683+
style={{ minWidth: 100, height: 40 }}
684+
color={ page === 'mechanisms' ? 'secondary' : 'primary'}
685+
disabled={ selectedCellRule == undefined }
686+
onClick={ () => this.handleHierarchyClick('sections') }
687+
>
688+
{this.createLabel('sections')}
689+
</Fab>
690+
</div>
691+
692+
</Tooltip>
693+
687694
</div>
688695

689696
<NavigationChevronRight

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TextField from '@material-ui/core/TextField';
44
import FontIcon from '@material-ui/core/Icon';
55
import BottomNavigation from '@material-ui/core/BottomNavigation';
66
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
7-
7+
import Paper from '@material-ui/core/Paper'
88
import Utils from '../../../../Utils';
99

1010
import {
@@ -163,7 +163,7 @@ export default class NetPyNESection extends React.Component {
163163

164164
return (
165165
<div>
166-
<BottomNavigation style={{ borderRadius: '4px' }} value={this.state.selectedIndex} showLabels>
166+
<BottomNavigation component={Paper} showLabels style={{ borderRadius: '4px' }} value={this.state.selectedIndex} showLabels>
167167
{bottomNavigationItems}
168168
</BottomNavigation>
169169
<br />

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { withStyles } from '@material-ui/core/styles'
66
import Utils from '../../../../../Utils';
77
import ContentAdd from '@material-ui/icons/Add'
88
import { MechIcon } from '../../../../general/NetPyNEIcons'
9-
9+
import Tooltip from '../../../../general/Tooltip'
1010
const fontSize = 40
1111
const styles = ({ spacing, palette }) => ({
12-
icon : { color: palette.primary.main },
12+
icon : { color: palette.primary.main, cursor: 'pointer' },
1313
disabledIcon : { color: '#d1d1d1', cursor: 'auto' },
1414
iconContent: { position: 'absolute', color: 'white' },
1515
cogIconContent: {
@@ -87,24 +87,25 @@ class NetPyNENewMechanism extends React.Component {
8787
render () {
8888
const { disabled, classes, className } = this.props;
8989
const { open, anchorEl, mechanisms } = this.state;
90-
const tooltip = disabled ? {} : { 'data-tooltip': this.createTooltip() }
90+
const tooltip = disabled ? '' : this.createTooltip()
9191
return (
9292
<div className={className}>
93-
<div
94-
id="newMechButton"
95-
className={disabled ? classes.disabledIcon : classes.icon}
96-
onClick={ e => !disabled && this.handleButtonClick(e.currentTarget) }
97-
{...tooltip}
98-
>
99-
<div>
100-
<div className={classes.container}>
101-
<MechIcon color={disabled ? "disabled" : "primary"} style={{ width: fontSize, height: fontSize, overflow: 'visible' }} className={classes.cogIcon}/>
102-
<span className={classes.cogIconContent}>
103-
{this.createLabel(classes)}
104-
</span>
93+
<Tooltip title={tooltip} placement="top">
94+
<div
95+
id="newMechButton"
96+
className={disabled ? classes.disabledIcon : classes.icon}
97+
onClick={ e => !disabled && this.handleButtonClick(e.currentTarget) }
98+
>
99+
<div>
100+
<div className={classes.container}>
101+
<MechIcon color={disabled ? "disabled" : "primary"} style={{ width: fontSize, height: fontSize, overflow: 'visible' }} className={classes.cogIcon}/>
102+
<span className={classes.cogIconContent}>
103+
{this.createLabel(classes)}
104+
</span>
105+
</div>
105106
</div>
106107
</div>
107-
</div>
108+
</Tooltip>
108109

109110

110111
<Menu

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
22
import FontIcon from '@material-ui/core/Icon';
33
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
44
import { withStyles } from '@material-ui/core/styles'
5-
5+
import Paper from '@material-ui/core/Paper'
6+
import { bgDark } from '../../../theme'
67
import {
78
NetPyNEField,
89
NetPyNECheckbox,
@@ -288,11 +289,11 @@ class NetPyNESimConfig extends React.Component {
288289
const { classes } = this.props
289290
return (
290291
<div className={ classes.root }>
291-
<BottomNavigation showLabels className={classes.bottomNav} value={this.state.selectedIndex}>
292+
<BottomNavigation component={Paper} showLabels className={classes.bottomNav} value={this.state.selectedIndex}>
292293
<BottomNavigationAction id={"configGeneral"} key={'General'} label={'General'} icon={<FontIcon className={"fa fa-bars"} />} onClick={() => this.select(0, 'General')} />
293294
<BottomNavigationAction id={"configRecord"} key={'Record'} label={'Record'} icon={<FontIcon className={"fa fa-circle"} />} onClick={() => this.select(1, 'Record')} />
294295
<BottomNavigationAction id={"configSaveConfiguration"} key={'SaveConfiguration'} label={'Save Configuration'} icon={<FontIcon className={"fa fa-floppy-o"} />} onClick={() => this.select(2, 'SaveConfiguration')} />
295-
<BottomNavigationAction id={"confignetParams"} key={'netParams'} label={'Network Attributes'} icon={<FontIcon className={"fa fa-cog"} />} onClick={() => this.select(4, 'netParams')} />
296+
<BottomNavigationAction id={"confignetParams"} key={'netParams'} label={'Network Attributes'} icon={<FontIcon className={"fa fa-cog"} />} onClick={() => this.select(3, 'netParams')} />
296297
</BottomNavigation>
297298
<GridLayout>
298299
<div/>
@@ -305,9 +306,14 @@ class NetPyNESimConfig extends React.Component {
305306
}
306307
}
307308

308-
const styles = ({ shape }) => ({
309-
root: { height: 'calc(100% - 58px)' },
310-
bottomNav: shape.borderRadius
309+
const styles = ({ shape, spacing }) => ({
310+
root: { height: `calc(100% - 56px - ${spacing(1)}px)` },
311+
bottomNav: {
312+
borderRadius: shape.borderRadius,
313+
backgroundColor: bgDark,
314+
marginBottom: spacing(1)
315+
},
316+
311317
})
312318

313319
export default withStyles(styles)(NetPyNESimConfig)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import DialogContent from "@material-ui/core/DialogContent";
99
import DialogContentText from "@material-ui/core/DialogContentText";
1010
import DialogTitle from "@material-ui/core/DialogTitle";
1111
import MenuItem from "@material-ui/core/MenuItem";
12-
12+
import Paper from '@material-ui/core/Paper'
1313
import {
1414
NetPyNESelectField,
1515
NetPyNEField,
@@ -383,7 +383,7 @@ export default class NetPyNEConnectivityRule extends React.Component {
383383

384384
return (
385385
<div>
386-
<BottomNavigation style={{ borderRadius: '4px' }} value={this.state.selectedIndex}>
386+
<BottomNavigation component={Paper} showLabels style={{ borderRadius: '4px' }} value={this.state.selectedIndex}>
387387
{bottomNavigationItems}
388388
</BottomNavigation>
389389
<br />

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Menu from '@material-ui/core/Menu';
33
import MenuItem from '@material-ui/core/MenuItem';
44
import ContentAdd from '@material-ui/icons/Add';
55
import Fab from '@material-ui/core/Fab';
6+
import Tooltip from '../../general/Tooltip'
67

78
export default class NetPyNENewPlot extends React.Component {
89

@@ -27,9 +28,12 @@ export default class NetPyNENewPlot extends React.Component {
2728

2829
render () {
2930
return <div>
30-
<Fab size='small' color='primary' onClick={this.handleButtonClick}>
31-
<ContentAdd style={{ color: 'white' }}/>
32-
</Fab>
31+
<Tooltip title="Add new plot" placement="top">
32+
<Fab size='small' color='primary' onClick={this.handleButtonClick}>
33+
<ContentAdd style={{ color: 'white' }}/>
34+
</Fab>
35+
</Tooltip>
36+
3337
<Menu
3438
open={Boolean(this.state.anchorEl)}
3539
anchorEl={this.state.anchorEl}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
1313
import DialogTitle from '@material-ui/core/DialogTitle';
1414

1515
import { withStyles } from '@material-ui/core/styles';
16-
16+
import Paper from '@material-ui/core/Paper'
1717
import {
1818
Dimensions,
1919
NetPyNEField,
@@ -221,7 +221,7 @@ class NetPyNEPopulation extends React.Component {
221221

222222
return (
223223
<div>
224-
<BottomNavigation style={{ borderRadius: '4px' }} value={this.state.selectedIndex}>
224+
<BottomNavigation component={Paper} showLabels style={{ borderRadius: '4px' }} value={this.state.selectedIndex}>
225225
{this.getModelParameters()}
226226
</BottomNavigation>
227227
<br />

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TextField from '@material-ui/core/TextField';
44
import CondsIcon from '@material-ui/icons/LocalOffer';
55
import StimTargetIcon from '@material-ui/icons/Reorder';
66
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
7-
7+
import Paper from '@material-ui/core/Paper'
88
import Dialog from '@material-ui/core/Dialog/Dialog';
99
import Button from '@material-ui/core/Button';
1010

@@ -253,7 +253,7 @@ export default class NetPyNEStimulationTarget extends React.Component {
253253

254254
return (
255255
<div>
256-
<BottomNavigation style={{ borderRadius: '4px' }} value={this.state.selectedIndex}>
256+
<BottomNavigation component={Paper} showLabels style={{ borderRadius: '4px' }} value={this.state.selectedIndex}>
257257
{bottomNavigationItems}
258258
</BottomNavigation>
259259
<br />

‎webapp/components/general/List.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
22
import TextField from '@material-ui/core/TextField';
33
import IconButton from '@material-ui/core/IconButton';
44
import Icon from '@material-ui/core/Icon';
5-
5+
import Tooltip from './Tooltip'
66
/**
77
* Generic List/Dict Component
88
*/
@@ -244,14 +244,16 @@ export default class ListComponent extends Component {
244244
{!this.state.newItemErrorText
245245
&& (
246246
<span>
247-
<IconButton
248-
id={this.props.id + "AddButton"}
249-
className={'listButtonLarge'}
250-
onClick={this.addChild}
251-
data-tooltip='Add item to the list'
252-
>
253-
<Icon className={'fa fa-plus-circle listIcon'} />
254-
</IconButton>
247+
<Tooltip title="Add item to the list" placement="top">
248+
<IconButton
249+
id={this.props.id + "AddButton"}
250+
className={'listButtonLarge'}
251+
onClick={this.addChild}
252+
>
253+
<Icon className={'fa fa-plus-circle listIcon'} />
254+
</IconButton>
255+
</Tooltip>
256+
255257
</span>
256258
)
257259
}

‎webapp/components/general/NetPyNEAddNew.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import ContentAdd from '@material-ui/icons/Add';
33
import Fab from '@material-ui/core/Fab';
44
import { withStyles } from '@material-ui/core/styles';
5+
import Tooltip from './Tooltip'
56

67
const styles = ({ spacing, palette }) => ({
78
root : { marginLeft: spacing(1), },
@@ -26,16 +27,18 @@ class NetPyNEAddNew extends React.Component {
2627
render () {
2728
const { classes } = this.props
2829
return (
29-
<Fab
30-
size="small"
31-
id={this.props.id}
32-
onClick={this.handleClick}
33-
data-tooltip="Create rule"
34-
color='primary'
35-
className={classes.root}
36-
>
37-
<ContentAdd className={classes.plus}/>
38-
</Fab>
30+
<Tooltip title="Create rule" placement="top">
31+
<Fab
32+
size="small"
33+
color='primary'
34+
id={this.props.id}
35+
className={classes.root}
36+
onClick={this.handleClick}
37+
>
38+
<ContentAdd className={classes.plus}/>
39+
</Fab>
40+
</Tooltip>
41+
3942
);
4043
}
4144
}

0 commit comments

Comments
 (0)