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

WIP: change button color scheme #276

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-12-28 14:27:34 +01:00
parent 1d015f4b06
commit 4adc277eb3
12 changed files with 82 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,6 +45,12 @@ 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}>
<Modal.Header>
@ -56,8 +62,8 @@ 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>
{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>
</Modal.Footer>
</Modal>
);

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

@ -25,11 +25,13 @@ class DashboardButtonGroup extends React.Component {
const buttonStyle = {
marginLeft: '12px',
height: '44px',
width : '35px'
width : '35px',
borderColor: '#ffffff',
backgroundColor: '#ffffff'
};
const iconStyle = {
color: '#007bff',
color: '#527984',
height: '25px',
width : '25px'
}

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/ic/ic-action.js
View file

@ -80,7 +80,7 @@ class ICAction extends React.Component {
{actionList}
</DropdownButton>
<Button style={{ marginLeft: '5px' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
<Button style={{ marginLeft: '5px', backgroundColor: '#527984', borderColor: '#527984' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
</ButtonToolbar>
</div>;

4
src/ic/ics.js
View file

@ -328,7 +328,9 @@ class InfrastructureComponents extends Component {
render() {
const buttonStyle = {
marginLeft: '10px'
marginLeft: '10px',
backgroundColor: '#527984',
borderColor: '#527984'
};
return (

15
src/scenario/scenario.js
View file

@ -596,15 +596,23 @@ class Scenario extends React.Component {
}
const buttonStyle = {
marginLeft: '10px'
marginLeft: '10px',
backgroundColor: '#527984',
borderColor: '#527984'
};
const altButtonStyle = {
marginLeft: '10px',
backgroundColor: '#ffffff',
borderColor: 'ffffff'
}
const tableHeadingStyle = {
paddingTop: '30px'
}
const iconStyle = {
color: '#007bff',
color: '#527984',
height: '25px',
width: '25px'
}
@ -616,7 +624,7 @@ 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}>
<Button key={0} variant='light' size="lg" onClick={this.onEditFiles.bind(this)} style={altButtonStyle}>
<Icon icon="file" style={iconStyle} />
</Button>
</OverlayTrigger>
@ -785,6 +793,7 @@ class Scenario extends React.Component {
<InputGroup.Append>
<Button
type="submit"
style={buttonStyle}
onClick={() => this.addUser()}>
Add User
</Button>

4
src/scenario/scenarios.js
View file

@ -236,7 +236,9 @@ class Scenarios extends Component {
render() {
const buttonStyle = {
marginLeft: '10px'
marginLeft: '10px',
backgroundColor: '#527984',
borderColor: '#527984'
};
return (

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

@ -91,7 +91,7 @@ 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>
<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}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
</Col>
</FormGroup>

45
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, FormLabel} from 'react-bootstrap';
import AppDispatcher from '../common/app-dispatcher';
import UsersStore from './users-store';
@ -121,6 +121,16 @@ class User extends Component {
render() {
const iconStyle = {
color: '#527984',
}
const buttonStyle = {
margin: '10px',
borderColor: '#ffffff',
backgroundColor: '#ffffff'
}
return (
<div>
<h1>Your User Account</h1>
@ -128,27 +138,23 @@ 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="username">
<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} constrolId="whatever" >
<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>
</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..."
}
@ -157,8 +163,5 @@ class User extends Component {
}
}
let fluxContainerConverter = require('../common/FluxContainerConverter');
export default Container.create(fluxContainerConverter.convert(User));

2
src/user/users.js
View file

@ -146,7 +146,7 @@ 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>
<Button onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
<Button style={{backgroundColor: '#527984', borderColor: '#527984'}} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />

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

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

@ -96,11 +96,25 @@ class WidgetToolbox extends React.Component {
const disableDecrease = this.disableDecrease();
// Only one topology widget at the time is supported
const iconStyle = {
color: '#007bff',
color: '#527984',
height: '25px',
width : '25px'
}
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;
const topologyItemMsg = thereIsTopologyWidget? 'Currently only one is supported' : '';
@ -110,16 +124,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} 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} 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} style={buttonStyle} onClick={() => this.showWidgets('manipulation')} >
<Icon icon={manipulationIcon}/> Manipulation Widgets</Button>
</OverlayTrigger>
</div>
</div>
@ -128,12 +142,12 @@ 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)} >
<Button variant="light" key={0} style={altButtonStyle} 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} disabled={disableDecrease} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Button variant="light" key={1} disabled={disableDecrease} style={altButtonStyle} onClick={() => this.props.onDashboardSizeChange(-1)} >
<Icon icon="minus" style={iconStyle}/>
</Button>
</OverlayTrigger>