diff --git a/src/components/simulation-view/simulation-tools-service.js b/src/components/simulation-view/simulation-tools-service.js index 8267d4edf40b40b78cf7b62876edfc13e8f9d933..243460adf3559319af97de995119f9918fd796da 100644 --- a/src/components/simulation-view/simulation-tools-service.js +++ b/src/components/simulation-view/simulation-tools-service.js @@ -66,18 +66,29 @@ SimulationToolsService.TOOLS = Object.freeze({ }, flexlayoutFactoryCb: () => { return <iframe src='http://localhost:8000' title='NEST Desktop' />; + }, + getIcon: () => { + return <div> + <img src={'https://www.nest-simulator.org/wp-content/uploads/2015/03/nest_logo.png'} + alt="NEST Desktop" + style={{width: 40+ 'px', height: 20 + 'px'}} /> + <span>Desktop</span> + </div>; } }, - TEST_NEST_SERVER_DOCU: { + TEST_NRP_CORE_DOCU: { singleton: true, flexlayoutNode: { 'type': 'tab', - 'name': 'NRP-Core Documentation', + 'name': 'NRP-Core Docs', 'component': 'nrp-core-docu' }, flexlayoutFactoryCb: () => { return <iframe src='https://hbpneurorobotics.bitbucket.io/index.html' title='NRP-Core Documentation' />; + }, + getIcon: () => { + return <span>NRP-Core Docs</span>; } } }); diff --git a/src/components/simulation-view/simulation-view.css b/src/components/simulation-view/simulation-view.css index d68344214c9ee5d5667dc7477a2c798b460d669c..0477b6a320fa880e5c75effee9ab75c30a21de48 100644 --- a/src/components/simulation-view/simulation-view.css +++ b/src/components/simulation-view/simulation-view.css @@ -63,6 +63,15 @@ font-weight: bold; } +.simulation-tool-button { + width: 60px; + height: 60px; + margin: 2px; + padding: 2px; + font-size: 0.7em; + font-weight: bold; +} + iframe { width: 100%; height: 100%; diff --git a/src/components/simulation-view/simulation-view.js b/src/components/simulation-view/simulation-view.js index ff838e6d7e128ec4bf41c77a1ff2e46880bb190f..8c903ae0aca7ccc9e3aa00be587783fd7f7bfd75 100644 --- a/src/components/simulation-view/simulation-view.js +++ b/src/components/simulation-view/simulation-view.js @@ -1,5 +1,6 @@ import React from 'react'; import FlexLayout from 'flexlayout-react'; +import { OverlayTrigger, Tooltip, Button } from 'react-bootstrap'; import { RiPlayFill, RiLayout6Line } from 'react-icons/ri'; import { GiExitDoor } from 'react-icons/gi'; import { TiMediaRecord } from 'react-icons/ti'; @@ -85,11 +86,25 @@ export default class SimulationView extends React.Component { </div> <div className='simulation-view-sidebar'> {Array.from(SimulationToolsService.instance.tools.values()).map(tool => { - return (<button onMouseDown={() => { - SimulationToolsService.instance.startToolDrag( - tool.flexlayoutNode, - this.refLayout); - }}>{tool.flexlayoutNode.name}</button>); + return ( + <OverlayTrigger + key={`overlaytrigger-${tool.flexlayoutNode.component}`} + placement={'right'} + overlay={ + <Tooltip id={`tooltip-${tool.flexlayoutNode.component}`}> + {tool.flexlayoutNode.name} + </Tooltip> + } + > + <Button key={tool.flexlayoutNode.component} + className="simulation-tool-button" + onMouseDown={() => { + SimulationToolsService.instance.startToolDrag( + tool.flexlayoutNode, + this.refLayout); + }}>{tool.getIcon && tool.getIcon()}</Button> + </OverlayTrigger> + ); })} </div> <div className='simulation-view-mainview'>