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

implement new button colors with css #276

Browse source
This commit is contained in:
Laura Fuentes Grau 2021-02-22 03:13:50 +01:00
parent 9a8d7b645f
commit 1804648d6a
18 changed files with 146 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/dialogs/delete-dialog.js
View file

@ -42,7 +42,9 @@ class DeleteDialog extends React.Component {
</Modal.Body>
<Modal.Footer>
<Button style={{backgroundColor: '#527984', borderColor: '#527984'}} onClick={() => this.props.onClose(false)}>Cancel</Button>
<span className='solid-button'>
<Button variant='secondary' onClick={() => this.props.onClose(false)}>Cancel</Button>
</span>
<Button variant="danger" onClick={() => this.props.onClose(true)}>Delete</Button>
</Modal.Footer>
</Modal>;

11
src/common/dialogs/dialog.js
View file

@ -45,11 +45,6 @@ class Dialog extends React.Component {
}
render() {
const buttonStyle = {
backgroundColor: '#527984',
borderColor: '#527984'
};
return (
<Modal size={this.props.size || 'sm'} keyboard show={this.props.show} onEnter={this.props.onReset} onHide={this.cancelModal} onKeyPress={this.onKeyPress}>
@ -62,8 +57,10 @@ class Dialog extends React.Component {
</Modal.Body>
<Modal.Footer>
{this.props.blendOutCancel? <div></div>: <Button style={buttonStyle} onClick={this.cancelModal}>Cancel</Button>}
<Button style={buttonStyle} onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
<span className='solid-button'>
{this.props.blendOutCancel? <div></div>: <Button variant='secondary' onClick={this.cancelModal}>Cancel</Button>}
<Button variant='secondary' onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
</span>
</Modal.Footer>
</Modal>
);

2
src/common/icon.js
View file

@ -28,7 +28,7 @@ library.add(fas);
class Icon extends React.Component {
render() {
return <FontAwesomeIcon size={this.props.size} style={this.props.style} icon={this.props.icon} />
return <FontAwesomeIcon className={this.props.classname} size={this.props.size} style={this.props.style} icon={this.props.icon} />
}
}

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

@ -26,12 +26,9 @@ class DashboardButtonGroup extends React.Component {
marginLeft: '12px',
height: '44px',
width : '35px',
borderColor: '#ffffff',
backgroundColor: '#ffffff'
};
const iconStyle = {
color: '#527984',
height: '25px',
width : '25px'
}
@ -47,21 +44,22 @@ 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" style={iconStyle} />
<Icon icon="save" classname='icon-color' 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" style={iconStyle}/>
<Icon icon="times" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
} else {
if (this.props.fullscreen !== true) {
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" style={iconStyle}/>
<Icon icon="expand" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -69,7 +67,7 @@ class DashboardButtonGroup extends React.Component {
buttons.push(
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"compress"}`}> Back to normal view </Tooltip>} >
<Button key={key} variant= 'light' size="lg" onClick={this.props.onFullscreen} style={buttonStyle}>
<Icon icon="compress" style={iconStyle}/>
<Icon icon="compress" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -79,7 +77,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" style={iconStyle}/>
<Icon icon="play" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -87,7 +85,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" style={iconStyle}/>
<Icon icon="pause" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -98,16 +96,15 @@ class DashboardButtonGroup extends React.Component {
<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" style={iconStyle}/>
<Icon icon="file" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
buttons.push(
<OverlayTrigger key={key++} placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete input signals </Tooltip>}>
<OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete input signals </Tooltip>}>
<Button key={key} variant='light' size="lg" onClick={this.props.onEditInputSignals} style={buttonStyle}>
<Icon icon="sign-in-alt" style={iconStyle}/>
<Icon icon="sign-in-alt" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -116,7 +113,7 @@ class DashboardButtonGroup extends React.Component {
<OverlayTrigger key={key++} placement={'bottom'}
overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete output signals </Tooltip>}>
<Button key={key} variant='light' size="lg" onClick={this.props.onEditOutputSignals} style={buttonStyle}>
<Icon icon="sign-out-alt" style={iconStyle}/>
<Icon icon="sign-out-alt" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);
@ -125,7 +122,7 @@ class DashboardButtonGroup extends React.Component {
<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" style={iconStyle}/>
<Icon icon="pen" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
);

4
src/file/edit-files.js
View file

@ -149,12 +149,14 @@ class EditFilesDialog extends React.Component {
</FormGroup>
<FormGroup as={Col} >
<span className='solid-button'>
<Button
style={{ backgroundColor: '#527984', borderColor: '#527984'}}
variant='secondary'
disabled={this.state.uploadFile === null}
onClick={() => this.startFileUpload()}>
Upload
</Button>
</span>
</FormGroup>
<FormGroup as={Col} >

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

@ -75,17 +75,17 @@ class ICAction extends React.Component {
step={1}
onChange={this.setDelayForAction}
/>
<div className='solid-button'>
<ButtonToolbar>
<Dropdown onSelect={this.setAction}>
<Dropdown.Toggle id={'action-dropdown'} style={{backgroundColor: '#527984', borderColor: '#527984'}}> {this.state.selectedAction != null ? this.state.selectedAction.title : ''}</Dropdown.Toggle>
<Dropdown.Toggle variant='secondary' id={'action-dropdown'}> {this.state.selectedAction != null ? this.state.selectedAction.title : ''}</Dropdown.Toggle>
<Dropdown.Menu>
{actionList}
</Dropdown.Menu>
</Dropdown>
<Button style={{ marginLeft: '5px', backgroundColor: '#527984', borderColor: '#527984' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
<Button variant='secondary' style={{ marginLeft: '5px', }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
</ButtonToolbar>
</div>
</div>;
}
}

6
src/ic/ic-dialog.js
View file

@ -95,10 +95,10 @@ class ICDialog extends React.Component {
{this.props.userRole === "Admin" ? (
<div>
<h5>Controls:</h5>
<div>
<Button style={{margin: '5px'}} size='lg'
<div className='solid-button'>
<Button variant='secondary' style={{margin: '5px'}} size='lg'
onClick={() => this.setState({confirmCommand: true, command: 'restart'})}>Restart</Button>
<Button style={{margin: '5px'}} size='lg' onClick={() => this.setState({
<Button variant='secondary' style={{margin: '5px'}} size='lg' onClick={() => this.setState({
confirmCommand: true,
command: 'shutdown'
})}>Shutdown</Button>

11
src/ic/ics.js
View file

@ -334,7 +334,7 @@ class InfrastructureComponents extends Component {
let ic = this.state.ics.find(ic => ic.name === name);
let index = this.state.ics.indexOf(ic);
if(ic.type === "villas-node" || ic.type === "villas-relay"){
return <Button variant="link" style={{color: '#047cab'}} onClick={() => this.setState({ icModal: true, modalIC: ic, modalIndex: index })}>{name}</Button> }
return <Button variant="link" onClick={() => this.setState({ icModal: true, modalIC: ic, modalIndex: index })}>{name}</Button> }
else{
return <span>{name}</span>
}
@ -369,12 +369,9 @@ class InfrastructureComponents extends Component {
const buttonStyle = {
marginLeft: '10px',
backgroundColor: '#ffffff',
borderColor: '#ffffff'
}
const iconStyle = {
color: '#527984',
height: '30px',
width: '30px'
}
@ -384,9 +381,9 @@ class InfrastructureComponents extends Component {
<div className='section'>
<h1>Infrastructure Components
{this.state.currentUser.role === "Admin" ?
<span>
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" style={iconStyle} /></Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" style={iconStyle} /></Button>
<span className='icon-button'>
<Button variant='light' onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle} /></Button>
<Button variant='light' onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle} /></Button>
</span>
:
<span> </span>

34
src/scenario/scenario.js
View file

@ -697,16 +697,8 @@ class Scenario extends React.Component {
return (<Redirect to="/scenarios" />);
}
const buttonStyle = {
marginLeft: '10px',
backgroundColor: '#527984',
borderColor: '#527984'
};
const altButtonStyle = {
marginLeft: '10px',
backgroundColor: '#ffffff',
borderColor: '#ffffff'
}
const tableHeadingStyle = {
@ -714,7 +706,6 @@ class Scenario extends React.Component {
}
const iconStyle = {
color: '#527984',
height: '30px',
width: '30px'
}
@ -764,8 +755,8 @@ class Scenario extends React.Component {
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={altButtonStyle}>
<Icon icon="file" style={iconStyle} />
<Button variant='light' key={0} size="lg" onClick={this.onEditFiles.bind(this)}>
<Icon icon="file" classname={'icon-color'} style={iconStyle}/>
</Button>
</OverlayTrigger>
</div>
@ -784,8 +775,10 @@ class Scenario extends React.Component {
{/*Component Configurations table*/}
<h2 style={tableHeadingStyle}>Component Configurations
<Button onClick={() => this.addConfig()} style={altButtonStyle}><Icon icon="plus" style={iconStyle} /></Button>
<Button onClick={() => this.setState({ importConfigModal: true })} style={altButtonStyle}><Icon icon="upload" style={iconStyle}/></Button>
<span className='icon-button'>
<Button variant='light' onClick={() => this.addConfig()} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
<Button variant='light' onClick={() => this.setState({ importConfigModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle}/></Button>
</span>
</h2>
<Table data={this.state.configs}>
<TableColumn checkbox onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' />
@ -876,8 +869,10 @@ class Scenario extends React.Component {
{/*Dashboard table*/}
<h2 style={tableHeadingStyle}>Dashboards
<Button onClick={() => this.setState({ newDashboardModal: true })} style={altButtonStyle}><Icon icon="plus" style={iconStyle} /></Button>
<Button onClick={() => this.setState({ importDashboardModal: true })} style={altButtonStyle}><Icon icon="upload" style={iconStyle} /></Button>
<span className='icon-button'>
<Button variant='light' onClick={() => this.setState({ newDashboardModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
<Button variant='light' onClick={() => this.setState({ importDashboardModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle} /></Button>
</span>
</h2>
<Table data={this.state.dashboards}>
<TableColumn title='Name' dataKey='name' link='/dashboards/' linkKey='id' />
@ -904,7 +899,9 @@ class Scenario extends React.Component {
{/*Result table*/}
<h2 style={tableHeadingStyle}>Results
<Button onClick={() => this.setState({ newResultModal: true })} style={altButtonStyle}><Icon icon="plus" style={iconStyle} /></Button>
<span className='icon-button'>
<Button variant='light' onClick={() => this.setState({ newResultModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
</span>
</h2>
{resulttable}
<NewResultDialog show={this.state.newResultModal} onClose={data => this.closeNewResultModal(data)} />
@ -931,12 +928,15 @@ class Scenario extends React.Component {
type="text"
/>
<InputGroup.Append>
<span className='icon-button'>
<Button
variant='light'
type="submit"
style={altButtonStyle}
onClick={() => this.addUser()}>
<Icon icon="plus" style={iconStyle} />
<Icon icon="plus" classname={'icon-color'} style={iconStyle} />
</Button>
</span>
</InputGroup.Append>
</InputGroup><br /><br />
</div>

9
src/scenario/scenarios.js
View file

@ -237,12 +237,9 @@ class Scenarios extends Component {
render() {
const buttonStyle = {
marginLeft: '10px',
backgroundColor: '#ffffff',
borderColor: '#ffffff'
};
const iconStyle = {
color: '#527984',
height: '30px',
width: '30px'
}
@ -250,8 +247,10 @@ class Scenarios extends Component {
return (
<div className='section'>
<h1>Scenarios
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" style={iconStyle} /></Button>
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" style={iconStyle} /></Button>
<span className='icon-button'>
<Button variant='light' onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle} /></Button>
<Button variant='light' onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle} /></Button>
</span>
</h1>
<Table data={this.state.scenarios}>

10
src/signal/edit-signal-mapping.js
View file

@ -177,8 +177,6 @@ class EditSignalMapping extends React.Component {
const buttonStyle = {
marginLeft: '10px',
backgroundColor: '#527984',
borderColor: '#527984'
};
return(
@ -204,16 +202,16 @@ class EditSignalMapping extends React.Component {
<TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
</Table>
<div style={{ float: 'right' }}>
<Button key={50} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
<div className='solid-button' style={{ float: 'right' }}>
<Button variant='secondary' key={50} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
</div>
<div>
<Collapse isOpened={this.state.openCollapse}>
<h6>Choose a Component Configuration to add the signal to: </h6>
<div>
<div className='solid-button'>
{typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
<Button key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
<Button variant='secondary' key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
))}
</div>

66
src/styles/app.css
View file

@ -369,6 +369,18 @@ body {
height: auto !important;
padding: 5px;
float: right;
border-color: #ffffff;
background-color: #ffffff;
}
.section-buttons-group-right .btn{
border-color: #ffffff;
background-color: #ffffff;
}
.section-buttons-group-right .btn:hover{
border-color: #e3e3e3;
background-color: #e3e3e3;
}
.section-buttons-group-left {
@ -377,10 +389,60 @@ body {
float: left;
}
.section-buttons-group-left .btn{
background-color: #527984;
border-color: #527984;
}
.section-buttons-group-left .btn:hover{
background-color: #31484f;
border-color: #31484f;
}
.drag-and-drop .btn{
color: #527984;
border-color: #527984;
}
.drag-and-drop .btn:hover{
color: #527984;
border-color: #527984;
}
.section-buttons-group-right .rc-slider {
margin-left: 12px;
}
.solid-button .btn{
background-color: #527984;
border-color: #527984;
}
.solid-button .btn:hover{
background-color: #31484f;
border-color: #31484f;
}
.solid-button .btn:disabled{
background-color: #527984;
border-color: #527984;
}
.icon-button .btn{
border-color: #ffffff;
background-color: #ffffff;
}
.icon-button .btn:hover{
border-color: #e3e3e3;
background-color: #e3e3e3;
}
.icon-color {
color: #527984;
}
.form-horizontal .form-group {
margin-left: 0 !important;
margin-right: 0 !important;
@ -389,7 +451,3 @@ body {
.badge-outdated {
opacity: 0.4;
}
a:link, a:active, a:visited , a:hover {
color: #047cab ;
}

6
src/user/login-form.js
View file

@ -91,8 +91,10 @@ class LoginForm extends Component {
<FormGroup style={{paddingTop: 15, paddingBottom: 5}}>
<Col>
<Button style={{width: 90, backgroundColor: '#527984', borderColor: '#527984'}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
<Button variant="link" size="sm" style={{marginLeft: 85, color: '#047cab'}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
<span className='solid-button'>
<Button variant='secondary' style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
</span>
<Button variant="link" size="sm" style={{marginLeft: 85}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
</Col>
</FormGroup>

13
src/user/user.js
View file

@ -112,15 +112,6 @@ class User extends Component {
render() {
const iconStyle = {
color: '#527984',
}
const buttonStyle = {
margin: '10px',
borderColor: '#ffffff',
backgroundColor: '#ffffff'
}
return (
<div>
@ -140,7 +131,9 @@ class User extends Component {
<div> {this.state.currentUser.username}</div>
<div>{this.state.currentUser.mail}</div>
<div>{this.state.currentUser.role}</div>
<Button size='lg' style={buttonStyle} onClick={() => this.setState({ editModal: true })}><Icon size='lg' style={iconStyle} icon='edit' /> </Button>
<span className='icon-button'>
<Button variant='light' size='lg' variant='light' style={{margin: '10px'}} onClick={() => this.setState({ editModal: true })}><Icon size='lg' classname='icon-color' icon='edit' /> </Button>
</span>
</FormGroup>
</Row>

7
src/user/users.js
View file

@ -132,12 +132,9 @@ class Users extends Component {
const buttonStyle = {
marginLeft: '10px',
backgroundColor: '#ffffff',
borderColor: '#ffffff'
}
const iconStyle = {
color: '#527984',
height: '30px',
width: '30px'
}
@ -145,7 +142,9 @@ class Users extends Component {
return (
<div>
<h1>Users
<Button style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' style={iconStyle} /></Button>
<span className='icon-button'>
<Button variant='light' style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' classname='icon-color' style={iconStyle} /></Button>
</span>
</h1>
<Table data={this.state.users}>

12
src/widget/edit-widget/edit-widget-color-zones-control.js
View file

@ -178,12 +178,9 @@ class EditWidgetColorZonesControl extends React.Component {
const buttonStyle = {
marginBottom: '10px',
marginLeft: '120px',
borderColor: '#ffffff',
backgroundColor: '#ffffff'
};
const iconStyle = {
color: '#527984',
height: '25px',
width : '25px'
}
@ -204,8 +201,9 @@ class EditWidgetColorZonesControl extends React.Component {
return <FormGroup>
<FormLabel>Color zones</FormLabel>
<Button onClick={this.addZone} style={buttonStyle} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" style={iconStyle} /></Button>
<span className='icon-button'>
<Button variant='light' onClick={this.addZone} style={buttonStyle} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" className='icon-color' style={iconStyle} /></Button>
</span>
<div>
{
this.state.widget.customProperties.zones.map((zone, idx) => {
@ -255,7 +253,9 @@ class EditWidgetColorZonesControl extends React.Component {
</tr>
</tbody>
</Table>
<Button onClick={this.removeZones} style={{borderColor: '#ffffff', backgroundColor: '#ffffff'}} ><Icon style={iconStyle} icon="trash-alt" /></Button>
<span className='icon-button'>
<Button variant='light' onClick={this.removeZones} ><Icon style={iconStyle} classname='icon-color' icon="trash-alt" /></Button>
</span>
</Collapse>
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />

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

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

@ -96,7 +96,6 @@ class WidgetToolbox extends React.Component {
const disableDecrease = this.disableDecrease();
// Only one topology widget at the time is supported
const iconStyle = {
color: '#527984',
height: '25px',
width : '25px'
}
@ -104,15 +103,6 @@ class WidgetToolbox extends React.Component {
const buttonStyle = {
marginRight: '3px',
height: '40px',
borderColor: '#527984',
backgroundColor: '#527984'
}
const altButtonStyle = {
marginRight: '3px',
height: '40px',
borderColor: '#ffffff',
backgroundColor: '#ffffff'
}
const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
@ -124,15 +114,15 @@ class WidgetToolbox extends React.Component {
<div className='section-buttons-group-left'>
<div>
<OverlayTrigger key={2} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"cosmetic"}`}> Show/ hide available Cosmetic Widgets </Tooltip>} >
<Button key={2} style={buttonStyle} onClick={() => this.showWidgets('cosmetic')} >
<Button key={2} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('cosmetic')} >
<Icon icon={cosmeticIcon}/> Cosmetic Widgets</Button>
</OverlayTrigger>
<OverlayTrigger key={3} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"displaying"}`}> Show/ hide available Displaying Widgets </Tooltip>} >
<Button key={3} style={buttonStyle} onClick={() => this.showWidgets('displaying')} >
<Button key={3} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('displaying')} >
<Icon icon={displayingIcon}/> Displaying Widgets</Button>
</OverlayTrigger>
<OverlayTrigger key={4} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"manipulation"}`}> Show/ hide available Manipulation Widgets </Tooltip>} >
<Button key={2} style={buttonStyle} onClick={() => this.showWidgets('manipulation')} >
<Button key={2} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('manipulation')} >
<Icon icon={manipulationIcon}/> Manipulation Widgets</Button>
</OverlayTrigger>
</div>
@ -142,13 +132,13 @@ class WidgetToolbox extends React.Component {
<span>Grid: { this.props.grid > 1 ? this.props.grid : 'Disabled' }</span>
<Slider value={this.props.grid} style={{ width: '80px' }} step={5} onChange={this.onGridChange} />
<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"increase"}`}> Increase dashboard height </Tooltip>} >
<Button variant="light" key={0} style={altButtonStyle} onClick={() => this.props.onDashboardSizeChange(1)} >
<Icon icon="plus" style={iconStyle}/>
<Button variant="light" key={0} style={buttonStyle} onClick={() => this.props.onDashboardSizeChange(1)} >
<Icon icon="plus" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"decrease"}`}> Decrease dashboard height </Tooltip>} >
<Button variant="light" key={1} disabled={disableDecrease} style={altButtonStyle} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Icon icon="minus" style={iconStyle}/>
<Button variant="light" key={1} disabled={disableDecrease} style={buttonStyle} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Icon icon="minus" classname='icon-color' style={iconStyle}/>
</Button>
</OverlayTrigger>
@ -157,7 +147,7 @@ class WidgetToolbox extends React.Component {
<br></br>
<br></br>
<br></br>
<div className= 'section-buttons-group-left'>
<div className= 'drag-and-drop'>
<span>
<Collapse isOpened={this.state.showCosmeticWidgets} >
<ToolboxItem name='Line' type='widget' icon='plus'/>