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

Merge branch 'new-button-color'

Browse source 
# Conflicts:
#	src/ic/ic-action.js
#	src/ic/ic-dialog.js
#	src/ic/ics.js
#	src/scenario/scenario.js
#	src/scenario/scenarios.js
#	src/signal/edit-signal-mapping.js
#	src/user/users.js
This commit is contained in:
Sonja Happ 2021-02-22 13:21:17 +01:00
commit db1058625b
22 changed files with 222 additions and 111 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 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,6 +45,11 @@ class Dialog extends React.Component {
}
render() {
const buttonStyle = {
marginLeft: '10px'
};
return (
<Modal size={this.props.size || 'sm'} keyboard show={this.props.show} onEnter={this.props.onReset} onHide={this.cancelModal} onKeyPress={this.onKeyPress}>
<Modal.Header>
@ -56,8 +61,10 @@ class Dialog extends React.Component {
</Modal.Body>
<Modal.Footer>
{this.props.blendOutCancel? <div></div>: <Button onClick={this.cancelModal}>Cancel</Button>}
<Button onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
<span className='solid-button'>
{this.props.blendOutCancel? <div/>: <Button variant='secondary' onClick={this.cancelModal} style={buttonStyle}>Cancel</Button>}
<Button variant='secondary' onClick={this.closeModal} disabled={!this.props.valid} style={buttonStyle}>{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} />
}
}

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

@ -24,13 +24,12 @@ class DashboardButtonGroup extends React.Component {
render() {
const buttonStyle = {
marginLeft: '12px',
height: '44px',
width : '35px'
height: '44px',
width : '35px',
};
const iconStyle = {
color: '#007bff',
height: '25px',
height: '25px',
width : '25px'
}
@ -45,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>
);
@ -67,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>
);
@ -77,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>
);
@ -85,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>
);
@ -96,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>
);
@ -114,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>
);
@ -123,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>
);

2
src/dashboard/dashboard.js
View file

@ -478,7 +478,7 @@ class Dashboard extends Component {
return <div className={boxClasses} >
<div className='section-header box-header'>
<div className="section-title">
<span>{this.state.dashboard.name}</span>
<h2>{this.state.dashboard.name}</h2>
</div>
<DashboardButtonGroup

2
src/dashboard/edit-dashboard.js
View file

@ -73,7 +73,7 @@ class EditDashboardDialog extends React.Component {
return (
<Dialog show={this.props.show} title="Edit Dashboard" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name" validationstate={this.validateForm('name')}>
<FormGroup controlId="name" valid={this.validateForm('name')}>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />

2
src/dashboard/new-dashboard.js
View file

@ -69,7 +69,7 @@ class NewDashboardDialog extends React.Component {
return (
<Dialog show={this.props.show} title="New Dashboard" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<form>
<FormGroup controlId="name" validationstate={this.validateForm('name')}>
<FormGroup controlId="name" valid={this.validateForm('name')}>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />

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

@ -149,11 +149,14 @@ class EditFilesDialog extends React.Component {
</FormGroup>
<FormGroup as={Col} >
<span className='solid-button'>
<Button
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

@ -16,7 +16,7 @@
******************************************************************************/
import React from 'react';
import { Button, ButtonToolbar, DropdownButton, Dropdown, InputGroup, FormControl } from 'react-bootstrap';
import { Button, DropdownButton, Dropdown, InputGroup, FormControl } from 'react-bootstrap';
class ICAction extends React.Component {
constructor(props) {
@ -79,11 +79,11 @@ class ICAction extends React.Component {
</Dropdown.Item>
));
return <div>
return <div className='solid-button'>
<InputGroup>
<InputGroup.Prepend>
<DropdownButton
variant="outline-secondary"
variant="secondary"
title={this.state.selectedAction != null ? this.state.selectedAction.title : ''}
id="action-dropdown"
onSelect={this.setAction}>
@ -96,7 +96,7 @@ class ICAction extends React.Component {
onChange={this.setTimeForAction} />
</InputGroup.Prepend>
<Button
variant="outline-secondary"
variant="secondary"
disabled={sendCommandDisabled}
onClick={() => this.props.runAction(this.state.selectedAction, this.state.time)}>Run</Button>
</InputGroup>

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

@ -113,10 +113,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>

13
src/ic/ics.js
View file

@ -354,7 +354,7 @@ class InfrastructureComponents extends Component {
modifyNameColumn(name, component){
let index = this.state.ics.indexOf(component);
return <Button variant="link" style={{color: '#047cab'}} onClick={() => this.openICStatus(component)}>{name}</Button>
return <Button variant="link" onClick={() => this.openICStatus(component)}>{name}</Button>
}
openICStatus(ic){
@ -451,6 +451,11 @@ class InfrastructureComponents extends Component {
marginLeft: '10px'
};
const iconStyle = {
height: '30px',
width: '30px'
}
let managerTable = this.getICCategoryTable(this.state.managers, false, "IC Managers")
let simulatorTable = this.getICCategoryTable(this.state.simulators, true, "Simulators")
let gatewayTable = this.getICCategoryTable(this.state.gateways, true, "Gateways")
@ -461,19 +466,19 @@ class InfrastructureComponents extends Component {
<div className='section'>
<h1>Infrastructure Components
{this.state.currentUser.role === "Admin" ?
(<span>
(<span className='icon-button'>
<OverlayTrigger
key={1}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"add"}`}> Add Infrastructure Component </Tooltip>} >
<Button onClick={() => this.setState({newModal: true})} style={buttonStyle}><Icon icon="plus"
<Button variant='light' onClick={() => this.setState({newModal: true})} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle}
/></Button>
</OverlayTrigger>
<OverlayTrigger
key={2}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"import"}`}> Import Infrastructure Component </Tooltip>} >
<Button onClick={() => this.setState({importModal: true})} style={buttonStyle}><Icon icon="upload"
<Button variant='light' onClick={() => this.setState({importModal: true})} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle}
/></Button>
</OverlayTrigger>
</span>)

4
src/ic/import-ic.js
View file

@ -118,7 +118,7 @@ class ImportICDialog extends React.Component {
<FormControl type="file" onChange={(e) => this.loadFile(e.target.files)} />
</FormGroup>
<FormGroup controlId="name" validationState={this.validateForm('name')}>
<FormGroup controlId="name" valid={this.validateForm('name')}>
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
@ -128,7 +128,7 @@ class ImportICDialog extends React.Component {
<FormControl type="text" placeholder="Enter websocketurl" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId="uuid" validationState={this.validateForm('uuid')}>
<FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
<FormLabel>UUID</FormLabel>
<FormControl type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />

37
src/scenario/scenario.js
View file

@ -775,18 +775,17 @@ class Scenario extends React.Component {
return (<Redirect to="/scenarios" />);
}
const buttonStyle = {
marginLeft: '10px'
};
const altButtonStyle = {
marginLeft: '10px',
}
const tableHeadingStyle = {
paddingTop: '30px'
}
const iconStyle = {
color: '#007bff',
height: '25px',
width: '25px'
height: '30px',
width: '30px'
}
if (this.state.scenario === undefined) {
@ -846,8 +845,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={buttonStyle}>
<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>
@ -864,18 +863,20 @@ class Scenario extends React.Component {
{/*Component Configurations table*/}
<h2 style={tableHeadingStyle}>Component Configurations
<span className='icon-button'>
<OverlayTrigger
key={1}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"add"}`}> Add Component Configuration </Tooltip>} >
<Button onClick={() => this.addConfig()} style={buttonStyle}><Icon icon="plus" /></Button>
<Button variant='light' onClick={() => this.addConfig()} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
</OverlayTrigger>
<OverlayTrigger
key={2}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"import"}`}> Import Component Configuration </Tooltip>} >
<Button onClick={() => this.setState({ importConfigModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
<Button variant='light' onClick={() => this.setState({ importConfigModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle}/></Button>
</OverlayTrigger>
</span>
</h2>
<Table data={this.state.configs}>
<TableColumn
@ -973,18 +974,20 @@ class Scenario extends React.Component {
{/*Dashboard table*/}
<h2 style={tableHeadingStyle}>Dashboards
<span className='icon-button'>
<OverlayTrigger
key={1}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"add"}`}> Add Dashboard </Tooltip>} >
<Button onClick={() => this.setState({ newDashboardModal: true })} style={buttonStyle}><Icon icon="plus" /></Button>
<Button variant='light' onClick={() => this.setState({ newDashboardModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
</OverlayTrigger>
<OverlayTrigger
key={2}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"import"}`}> Import Dashboard </Tooltip>} >
<Button onClick={() => this.setState({ importDashboardModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
<Button variant='light' onClick={() => this.setState({ importDashboardModal: true })} style={altButtonStyle}><Icon icon="upload" classname={'icon-color'} style={iconStyle} /></Button>
</OverlayTrigger>
</span>
</h2>
<Table data={this.state.dashboards}>
<TableColumn title='Name' dataKey='name' link='/dashboards/' linkKey='id' />
@ -1011,12 +1014,14 @@ class Scenario extends React.Component {
{/*Result table*/}
<h2 style={tableHeadingStyle}>Results
<span className='icon-button'>
<OverlayTrigger
key={1}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"add"}`}> Add Result </Tooltip>} >
<Button onClick={() => this.setState({ newResultModal: true })} style={buttonStyle}><Icon icon="plus" /></Button>
<Button variant='light' onClick={() => this.setState({ newResultModal: true })} style={altButtonStyle}><Icon icon="plus" classname={'icon-color'} style={iconStyle} /></Button>
</OverlayTrigger>
</span>
</h2>
{resulttable}
<NewResultDialog show={this.state.newResultModal} onClose={data => this.closeNewResultModal(data)} />
@ -1043,11 +1048,15 @@ class Scenario extends React.Component {
type="text"
/>
<InputGroup.Append>
<span className='icon-button'>
<Button
variant='light'
type="submit"
style={altButtonStyle}
onClick={() => this.addUser()}>
Add User
<Icon icon="plus" classname={'icon-color'} style={iconStyle} />
</Button>
</span>
</InputGroup.Append>
</InputGroup><br /><br />
</div>

13
src/scenario/scenarios.js
View file

@ -236,24 +236,31 @@ class Scenarios extends Component {
render() {
const buttonStyle = {
marginLeft: '10px'
marginLeft: '10px',
};
const iconStyle = {
height: '30px',
width: '30px'
}
return (
<div className='section'>
<h1>Scenarios
<span className='icon-button'>
<OverlayTrigger
key={1}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"add"}`}> Add Scenario </Tooltip>} >
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /></Button>
<Button variant='light' onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" classname='icon-color' style={iconStyle} /></Button>
</OverlayTrigger>
<OverlayTrigger
key={2}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"import"}`}> Import Scenario </Tooltip>} >
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /></Button>
<Button variant='light' onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" classname='icon-color' style={iconStyle} /></Button>
</OverlayTrigger>
</span>
</h1>
<Table data={this.state.scenarios}>

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

@ -65,7 +65,7 @@ class EditSignalMapping extends React.Component {
}
signals.forEach(signal => {
if(signal.checked == undefined) signal.checked = false
if(signal.checked === undefined) signal.checked = false
});
@ -149,7 +149,7 @@ class EditSignalMapping extends React.Component {
data: signal,
token: this.props.sessionToken
});
})
}
@ -196,11 +196,11 @@ class EditSignalMapping extends React.Component {
onSignalChecked(signal) {
let tempSignals = this.state.signals;
const index = tempSignals.indexOf(signal);
tempSignals[index].checked = !tempSignals[index].checked;
this.setState({signals: tempSignals});
}
checkAll(){
@ -208,7 +208,7 @@ class EditSignalMapping extends React.Component {
let allChecked = true;
tempSignals.forEach(signal =>
{
{
if(signal.checked === false){
signal.checked = true;
allChecked = false;
@ -224,7 +224,7 @@ class EditSignalMapping extends React.Component {
render() {
const buttonStyle = {
marginLeft: '10px'
marginLeft: '10px',
};
return(
@ -251,24 +251,24 @@ class EditSignalMapping extends React.Component {
<TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
</Table>
<div >
<div className='solid-button' style={{ float: 'right' }}>
<OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>} >
<Button key={50} style={{ float: 'left' }} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" /> </Button>
<Button variant='secondary' key={50} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" /> </Button>
</OverlayTrigger>
<Button key={51} style={{ float: 'left' }} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
<Button key={52} style={{ float: 'right' }} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
<Button variant='secondary' key={51} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
<Button variant='secondary' key={52} 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>
</Collapse>
</Collapse>
</div>
</FormGroup>
</Dialog>

62
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;

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

@ -91,7 +91,9 @@ class LoginForm extends Component {
<FormGroup style={{paddingTop: 15, paddingBottom: 5}}>
<Col>
<Button style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</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>

38
src/user/user.js
View file

@ -17,7 +17,7 @@
import React, { Component } from 'react';
import { Container } from 'flux/utils';
import {Button, Col, Row} from 'react-bootstrap';
import {Button, Col, Row, FormGroup} from 'react-bootstrap';
import AppDispatcher from '../common/app-dispatcher';
import UsersStore from './users-store';
@ -112,6 +112,7 @@ class User extends Component {
render() {
return (
<div>
<h1>Your User Account</h1>
@ -119,27 +120,25 @@ class User extends Component {
{this.state.currentUser !== undefined && this.state.currentUser !== null ?
<form>
<Row>
<Col xs={3}>Username: </Col>
<Col xs={3}> {this.state.currentUser.username} </Col>
<FormGroup as={Col} sm={2} controlId="details">
<div style={{ alignItems: 'right' }}>Username:</div>
<div style={{ alignItems: 'right' }}>E-mail:</div>
<div style={{ alignItems: 'right' }}>Role:</div>
</FormGroup>
<FormGroup as={Col} sm={3} controlId="information" >
<div> {this.state.currentUser.username}</div>
<div>{this.state.currentUser.mail}</div>
<div>{this.state.currentUser.role}</div>
<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>
<Row as={Col}>
<Col xs={3}>E-mail: </Col>
<Col xs={3}> {this.state.currentUser.mail} </Col>
</Row>
<Row as={Col}>
<Col xs={3}>Role: </Col>
<Col xs={3}> {this.state.currentUser.role} </Col>
</Row>
<Button onClick={() => this.setState({editModal: true})}><Icon icon='edit'/> Edit</Button>
<EditOwnUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)}
user={this.state.currentUser}/>
user={this.state.currentUser} />
</form> : "Loading user data..."
}
@ -148,8 +147,5 @@ class User extends Component {
}
}
let fluxContainerConverter = require('../common/FluxContainerConverter');
export default Container.create(fluxContainerConverter.convert(User));

15
src/user/users.js
View file

@ -131,20 +131,25 @@ class Users extends Component {
render() {
const buttonStyle = {
marginLeft: '10px'
marginLeft: '10px',
};
const iconStyle = {
height: '30px',
width: '30px'
}
return (
<div>
<h1>Users
<span className='icon-button'>
<OverlayTrigger
key={1}
placement={'top'}
overlay={<Tooltip id={`tooltip-${"add"}`}> Add User </Tooltip>} >
<Button style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> </Button>
<Button variant='light' style={buttonStyle} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' classname='icon-color' style={iconStyle} /> </Button>
</OverlayTrigger>
</span>
</h1>
<Table data={this.state.users}>
@ -156,8 +161,6 @@ class Users extends Component {
<TableColumn width='200' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
</Table>
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />

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

@ -175,6 +175,15 @@ class EditWidgetColorZonesControl extends React.Component {
render() {
const buttonStyle = {
marginBottom: '10px',
marginLeft: '120px',
};
const iconStyle = {
height: '25px',
width : '25px'
}
let tempColor = 'FFFFFF';
let collapse = false;
@ -191,9 +200,10 @@ class EditWidgetColorZonesControl extends React.Component {
}
return <FormGroup>
<FormLabel>Color Zones</FormLabel>
<Button onClick={this.addZone} style={{marginBottom: '10px', marginLeft: '120px'}} disabled={!this.props.widget.customProperties.colorZones}><Icon size='xs' icon="plus" /></Button>
<FormLabel>Color zones</FormLabel>
<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) => {
@ -243,7 +253,9 @@ class EditWidgetColorZonesControl extends React.Component {
</tr>
</tbody>
</Table>
<Button onClick={this.removeZones}><Icon size='xs' 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: '#6ea2b0', borderColor: '#6ea2b0'}}>
<span className="btn " style={{marginTop: '5px'}}>
{this.props.icon && <Icon style={{marginRight: '5px'}} icon={this.props.icon} /> }
{this.props.name}
</span>

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

@ -96,11 +96,15 @@ class WidgetToolbox extends React.Component {
const disableDecrease = this.disableDecrease();
// Only one topology widget at the time is supported
const iconStyle = {
color: '#007bff',
height: '25px',
width : '25px'
}
const buttonStyle = {
marginRight: '3px',
height: '40px',
}
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' : '';
@ -110,16 +114,16 @@ 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 variant="light" key={2} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('cosmetic')} >
<Icon icon={cosmeticIcon} style={{color: '#007bff'}}/> Cosmetic Widgets</Button>
<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 variant="light" key={3} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('displaying')} >
<Icon icon={displayingIcon} style={{color: '#007bff'}} /> Displaying Widgets</Button>
<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 variant="light" key={2} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('manipulation')} >
<Icon icon={manipulationIcon} style={{color: '#007bff'}} /> Manipulation Widgets</Button>
<Button key={2} variant="secondary" style={buttonStyle} onClick={() => this.showWidgets('manipulation')} >
<Icon icon={manipulationIcon}/> Manipulation Widgets</Button>
</OverlayTrigger>
</div>
</div>
@ -128,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={{marginRight: '3px', height: '40px'}} 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={{marginRight: '3px', height: '40px'}} 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>
@ -143,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'/>