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

Icon-Button design change,replaced 'Send command to infrastructure component' text with tooltips #236 , #235

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-07-12 16:41:39 +02:00
parent b7a1ec106b
commit 9a6b310fac
5 changed files with 49 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,8 +24,16 @@ class DashboardButtonGroup extends React.Component {
render() {
const buttonStyle = {
marginLeft: '12px',
height: '44px',
width : '35px'
};
const iconStyle = {
color: '#007bff',
height: '25px',
width : '25px'
}
const buttons = [];
let key = 0;
@ -37,12 +45,12 @@ class DashboardButtonGroup extends React.Component {
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" />
<Icon icon="save" 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" />
<Icon icon="times" style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -51,7 +59,7 @@ class DashboardButtonGroup extends React.Component {
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" />
<Icon icon="expand" style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -61,7 +69,7 @@ class DashboardButtonGroup extends React.Component {
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" />
<Icon icon="play" style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -69,7 +77,7 @@ class DashboardButtonGroup extends React.Component {
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" />
<Icon icon="pause" style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -78,7 +86,7 @@ class DashboardButtonGroup extends React.Component {
buttons.push(
<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" />
<Icon icon="file" style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -86,7 +94,7 @@ class DashboardButtonGroup extends React.Component {
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}>
<Icon icon="pen" />
<Icon icon="pen" style={iconStyle} />
</Button>
</OverlayTrigger>
);

19
src/ic/ic-action.js
View file

@ -16,7 +16,7 @@
******************************************************************************/
import React from 'react';
import { Button, ButtonToolbar, DropdownButton, Dropdown } from 'react-bootstrap';
import { Button, ButtonToolbar, DropdownButton, Dropdown, Tooltip, OverlayTrigger } from 'react-bootstrap';
class ICAction extends React.Component {
constructor(props) {
@ -48,6 +48,8 @@ class ICAction extends React.Component {
};
render() {
let showTooltip = this.state.selectedAction.id === '-1';
const actionList = this.props.actions.map(action => (
<Dropdown.Item key={action.id} eventKey={action.id} active={this.state.selectedAction === action.id}>
{action.title}
@ -55,14 +57,25 @@ class ICAction extends React.Component {
));
return <div>
Send command to infrastructure component
{showTooltip ?
<ButtonToolbar>
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"select"}`}> Select command for infrastructure component </Tooltip>} >
<DropdownButton title={this.state.selectedAction != null ? this.state.selectedAction.title : ''} id="action-dropdown" onSelect={this.setAction}>
{actionList}
</DropdownButton>
</OverlayTrigger>
<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"send"}`}> Send command to infrastructure component </Tooltip>} >
<Button style={{ marginLeft: '5px' }} disabled={this.props.runDisabled} onClick={() => this.props.runAction(this.state.selectedAction)}>Send command</Button>
</OverlayTrigger>
</ButtonToolbar>
:
<ButtonToolbar>
<DropdownButton title={this.state.selectedAction != null ? this.state.selectedAction.title : ''} id="action-dropdown" onSelect={this.setAction}>
{actionList}
</DropdownButton>
<Button style={{ marginLeft: '5px' }} disabled={this.props.runDisabled} onClick={() => this.props.runAction(this.state.selectedAction)}>Send command</Button>
</ButtonToolbar>
}
</div>;
}
}

8
src/scenario/scenario.js
View file

@ -508,11 +508,17 @@ class Scenario extends React.Component {
paddingTop: '30px'
}
const iconStyle = {
color: '#007bff',
height: '25px',
width : '25px'
}
return <div className='section'>
<div className='section-buttons-group-right'>
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete files of scenario </Tooltip>} >
<Button key={0} variant= 'light' size="lg" onClick={this.onEditFiles.bind(this)} style={buttonStyle}>
<Icon icon="file" />
<Icon icon="file" style= {iconStyle}/>
</Button>
</OverlayTrigger>
</div>

2
src/widget/toolbox-item.js
View file

@ -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-outline-info " style={{marginTop: '5px'}}>
<span className="btn " style={{marginTop: '5px', color: '#6ea2b0', borderColor: '#6ea2b0'}}>
{this.props.icon && <Icon style={{marginRight: '5px'}} icon={this.props.icon} /> }
{this.props.name}
</span>

14
src/widget/widget-toolbox.js
View file

@ -37,6 +37,12 @@ class WidgetToolbox extends React.Component {
render() {
// Only one topology widget at the time is supported
const iconStyle = {
color: '#007bff',
height: '25px',
width : '25px'
}
const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
const topologyItemMsg = thereIsTopologyWidget? 'Currently only one is supported' : '';
@ -70,13 +76,13 @@ 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="light" key={0} style={{marginRight: '3px'}} onClick={() => this.props.onDashboardSizeChange(1)} >
<Icon icon="plus" />
<Button variant="light" key={0} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(1)} >
<Icon icon="plus" style={iconStyle}/>
</Button>
</OverlayTrigger>
<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"decrease"}`}> Decrease dashboard height </Tooltip>} >
<Button variant="light" key={1} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Icon icon="minus" />
<Button variant="light" key={1} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Icon icon="minus" style={iconStyle}/>
</Button>
</OverlayTrigger>
</div>