franjsco
/
tomadoro
mirror of https://github.com/franjsco/tomadoro
1
0
Fork 0
Code Issues Releases Wiki Activity

edit Timer (buttonbox component)

This commit is contained in:
Francesco Esposito 2019-03-21 11:22:41 +01:00
parent a0dab64f8e
commit 86084375a2
2 changed files with 15 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Timer.css
View File

@ -13,11 +13,8 @@
box-shadow: 0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
}
.top-margin {
margin-top: 18px;
}
.buttons-box {
.button-box {
background-color: rgba(255, 255, 255, 1.0);
padding: 20px;
margin-top: 5px;

62
src/components/Timer.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { Button, Container, Row, Col } from 'reactstrap';
import { Container, Row, Col } from 'reactstrap';
import Notification from 'react-web-notification';
import ButtonBox from './ButtonBox';
import './Timer.css';
import logo from '../logo.svg';
import sound from '../sound.mp3';
@ -121,6 +122,9 @@ class Timer extends Component {
this.setState({ seconds: this.seconds});
}
isStarted() {
return this.state.started;
}
render() {
return (
@ -145,54 +149,16 @@ class Timer extends Component {
</p>
</Col>
</Row>
<div className="buttons-box">
<Row>
<Col>
<Button
className="buttons"
block
size="lg"
color="success"
onClick={this.startTimer}
disabled={this.state.started}
>
START
</Button>
</Col>
</Row>
<Row
className="top-margin"
>
<Col>
<Button
className="buttons"
block
color="danger"
size="lg"
onClick={this.stopTimer}
disabled={!this.state.started}
>
STOP
</Button>
</Col>
<Col>
<Button
className="buttons"
block
color="secondary"
size="lg"
onClick={this.resetTimer}
disabled={this.state.started || this.state.seconds === this.seconds}
>
RESET
</Button>
</Col>
</Row>
</div>
<Row>
<Col>
<ButtonBox
startTimer = {this.startTimer}
stopTimer = {this.stopTimer}
isStarted = {this.state.started}
resetTimer = {this.resetTimer}
/>
</Col>
</Row>
</Container>