mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: adding tooltips , cosmetic changes #235
This commit is contained in:
Laura Fuentes Grau
parent
fe731815cb
commit
a20dff47a9
5 changed files with 46 additions and 25 deletions
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import _ from 'lodash';
|
||||
import { Table, Button, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
|
||||
import { Table, Button, FormControl, FormLabel, FormCheck, Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Icon from './icon';
|
||||
|
||||
|
|
@ -103,11 +103,13 @@ class CustomTable extends Component {
|
|||
|
||||
// add buttons
|
||||
if (child.props.editButton) {
|
||||
cell.push(<Button variant='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Icon icon='edit' /></Button>);
|
||||
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}><Icon icon='edit' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
if (child.props.deleteButton) {
|
||||
cell.push(<Button variant='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button>);
|
||||
cell.push(<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"delete"}`}> Delete </Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
if (child.props.checkbox) {
|
||||
|
|
@ -117,7 +119,8 @@ class CustomTable extends Component {
|
|||
}
|
||||
|
||||
if (child.props.exportButton) {
|
||||
cell.push(<Button variant='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Icon icon='download' /></Button>);
|
||||
cell.push(<OverlayTrigger key={2} 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>);
|
||||
}
|
||||
|
||||
return cell;
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { Button,OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import Icon from "../common/icon";
|
||||
|
||||
class DashboardButtonGroup extends React.Component {
|
||||
render() {
|
||||
const buttonStyle = {
|
||||
marginLeft: '8px'
|
||||
marginLeft: '12px',
|
||||
};
|
||||
|
||||
const buttons = [];
|
||||
|
|
@ -35,46 +35,60 @@ class DashboardButtonGroup extends React.Component {
|
|||
|
||||
if (this.props.editing) {
|
||||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onSave} style={buttonStyle}>
|
||||
<Icon icon="save" /> Save
|
||||
</Button>,
|
||||
<Button key={key++} onClick={this.props.onCancel} style={buttonStyle}>
|
||||
<Icon icon="times" /> Cancel
|
||||
<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" />
|
||||
</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" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
} else {
|
||||
if (this.props.fullscreen !== true) {
|
||||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onFullscreen} style={buttonStyle}>
|
||||
<Icon icon="expand" /> Fullscreen
|
||||
<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" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.paused) {
|
||||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onUnpause} style={buttonStyle}>
|
||||
<Icon icon="play" /> Live
|
||||
<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" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
} else {
|
||||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onPause} style={buttonStyle}>
|
||||
<Icon icon="pause" /> Pause
|
||||
<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" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onEditFiles} style={buttonStyle}>
|
||||
<Icon icon="file" /> Edit Files
|
||||
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete files of scenario </Tooltip>} >
|
||||
<Button key={key} variant= 'light' size="lg" onClick={this.props.onEditFiles} style={buttonStyle}>
|
||||
<Icon icon="file" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
||||
buttons.push(
|
||||
<Button key={key++} onClick={this.props.onEdit} style={buttonStyle}>
|
||||
<Icon icon="pen" /> Edit Layout
|
||||
<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}>
|
||||
<Icon icon="pen" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,7 +240,6 @@ class Dashboard extends Component {
|
|||
|
||||
closeEditFiles(){
|
||||
this.setState({ filesEditModal: false });
|
||||
// TODO do we need this if the dispatches happen in the dialog?
|
||||
}
|
||||
|
||||
closeEdit(data){
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ class ToolboxItem extends React.Component {
|
|||
if (this.props.disabled === false) {
|
||||
return this.props.connectDragSource(
|
||||
<div className={itemClass}>
|
||||
<span className="btn btn-info ">
|
||||
<span className="btn btn-outline-info ">
|
||||
{this.props.icon && <Icon style={{marginRight: '5px'}} icon={this.props.icon} /> }
|
||||
{this.props.name}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,11 @@ class WidgetToolbox extends React.Component {
|
|||
<ToolboxItem name='Box' type='widget' icon = 'plus'/>
|
||||
<ToolboxItem name='HTML' type='html' icon = 'plus'/>
|
||||
<ToolboxItem name='Topology' type='widget' disabled={thereIsTopologyWidget} title={topologyItemMsg} icon = 'plus'/>
|
||||
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"?"}`}> Drag and drop widgets onto the dashboard </Tooltip>} >
|
||||
<Button variant="light" size="sm" key={0} >
|
||||
<Icon icon="question" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
|
||||
<div className='section-buttons-group-right'>
|
||||
<div>
|
||||
|
|
@ -65,12 +70,12 @@ class WidgetToolbox extends React.Component {
|
|||
<div className='section-buttons-group-right'>
|
||||
<div>
|
||||
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"increase"}`}> Increase dashboard height </Tooltip>} >
|
||||
<Button variant="dark" key={0} onClick={() => this.props.onDashboardSizeChange(1)} >
|
||||
<Button variant="light" key={0} onClick={() => this.props.onDashboardSizeChange(1)} >
|
||||
<Icon icon="plus" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"decrease"}`}> Decrease dashboard height </Tooltip>} >
|
||||
<Button variant="dark" key={1} onClick={() => this.props.onDashboardSizeChange(-1)} >
|
||||
<Button variant="light" key={1} onClick={() => this.props.onDashboardSizeChange(-1)} >
|
||||
<Icon icon="minus" />
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue