From 608acb4577885686e004fbe58163af9b2d84d9ba Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 16 Apr 2021 17:40:15 +0200
Subject: [PATCH] use IconButton in DashboardButtonGroup

---
 src/common/icon-button.js               |  43 ++++---
 src/dashboard/dashboard-button-group.js | 144 +++++++++---------------
 2 files changed, 79 insertions(+), 108 deletions(-)

diff --git a/src/common/icon-button.js b/src/common/icon-button.js
index 1f9ed33..e4876c9 100644
--- a/src/common/icon-button.js
+++ b/src/common/icon-button.js
@@ -34,23 +34,32 @@ class IconButton extends React.Component {
       width: '30px'
     }
 
-    return <OverlayTrigger
-      key={this.props.ikey}
-      placement={'top'}
-      overlay={<Tooltip id={`tooltip-${"add"}`}>{this.props.tooltip}</Tooltip>} >
-      <Button
-        variant='light'
-        onClick={this.props.onClick}
-        style={altButtonStyle}
-        disabled={this.props.disabled}
-      >
-        <Icon
-          icon={this.props.icon}
-          classname={'icon-color'}
-          style={iconStyle}
-        />
-      </Button>
-    </OverlayTrigger>
+    let btn = <Button
+      variant='light'
+      disabled={this.props.disabled}
+      onClick={this.props.onClick}
+      style={this.props.buttonStyle ? this.props.buttonStyle : altButtonStyle}
+    >
+      <Icon
+        icon={this.props.icon}
+        classname={'icon-color'}
+        style={this.props.iconStyle ? this.props.iconStyle : iconStyle}
+      />
+    </Button>
+
+    let button;
+    if (!this.props.tooltip || this.props.hidetooltip) {
+      button = btn;
+    } else {
+      button = <OverlayTrigger
+        key={this.props.ikey}
+        placement={this.props.tipPlacement ? this.props.tipPlacement : 'top'}
+        overlay={<Tooltip id={`tooltip-${this.props.ikey}`}>{this.props.tooltip}</Tooltip>} >
+       {btn}
+      </OverlayTrigger>
+    }
+
+    return button;
   }
 }
 
diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index ba63cfe..6f9843a 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -17,115 +17,77 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button,OverlayTrigger, Tooltip } from 'react-bootstrap';
-import Icon from "../common/icon";
+import IconButton from '../common/icon-button';
+
+const buttonStyle = {
+  marginLeft: '12px',
+  height: '44px',
+  width: '35px',
+};
+
+const iconStyle = {
+  height: '25px',
+  width: '25px'
+}
+
+let buttonkey = 0;
 
 class DashboardButtonGroup extends React.Component {
-  render() {
-    const buttonStyle = {
-      marginLeft: '12px',
-      height: '44px',
-      width : '35px',
-    };
 
-    const iconStyle = {
-      height: '25px',
-      width : '25px'
+  getBtn(icon, tooltip, clickFn, locked = false) {
+    if (locked) {
+      return <IconButton
+        key={buttonkey++}
+        ikey={buttonkey}
+        icon={icon}
+        disabled={true}
+        hidetooltip={true}
+        tooltip={tooltip}
+        tipPlacement={'bottom'}
+        onClick={clickFn}
+        buttonStyle={buttonStyle}
+        iconStyle={iconStyle}
+      />
+    } else {
+      return <IconButton
+        key={buttonkey++}
+        ikey={buttonkey}
+        icon={icon}
+        tooltip={tooltip}
+        tipPlacement={'bottom'}
+        onClick={clickFn}
+        buttonStyle={buttonStyle}
+        iconStyle={iconStyle}
+      />
     }
+  }
 
+  render() {
     const buttons = [];
-    let key = 0;
-
-    /*if (this.props.fullscreen) {
-      return null;
-    }*/
+    key = 0;
 
     if (this.props.editing) {
-      buttons.push(
-        <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"save"}`}> Save changes </Tooltip>} >
-        <Button variant= 'light' size="lg" key={key} onClick={this.props.onSave} style={buttonStyle}>
-          <Icon icon="save" classname='icon-color' style={iconStyle} />
-        </Button>
-        </OverlayTrigger>,
-        <OverlayTrigger key={key++}  placement={'bottom'} overlay={<Tooltip id={`tooltip-${"cancel"}`}> Discard changes </Tooltip>} >
-        <Button key={key} variant= 'light' size="lg" onClick={this.props.onCancel} style={buttonStyle}>
-          <Icon icon="times" classname='icon-color' style={iconStyle}/>
-        </Button>
-        </OverlayTrigger>
-      );
+      buttons.push(this.getBtn("save", "Save changes", this.props.onSave));
+      buttons.push(this.getBtn("times", "Discard changes", this.props.onCancel));
     } else {
       if (this.props.fullscreen !== true) {
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"expand"}`}> Change to fullscreen view </Tooltip>} >
-          <Button key={key} variant= 'light' size="lg" onClick={this.props.onFullscreen} style={buttonStyle}>
-            <Icon icon="expand" classname='icon-color' style={iconStyle}/>
-          </Button>
-          </OverlayTrigger>
-        );
+        buttons.push(this.getBtn("expand", "Change to fullscreen view", this.props.onFullscreen));
       } else {
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"compress"}`}> Back to normal view </Tooltip>} >
-            <Button key={key} variant= 'light' size="lg" onClick={this.props.onFullscreen} style={buttonStyle}>
-              <Icon icon="compress" classname='icon-color' style={iconStyle}/>
-            </Button>
-          </OverlayTrigger>
-        );
+        buttons.push(this.getBtn("compress", "Back to normal view", this.props.onFullscreen));
       }
 
       if (this.props.paused) {
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"play"}`}> Continue simulation </Tooltip>} >
-          <Button key={key} variant= 'light' size="lg" onClick={this.props.onUnpause} style={buttonStyle}>
-            <Icon icon="play" classname='icon-color' style={iconStyle}/>
-          </Button>
-          </OverlayTrigger>
-        );
+        buttons.push(this.getBtn("play", "Continue simulation", this.props.onUnpause));
       } else {
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"pause"}`}> Pause simulation </Tooltip>} >
-          <Button key={key} variant= 'light' size="lg" onClick={this.props.onPause} style={buttonStyle}>
-            <Icon icon="pause" classname='icon-color' style={iconStyle}/>
-          </Button>
-          </OverlayTrigger>
-        );
+        buttons.push(this.getBtn("pause", "Pause simulation", this.props.onPause));
       }
 
       if (this.props.fullscreen !== true) {
-        let filesTooltip = this.props.locked ? "View files of scenario" : "Add, edit or delete files of scenario";
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'}
-                          overlay={<Tooltip id={`tooltip-${"file"}`}>{filesTooltip}</Tooltip>}>
-            <Button key={key} variant='light' size="lg" onClick={this.props.onEditFiles} style={buttonStyle}>
-              <Icon icon="file" classname='icon-color' style={iconStyle}/>
-            </Button>
-          </OverlayTrigger>
-        );
-
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete input signals </Tooltip>}>
-            <Button key={key} variant='light' size="lg" onClick={this.props.onEditInputSignals} style={buttonStyle} disabled={this.props.locked}>
-              <Icon icon="sign-in-alt" classname='icon-color' style={iconStyle}/>
-            </Button>
-          </OverlayTrigger>
-        );
-
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'}
-                          overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete output signals </Tooltip>}>
-            <Button key={key} variant='light' size="lg" onClick={this.props.onEditOutputSignals} style={buttonStyle} disabled={this.props.locked}>
-              <Icon icon="sign-out-alt" classname='icon-color' style={iconStyle}/>
-            </Button>
-          </OverlayTrigger>
-        );
-
-        buttons.push(
-          <OverlayTrigger key={key++} placement={'bottom'}
-                          overlay={<Tooltip id={`tooltip-${"layout"}`}> Add widgets and edit layout </Tooltip>}>
-            <Button key={key} variant='light' size="lg" onClick={this.props.onEdit} style={buttonStyle} disabled={this.props.locked}>
-              <Icon icon="pen" classname='icon-color' style={iconStyle}/>
-            </Button>
-          </OverlayTrigger>
-        );
+        let tooltip = this.props.locked ? "View files of scenario" : "Add, edit or delete files of scenario";
+        buttons.push(this.getBtn("file", tooltip, this.props.onEditFiles));
+        buttons.push(this.getBtn("sign-in-alt", "Add, edit or delete input signals", this.props.onEditInputSignals, this.props.locked));
+        buttons.push(this.getBtn("sign-out-alt", "Add, edit or delete output signals", this.props.onEditOutputSignals, this.props.locked));
+        buttons.push(this.getBtn("pen", "Add widgets and edit layout", this.props.onEdit, this.props.locked));
       }
     }