70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import { connect } from "react-redux";
|
|
import { colors } from './globals'
|
|
|
|
import Top from './Top';
|
|
import Clock from './Clock';
|
|
import Controls from './Controls';
|
|
|
|
const mapStateToProps = (state) => ({ ...state });
|
|
|
|
class PomodoroClock extends React.Component {
|
|
render() {
|
|
const width = this.props.innerWindowWidth;
|
|
const height = this.props.innerWindowHeight;
|
|
const eightyPercentWidth = Math.round(width * 0.8);
|
|
const eightyPercentHeight = Math.round(height * 0.8);
|
|
const maxHeight = 500;
|
|
const maxWidth = 800;
|
|
const style = {
|
|
margin: 'auto',
|
|
border: '3px solid',
|
|
borderColor: colors.ivoryBlack,
|
|
zIndex: '1',
|
|
backgroundColor: colors.skyBlue,
|
|
borderRadius: 10,
|
|
height: eightyPercentHeight < maxHeight ? eightyPercentHeight : maxHeight,
|
|
width: eightyPercentWidth < maxWidth ? eightyPercentWidth : maxWidth,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
fontSize: 32,
|
|
userSelect: 'none',
|
|
MozUserSelect: 'none',
|
|
WebkitUserSelect: 'none',
|
|
};
|
|
|
|
const clockContainerStyle = {
|
|
height: '100%',
|
|
width: '100%',
|
|
};
|
|
|
|
if (width > height && height < 400) {
|
|
style['height'] = '96vh';
|
|
style['width'] = '75vw';
|
|
style['margin'] = '1vh auto 3vh auto';
|
|
style['fontSize'] = 24;
|
|
} else if (height > width) {
|
|
style['height'] = Math.round(height * 0.75);
|
|
style['maxHeight'] = maxHeight;
|
|
clockContainerStyle['height'] = width > style['height'] ? style['height'] : width;
|
|
clockContainerStyle['maxHeight'] = maxHeight;
|
|
style['width'] = width - 6;
|
|
style['maxWidth'] = maxWidth;
|
|
style['fontSize'] = 24;
|
|
}
|
|
|
|
return(
|
|
<div style={style}>
|
|
<div style={clockContainerStyle}>
|
|
<Top />
|
|
<Clock />
|
|
<Controls />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps)(PomodoroClock);
|