more tool button design options

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>;
     }
   }
 });

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%;

src/components/simulation-view/simulation-view.js

 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'>