diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js index b18e5b3..89289df 100644 --- a/src/dashboard/dashboard-button-group.js +++ b/src/dashboard/dashboard-button-group.js @@ -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( Save changes } > , Discard changes } > ); @@ -51,7 +59,7 @@ class DashboardButtonGroup extends React.Component { buttons.push( Change to fullscreen view } > ); @@ -61,7 +69,7 @@ class DashboardButtonGroup extends React.Component { buttons.push( Continue simulation } > ); @@ -69,7 +77,7 @@ class DashboardButtonGroup extends React.Component { buttons.push( Pause simulation } > ); @@ -78,7 +86,7 @@ class DashboardButtonGroup extends React.Component { buttons.push( Add, edit or delete files of scenario } > ); @@ -86,7 +94,7 @@ class DashboardButtonGroup extends React.Component { buttons.push( Add widgets and edit layout } > ); diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js index 51d2cd2..80c60e0 100644 --- a/src/ic/ic-action.js +++ b/src/ic/ic-action.js @@ -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 => ( {action.title} @@ -55,14 +57,25 @@ class ICAction extends React.Component { )); return
- Send command to infrastructure component + {showTooltip ? + + Select command for infrastructure component } > + + {actionList} + + + Send command to infrastructure component } > + + + + : {actionList} - + }
; } } diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 09f8712..5b413f3 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -508,11 +508,17 @@ class Scenario extends React.Component { paddingTop: '30px' } + const iconStyle = { + color: '#007bff', + height: '25px', + width : '25px' + } + return
Add, edit or delete files of scenario } >
diff --git a/src/widget/toolbox-item.js b/src/widget/toolbox-item.js index 7df6cfc..f1ebb93 100644 --- a/src/widget/toolbox-item.js +++ b/src/widget/toolbox-item.js @@ -51,7 +51,7 @@ class ToolboxItem extends React.Component { if (this.props.disabled === false) { return this.props.connectDragSource(
- + {this.props.icon && } {this.props.name} diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js index 04e8492..07c3a36 100644 --- a/src/widget/widget-toolbox.js +++ b/src/widget/widget-toolbox.js @@ -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 {
Increase dashboard height } > - Decrease dashboard height } > -