Commit 6a95c0ec authored by Linh Nguyen's avatar Linh Nguyen

Delete hour format switcher

parent 221d6635
......@@ -48,21 +48,10 @@ class App extends Component {
this.addMessage(message);
};
handleTimeFormatStateChange = (state) => {
this.setState({
currentTimeFormatState: state,
});
};
render() {
const { currentTimeFormatState, messages } = this.state;
return (
<div>
<div className="tool-bar">
<Toolbar
timeFormatState={currentTimeFormatState}
onTimeFormatStateChange={this.handleTimeFormatStateChange}
/>
</div>
<div className="scheduler-container">
<Scheduler
events={data}
......
.scheduler-container {
height: calc(100vh - 50px - 200px);
height: calc(100vh - 200px);
width: 100vw;
}
\ No newline at end of file
.tool-bar {
background: #ededed;
height: 40px;
line-height: 14px;
padding: 5px 10px;
text-align: center;
padding-left: 60px;
}
.time-format-chkbx {
display: inline-flex;
padding-top: 10px;
font-family: Roboto,Arial;
user-select: none;
font-weight: 500;
font-size: 20px;
color: rgba(0,0,0,.75);
}
.time-format-chkbx input {
position: absolute;
z-index: -1;
opacity: 0;
margin: 10px 0 0 20px;
}
.chkbx-text {
position: relative;
cursor: pointer;
user-select: none;
font-weight: 800;
font-size: 20px;
line-height: 30px;
font-family: Roboto,Arial;
margin-left: 10px;
}
.chkbx-text:before {
content: '12h';
text-align: right;
padding: 0 10px;
position: absolute;
top: -8px;
left: 0;
width: 60px;
height: 30px;
border-radius: 15px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
transition: .2s;
}
.chkbx-text:after {
content: '';
position: absolute;
top: -6px;
left: 2px;
width: 25px;
height: 25px;
border-radius: 15px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: .2s;
}
.time-format-chkbx input:checked + .chkbx-text:before {
content: '24h';
color: white;
text-align: left;
background: #0288d1;
}
.time-format-chkbx input:checked + .chkbx-text:after {
left: 53px;
}
.time-format-chkbx input:focus + .chkbx-text:before {
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(2,136,209,.7);
}
\ No newline at end of file
import React, { Component } from 'react';
export default class Toolbar extends Component {
handleTimeFormatStateChange = (e) => {
if (this.props.onTimeFormatStateChange) {
this.props.onTimeFormatStateChange(e.target.checked)
}
}
render() {
return (
<div className='time-format-section'>
<label className='time-format-chkbx'>
Time format:
<input type='checkbox'
checked={ this.props.timeFormatState }
onChange={ this.handleTimeFormatStateChange }
/>
<div className='chkbx-text'></div>
</label>
</div>
);
}
}
\ No newline at end of file
import Toolbar from './Toolbar';
import './Toolbar.css';
export default Toolbar;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment