Multi tab WIP

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -1,5 +1,83 @@
 @import('./Tab')
 
+.container
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  position relative
+  margin-bottom: 2em
+
+.box-minmax
+  width 608px
+  display flex
+  justify-content space-between
+  font-size $tab--button-font-size
+  color $ui-text-color
+  span first-child
+  margin-top 18px
+  padding-right 10px
+  position relative
+
+div[id^="secondRow"]
+  position absolute;
+  z-index 2;
+  left 0;
+  top 0;
+  margin-bottom -42px;
+  
+div[id^="firstRow"]
+  position absolute;
+  z-index 2;
+  left 0;
+  top 0;
+  margin-bottom -25px;
+
+.rs-range
+  margin-top: 29px
+  width: 600px
+  -webkit-appearance: none
+  &:focus
+    outline: black
+  &::-webkit-slider-runnable-track
+    width: 100%
+    height: 0.1px
+    cursor: pointer
+    box-shadow: none
+    background: $ui-backgroundColor
+    border-radius: 0px
+    border: 0px solid #010101
+    
+  &::-webkit-slider-thumb
+    box-shadow: none
+    border: 0px solid $ui-borderColor
+    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height: 42px
+    width: 22px
+    border-radius: 22px
+    background: $ui-backgroundColor
+    cursor: pointer
+    -webkit-appearance: none
+    margin-top: -20px
+
+.rs-label
+  position: relative
+  transform-origin: center center
+  display: block
+  background: transparent
+  border-radius: none
+  line-height: 30px
+  font-weight: normal
+  box-sizing: border-box
+  border: none
+  margin-bottom: -15px
+  margin-left: 0px
+  left: attr(value)
+  color: $ui-text-color
+  font-style: normal
+  font-weight: normal
+  line-height: normal
+  font-size: $tab--button-font-size
 .root
   padding 15px
   color $ui-text-color
@@ -170,6 +248,11 @@ body[data-theme="dark"]
     select, .group-section-control-input
       colorDarkControl()
 
+  .box-minmax
+    colorDarkControl()
+  
+  .rs-range
+    colorDarkControl()
 
 body[data-theme="solarized-dark"]
   .root

browser/main/modals/PreferencesModal/Slider.styl

@@ -0,0 +1,90 @@
+.container
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+.box-minmax
+  margin-top: 30px
+  width: 608px
+  display: flex
+  justify-content: space-between
+  font-size: 20px
+  color: #FFFFFF
+  span:first-child
+    margin-left: 10px
+.range-slider
+  margin-top: 30vh
+.rs-range
+  margin-top: 29px
+  width: 600px
+  -webkit-appearance: none
+  &:focus
+    outline: none
+  &::-webkit-slider-runnable-track
+    width: 100%
+    height: 1px
+    cursor: pointer
+    box-shadow: none
+    background: #ffffff
+    border-radius: 0px
+    border: 0px solid #010101
+  &::-moz-range-track
+    width: 100%
+    height: 1px
+    cursor: pointer
+    box-shadow: none
+    background: #ffffff
+    border-radius: 0px
+    border: 0px solid #010101
+  &::-webkit-slider-thumb
+    box-shadow: none
+    border: 0px solid #ffffff
+    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height: 42px
+    width: 22px
+    border-radius: 22px
+    background: rgba(255, 255, 255, 1)
+    cursor: pointer
+    -webkit-appearance: none
+    margin-top: -20px
+  &::-moz-range-thumb
+    box-shadow: none
+    border: 0px solid #ffffff
+    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25)
+    height: 42px
+    width: 22px
+    border-radius: 22px
+    background: rgba(255, 255, 255, 1)
+    cursor: pointer
+    -webkit-appearance: none
+    margin-top: -20px
+  &::-moz-focus-outer
+    border: 0
+.rs-label
+  position: relative
+  transform-origin: center center
+  display: block
+  width: 98px
+  height: 98px
+  background: transparent
+  border-radius: 50%
+  line-height: 30px
+  text-align: center
+  font-weight: bold
+  padding-top: 22px
+  box-sizing: border-box
+  border: 2px solid #fff
+  margin-top: 20px
+  margin-left: -38px
+  left: attr(value)
+  color: #fff
+  font-style: normal
+  font-weight: normal
+  line-height: normal
+  font-size: 36px
+  &::after
+    content: "kg"
+    display: block
+    font-size: 20px
+    letter-spacing: 0.07em
+    margin-top: -2px

browser/main/modals/PreferencesModal/UiTab.js

@@ -12,7 +12,6 @@ import _ from 'lodash'
 import i18n from 'browser/lib/i18n'
 import { getLanguages } from 'browser/lib/Languages'
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
-
 const OSX = global.process.platform === 'darwin'
 
 const electron = require('electron')
@@ -163,6 +162,20 @@ class UiTab extends React.Component {
     }, 2000)()
   }
 
+  handleSlider (number) {
+    const sliderID = 'rs-range-line-' + number
+    const bulletID = 'rs-bullet-' + number
+
+    const rangeSlider = document.getElementById(sliderID)
+    const rangeBullet = document.getElementById(bulletID)
+
+    if (rangeSlider && rangeBullet) {
+      rangeBullet.innerHTML = Math.floor(rangeSlider.value / 60) + ':' + rangeSlider.value % 60
+      const bulletPosition = (rangeSlider.value / rangeSlider.max)
+      rangeBullet.style.left = (bulletPosition * 578) + 'px'
+    }
+  }
+
   render () {
     const UiAlert = this.state.UiAlert
     const UiAlertElement = UiAlert != null
@@ -199,6 +212,23 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='container'>
+              <div styleName='range-slider' id='firstRow'>
+                <span id='rs-bullet-1' styleName='rs-label'>00:00</span>
+                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5'
+                  onChange={() => this.handleSlider(1)} />
+              </div>
+              <div styleName='range-slider' id='secondRow'>
+                <span id='rs-bullet-2' styleName='rs-label'>24:00</span>
+                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5'
+                  onInput={() => this.handleSlider(2)} />
+              </div>
+              <div styleName='box-minmax'>
+                <span>00:00</span><span>24:00</span>
+              </div>
+            </div>
+          </div>
 
           <div styleName='group-section'>
             <div styleName='group-section-label'>