1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +00:00

Interface Improved

This commit is contained in:
gregueiras
2018-11-29 11:58:36 +00:00
parent 0f8c627474
commit 36b97fc6a2
2 changed files with 55 additions and 13 deletions

View File

@@ -196,10 +196,17 @@ class UiTab extends React.Component {
const rangeSlider = document.getElementById(sliderID)
const rangeBullet = document.getElementById(bulletID)
let order
if (number === 1) {
order = 'Start:'
} else {
order = 'End:'
}
if (rangeSlider && rangeBullet) {
rangeBullet.innerHTML = this.formatTime(rangeSlider.value)
rangeBullet.innerHTML = `${order}${this.formatTime(rangeSlider.value)}`
const bulletPosition = (rangeSlider.value / rangeSlider.max)
rangeBullet.style.left = (bulletPosition * 578) + 'px'
rangeBullet.style.left = (bulletPosition * 574) + 6 * (1 - bulletPosition) + 'px'
}
if (e) {
@@ -277,12 +284,12 @@ class UiTab extends React.Component {
<div styleName='group-section'>
<div styleName='container'>
<div styleName='range-slider' id='firstRow'>
<span id='rs-bullet-1' styleName='rs-label'>{this.formatTime(config.ui.scheduleStart)}</span>
<span id='rs-bullet-1' styleName='rs-label'>{`Start: ${this.formatTime(config.ui.scheduleStart)}`}</span>
<input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
onChange={(e) => this.handleSlider(e, 1)} />
</div>
<div styleName='range-slider' id='secondRow'>
<span id='rs-bullet-2' styleName='rs-label'>{this.formatTime(config.ui.scheduleEnd)}</span>
<span id='rs-bullet-2' styleName='rs-label'>{`End: ${this.formatTime(config.ui.scheduleEnd)}`}</span>
<input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
onChange={(e) => this.handleSlider(e, 2)} />
</div>