Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

use IconButton in Table, remove tooltips for locked buttons

Browse source
This commit is contained in:
irismarie 2021-04-16 19:37:47 +02:00
parent 18af356dd5
commit d07b5c68c8
10 changed files with 158 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/common/icon-button.js
View file

@ -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 = <Button
variant='light'
variant={this.props.variant ? this.props.variant : 'light'}
disabled={this.props.disabled}
onClick={this.props.onClick}
style={this.props.buttonStyle ? this.props.buttonStyle : altButtonStyle}
style={this.props.buttonStyle}
>
<Icon
icon={this.props.icon}
classname={'icon-color'}
style={this.props.iconStyle ? this.props.iconStyle : iconStyle}
style={this.props.iconStyle}
/>
</Button>

17
src/common/icon-toggle-button.js
View file

@ -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 <OverlayTrigger
key={this.props.ikey}
placement={'top'}
overlay={
<Tooltip id={`tooltip-${"add"}`}>
{this.props.checked ?
this.props.tooltipChecked
:
this.props.tooltipUnchecked
}
</Tooltip>} >
overlay={<Tooltip id={`tooltip-${this.props.ikey}`}>{tooltip}</Tooltip>} >
<ButtonGroup toggle>
<ToggleButton
variant='light'
type='checkbox'
onChange={this.props.onChange}
style={altButtonStyle}
style={this.props.buttonStyle}
disabled={this.props.disabled}
checked={this.props.checked}
>
@ -53,11 +44,13 @@ class IconToggleButton extends React.Component {
<Icon
icon={this.props.checkedIcon}
classname={'icon-color'}
style={this.props.iconStyle}
/>
:
<Icon
icon={this.props.uncheckedIcon}
classname={'icon-color'}
style={this.props.iconStyle}
/>
}
</ToggleButton>

167
src/common/table.js
View file

