From d07b5c68c8d0ca809dd458d1d66ae4a1a7f46d2d Mon Sep 17 00:00:00 2001 From: irismarie Date: Fri, 16 Apr 2021 19:37:47 +0200 Subject: [PATCH] use IconButton in Table, remove tooltips for locked buttons --- src/common/icon-button.js | 15 +-- src/common/icon-toggle-button.js | 17 +-- src/common/table.js | 167 +++++++++++------------- src/componentconfig/config-table.js | 13 ++ src/dashboard/dashboard-button-group.js | 2 +- src/dashboard/dashboard-table.js | 12 ++ src/dashboard/dashboard.js | 11 ++ src/result/result-table.js | 10 ++ src/scenario/scenario.js | 12 ++ src/scenario/scenarios.js | 13 ++ 10 files changed, 158 insertions(+), 114 deletions(-) diff --git a/src/common/icon-button.js b/src/common/icon-button.js index e4876c9..2a65b95 100644 --- a/src/common/icon-button.js +++ b/src/common/icon-button.js @@ -25,25 +25,16 @@ import Icon from '../common/icon'; class IconButton extends React.Component { render() { - const altButtonStyle = { - marginLeft: '10px', - } - - const iconStyle = { - height: '30px', - width: '30px' - } - let btn = diff --git a/src/common/icon-toggle-button.js b/src/common/icon-toggle-button.js index cd421e0..e4f23d2 100644 --- a/src/common/icon-toggle-button.js +++ b/src/common/icon-toggle-button.js @@ -25,27 +25,18 @@ import Icon from './icon'; class IconToggleButton extends React.Component { render() { - const altButtonStyle = { - marginLeft: '10px', - } + let tooltip = this.props.checked ? this.props.tooltipChecked : this.props.tooltipUnchecked; return - {this.props.checked ? - this.props.tooltipChecked - : - this.props.tooltipUnchecked - } - } > + overlay={{tooltip}} > @@ -53,11 +44,13 @@ class IconToggleButton extends React.Component { : } diff --git a/src/common/table.js b/src/common/table.js index 6d36367..ea6494d 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -21,6 +21,7 @@ import { Table, Button, Form, Tooltip, OverlayTrigger } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import Icon from './icon'; import IconToggleButton from './icon-toggle-button'; +import IconButton from '../common/icon-button'; class CustomTable extends Component { @@ -47,6 +48,7 @@ class CustomTable extends Component { static addCell(data, index, child) { // add data to cell let content = null; + let childkey = 0; if ('dataKeys' in child.props) { for (let key of child.props.dataKeys) { @@ -92,7 +94,7 @@ class CustomTable extends Component { onClick={() => child.props.onDownload(contentkey)} disabled={child.props.onDownload == null}> {contentkey + ' '} - + ); }); @@ -136,19 +138,17 @@ class CustomTable extends Component { if (child.props.editButton && showEditButton) { cell.push( - Edit } - > - - - ); + child.props.onEdit(index)} + variant={'table-control-button'} + />) } if (child.props.checkbox) { @@ -171,7 +171,7 @@ class CustomTable extends Component { if (child.props.lockButton) { cell.push( child.props.onChangeLock(index)} checked={isLocked} checkedIcon='lock' @@ -185,84 +185,74 @@ class CustomTable extends Component { if (child.props.exportButton) { cell.push( - Export } - > - - - ); + child.props.onExport(index)} + variant={'table-control-button'} + />); } if (child.props.signalButton) { cell.push( - Autoconfigure Signals } - > - - - ); + child.props.onAutoConf(index)} + variant={'table-control-button'} + />); } if (child.props.duplicateButton) { cell.push( - Duplicate } > - - - ); + child.props.onDuplicate(index)} + variant={'table-control-button'} + />); } if (child.props.addRemoveFilesButton) { cell.push( - Add/remove File(s)} > - - - ); + child.props.onAddRemove(index)} + variant={'table-control-button'} + />); } if (child.props.downloadAllButton) { cell.push( - Download All Files} > - - - ); + child.props.onDownloadAll(index)} + variant={'table-control-button'} + />); } let showDeleteButton = child.props.showDeleteButton !== null && child.props.showDeleteButton !== undefined @@ -271,18 +261,17 @@ class CustomTable extends Component { if (child.props.deleteButton && showDeleteButton) { cell.push( - Delete } > - - - ); + child.props.onDelete(index)} + variant={'table-control-button'} + />); } return cell; diff --git a/src/componentconfig/config-table.js b/src/componentconfig/config-table.js index b711ab5..d5e1b8f 100644 --- a/src/componentconfig/config-table.js +++ b/src/componentconfig/config-table.js @@ -298,6 +298,15 @@ class ConfigTable extends Component { } render() { + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } + return (
{/*Component Configurations table*/} @@ -310,6 +319,8 @@ class ConfigTable extends Component { icon='plus' disabled={this.props.locked} hidetooltip={this.props.locked} + buttonStyle={buttonStyle} + iconStyle={iconStyle} /> diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js index 6f9843a..ddacfa0 100644 --- a/src/dashboard/dashboard-button-group.js +++ b/src/dashboard/dashboard-button-group.js @@ -64,7 +64,7 @@ class DashboardButtonGroup extends React.Component { render() { const buttons = []; - key = 0; + buttonkey = 0; if (this.props.editing) { buttons.push(this.getBtn("save", "Save changes", this.props.onSave)); diff --git a/src/dashboard/dashboard-table.js b/src/dashboard/dashboard-table.js index 9c76270..589366b 100644 --- a/src/dashboard/dashboard-table.js +++ b/src/dashboard/dashboard-table.js @@ -137,6 +137,14 @@ class DashboardTable extends Component { } render() { + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } return (
@@ -150,6 +158,8 @@ class DashboardTable extends Component { icon='plus' disabled={this.props.locked} hidetooltip={this.props.locked} + buttonStyle={buttonStyle} + iconStyle={iconStyle} /> diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index 9462bad..2d1aa75 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -487,6 +487,15 @@ class Dashboard extends Component { return
{"Loading Dashboard..."}
} + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '25px', + width: '25px' + } + const grid = this.state.dashboard.grid; const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen }); let draggable = this.state.editing; @@ -505,6 +514,8 @@ class Dashboard extends Component { tooltipChecked='Dashboard is locked, cannot be edited' tooltipUnchecked='Dashboard is unlocked, can be edited' disabled={true} + buttonStyle={buttonStyle} + iconStyle={iconStyle} /> diff --git a/src/result/result-table.js b/src/result/result-table.js index 9001b59..a38d160 100644 --- a/src/result/result-table.js +++ b/src/result/result-table.js @@ -154,6 +154,14 @@ class ResultTable extends Component { } render() { + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } return (
@@ -167,6 +175,8 @@ class ResultTable extends Component { icon='plus' disabled={this.props.locked} hidetooltip={this.props.locked} + buttonStyle={buttonStyle} + iconStyle={iconStyle} /> diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index d9d76d7..f19a01b 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -133,6 +133,14 @@ class Scenario extends React.Component { ############################################## */ render() { + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } const tableHeadingStyle = { paddingTop: '30px' @@ -151,6 +159,8 @@ class Scenario extends React.Component { tooltip={tooltip} onClick={this.onEditFiles.bind(this)} icon="file" + buttonStyle={buttonStyle} + iconStyle={iconStyle} />

@@ -165,6 +175,8 @@ class Scenario extends React.Component { tooltipChecked='Scenario is locked, cannot be edited' tooltipUnchecked='Scenario is unlocked, can be edited' disabled={this.state.currentUser.role !== "Admin"} + buttonStyle={buttonStyle} + iconStyle={iconStyle} />

diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js index 7f9c45b..89b52d9 100644 --- a/src/scenario/scenarios.js +++ b/src/scenario/scenarios.js @@ -244,6 +244,15 @@ class Scenarios extends Component { } render() { + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } + return

Scenarios @@ -252,12 +261,16 @@ class Scenarios extends Component { tooltip='Add Scenario' onClick={() => this.setState({ newModal: true })} icon='plus' + buttonStyle={buttonStyle} + iconStyle={iconStyle} /> this.setState({ importModal: true })} icon='upload' + buttonStyle={buttonStyle} + iconStyle={iconStyle} />