From 6dfd4e2059dd8217c6bc8d8d853924e1073b2dff Mon Sep 17 00:00:00 2001
From: Sandro Weber <webers@in.tum.de>
Date: Fri, 21 May 2021 19:06:31 +0200
Subject: [PATCH] more tool button design options
---
.../simulation-tools-service.js | 15 +++++++++--
.../simulation-view/simulation-view.css | 9 +++++++
.../simulation-view/simulation-view.js | 25 +++++++++++++++----
3 files changed, 42 insertions(+), 7 deletions(-)
diff --git a/src/components/simulation-view/simulation-tools-service.js b/src/components/simulation-view/simulation-tools-service.js
index 8267d4e..243460a 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 d683442..0477b6a 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 ff838e6..8c903ae 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'>
--
GitLab