@ -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 + ' '}
<Icon icon='file-download' />
<Icon icon='file-download' classname={'icon-color'}/>
</Button>
</OverlayTrigger>);
});
@ -136,19 +138,17 @@ class CustomTable extends Component {
if (child.props.editButton && showEditButton) {
cell.push(
<OverlayTrigger
key={0}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"edit"}`}> Edit </Tooltip>}
>
<Button
variant='table-control-button'
onClick={() => child.props.onEdit(index)}
disabled={child.props.onEdit == null || isLocked} >
<Icon icon='edit' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'edit'}
disabled={child.props.onEdit == null || isLocked}
hidetooltip={isLocked}
tooltip={"Edit"}
tipPlacement={'bottom'}
onClick={() => 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(
<IconToggleButton
ikey={0}
ikey={childkey++}
onChange={() => child.props.onChangeLock(index)}
checked={isLocked}
checkedIcon='lock'
@ -185,84 +185,74 @@ class CustomTable extends Component {
if (child.props.exportButton) {
cell.push(
<OverlayTrigger
key={1}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"export"}`}> Export </Tooltip>}
>
<Button
variant='table-control-button'
onClick={() => child.props.onExport(index)}
disabled={child.props.onExport == null}>
<Icon icon='download' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'download'}
disabled={child.props.onExport == null}
tooltip={"Export"}
tipPlacement={'bottom'}
onClick={() => child.props.onExport(index)}
variant={'table-control-button'}
/>);
}
if (child.props.signalButton) {
cell.push(
<OverlayTrigger
key={1}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"signal"}`}> Autoconfigure Signals </Tooltip>}
>
<Button
variant='table-control-button'
onClick={() => child.props.onAutoConf(index)}
disabled={child.props.onAutoConf == null}>
<Icon icon='wave-square' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'wave-square'}
disabled={child.props.onAutoConf == null}
tooltip={"Autoconfigure Signals"}
tipPlacement={'bottom'}
onClick={() => child.props.onAutoConf(index)}
variant={'table-control-button'}
/>);
}
if (child.props.duplicateButton) {
cell.push(
<OverlayTrigger
key={2}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"duplicate"}`}> Duplicate </Tooltip>} >
<Button
variant='table-control-button'
onClick={() => child.props.onDuplicate(index)}
disabled={child.props.onDuplicate == null || isLocked}>
<Icon icon='copy' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'copy'}
disabled={child.props.onDuplicate == null || isLocked}
hidetooltip={isLocked}
tooltip={"Duplicate"}
tipPlacement={'bottom'}
onClick={() => child.props.onDuplicate(index)}
variant={'table-control-button'}
/>);
}
if (child.props.addRemoveFilesButton) {
cell.push(
<OverlayTrigger
key={3}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"export"}`}>Add/remove File(s)</Tooltip>} >
<Button
variant='table-control-button'
onClick={() => child.props.onAddRemove(index)}
disabled={child.props.onAddRemove == null || isLocked}>
<Icon icon='file' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'file'}
disabled={child.props.onAddRemove == null || isLocked}
hidetooltip={isLocked}
tooltip={"Add/remove File(s)"}
tipPlacement={'bottom'}
onClick={() => child.props.onAddRemove(index)}
variant={'table-control-button'}
/>);
}
if (child.props.downloadAllButton) {
cell.push(
<OverlayTrigger
key={4}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"export"}`}>Download All Files</Tooltip>} >
<Button
variant='table-control-button'
onClick={() => child.props.onDownloadAll(index)}
disabled={child.props.onDownloadAll == null}>
<Icon icon='file-download' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'file-download'}
disabled={child.props.onDownloadAll == null}
tooltip={"Download All Files"}
tipPlacement={'bottom'}
onClick={() => 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(
<OverlayTrigger
key={5}
placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"delete"}`}> Delete </Tooltip>} >
<Button
variant='table-control-button'
onClick={() => child.props.onDelete(index)}
disabled={child.props.onDelete == null || isLocked}>
<Icon icon='trash' />
</Button>
</OverlayTrigger>
);
<IconButton
key={childkey++}
ikey={childkey++}
icon={'trash'}
disabled={child.props.onDelete == null || isLocked}
hidetooltip={isLocked}
tooltip={"Delete"}
tipPlacement={'bottom'}
onClick={() => child.props.onDelete(index)}
variant={'table-control-button'}
/>);
}
return cell;

13
src/componentconfig/config-table.js
View file

@ -298,6 +298,15 @@ class ConfigTable extends Component {
}
render() {
const buttonStyle = {
marginLeft: '10px',
}
const iconStyle = {
height: '30px',
width: '30px'
}
return (
<div>
{/*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}
/>
<IconButton
ikey={1}
@ -318,6 +329,8 @@ class ConfigTable extends Component {
icon='upload'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
</span>
</h2>

2
src/dashboard/dashboard-button-group.js
View file

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

12
src/dashboard/dashboard-table.js
View file

@ -137,6 +137,14 @@ class DashboardTable extends Component {
}
render() {
const buttonStyle = {
marginLeft: '10px',
}
const iconStyle = {
height: '30px',
width: '30px'
}
return (
<div>
@ -150,6 +158,8 @@ class DashboardTable extends Component {
icon='plus'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
<IconButton
ikey={1}
@ -158,6 +168,8 @@ class DashboardTable extends Component {
icon='upload'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
</span>
</h2>

11
src/dashboard/dashboard.js
View file

@ -487,6 +487,15 @@ class Dashboard extends Component {
return <div className="section-title"> <span>{"Loading Dashboard..."}</span> </div>
}
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}
/>
</span>
</h2>

10
src/result/result-table.js
View file

@ -154,6 +154,14 @@ class ResultTable extends Component {
}
render() {
const buttonStyle = {
marginLeft: '10px',
}
const iconStyle = {
height: '30px',
width: '30px'
}
return (
<div>
@ -167,6 +175,8 @@ class ResultTable extends Component {
icon='plus'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
</span>
</h2>

12
src/scenario/scenario.js
View file

@ -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}
/>
</div>
<h1>
@ -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}
/>
</span>
</h1>

13
src/scenario/scenarios.js
View file

@ -244,6 +244,15 @@ class Scenarios extends Component {
}
render() {
const buttonStyle = {
marginLeft: '10px',
}
const iconStyle = {
height: '30px',
width: '30px'
}
return <div className='section'>
<h1>Scenarios
<span className='icon-button'>
@ -252,12 +261,16 @@ class Scenarios extends Component {
tooltip='Add Scenario'
onClick={() => this.setState({ newModal: true })}
icon='plus'
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
<IconButton
ikey={1}
tooltip='Import Scenario'
onClick={() => this.setState({ importModal: true })}
icon='upload'
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
</span>
</h1>