From 608acb4577885686e004fbe58163af9b2d84d9ba Mon Sep 17 00:00:00 2001 From: irismarie 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 {this.props.tooltip}} > - - + let btn = + + let button; + if (!this.props.tooltip || this.props.hidetooltip) { + button = btn; + } else { + button = {this.props.tooltip}} > + {btn} + + } + + 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 + } else { + return } + } + render() { const buttons = []; - let key = 0; - - /*if (this.props.fullscreen) { - return null; - }*/ + key = 0; if (this.props.editing) { - buttons.push( - Save changes } > - - , - Discard changes } > - - - ); + 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( - Change to fullscreen view } > - - - ); + buttons.push(this.getBtn("expand", "Change to fullscreen view", this.props.onFullscreen)); } else { - buttons.push( - Back to normal view } > - - - ); + buttons.push(this.getBtn("compress", "Back to normal view", this.props.onFullscreen)); } if (this.props.paused) { - buttons.push( - Continue simulation } > - - - ); + buttons.push(this.getBtn("play", "Continue simulation", this.props.onUnpause)); } else { - buttons.push( - Pause simulation } > - - - ); + 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( - {filesTooltip}}> - - - ); - - buttons.push( - Add, edit or delete input signals }> - - - ); - - buttons.push( - Add, edit or delete output signals }> - - - ); - - buttons.push( - Add widgets and edit layout }> - - - ); + 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)); } }