Values are now saved

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -17,7 +17,9 @@
   span first-child
   margin-top 18px
   padding-right 10px
+  padding-left  10px
   position relative
+  background $ui-backgroundColor
 
 div[id^="secondRow"]
   position absolute;
@@ -70,7 +72,9 @@ div[id^="firstRow"]
   font-weight: normal
   box-sizing: border-box
   border: none
-  margin-bottom: -15px
+  margin-bottom: -5px
+  margin-top: -10px
+  width: 0px
   margin-left: 0px
   left: attr(value)
   color: $ui-text-color
@@ -248,11 +252,9 @@ body[data-theme="dark"]
     select, .group-section-control-input
       colorDarkControl()
 
-  .box-minmax
+  .box-minmax, .rs-range, .rs-label
     colorDarkControl()
 
-  .rs-range
-    colorDarkControl()
 
 body[data-theme="solarized-dark"]
   .root
@@ -280,6 +282,8 @@ body[data-theme="solarized-dark"]
   .group-section-control
     select, .group-section-control-input
       colorSolarizedDarkControl()
+  .box-minmax, .rs-range, .rs-label
+      colorSolarizedDarkControl()
 
 body[data-theme="monokai"]
   .root
@@ -307,6 +311,8 @@ body[data-theme="monokai"]
   .group-section-control
     select, .group-section-control-input
       colorMonokaiControl()
+  .box-minmax, .rs-range, .rs-label
+      colorMonokaiControl()
 
 body[data-theme="dracula"]
   .root
@@ -334,3 +340,5 @@ body[data-theme="dracula"]
   .group-section-control
     select, .group-section-control-input
       colorDraculaControl()
+  .box-minmax, .rs-range, .rs-label
+    colorDraculaControl()

browser/main/modals/PreferencesModal/UiTab.js

@@ -44,6 +44,10 @@ class UiTab extends React.Component {
     }
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
     ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+
+    this.handleSlider(null, 1)
+    this.handleSlider(null, 2)
+
   }
 
   componentWillUnmount () {
@@ -65,6 +69,10 @@ class UiTab extends React.Component {
     const newConfig = {
       ui: {
         theme: this.refs.uiTheme.value,
+        enableScheduleTheme: this.refs.enableScheduleTheme.value,
+        scheduledTheme: this.refs.uiScheduledTheme.value,
+        scheduleStart: this.refs.scheduleStart.value,
+        scheduleEnd: this.refs.scheduleEnd.value,
         language: this.refs.uiLanguage.value,
         defaultNote: this.refs.defaultNote.value,
         showCopyNotification: this.refs.showCopyNotification.checked,
@@ -162,7 +170,26 @@ class UiTab extends React.Component {
     }, 2000)()
   }
 
-  handleSlider (number) {
+  /**
+   * Gets the total number of minutes and returns a string in the HH:MM format
+   * @param {Number} time total number of minutes
+   */
+  formatTime (time) {
+    let hour = Math.floor(time / 60)
+    let minute = time % 60
+
+    if (hour < 10) {
+      hour = '0' + hour
+    }
+
+    if (minute < 10) {
+      minute = '0' + minute
+    }
+
+    return `${hour}:${minute}`
+  }
+
+  handleSlider (e, number) {
     const sliderID = 'rs-range-line-' + number
     const bulletID = 'rs-bullet-' + number
 
@@ -170,10 +197,16 @@ class UiTab extends React.Component {
     const rangeBullet = document.getElementById(bulletID)
 
     if (rangeSlider && rangeBullet) {
-      rangeBullet.innerHTML = Math.floor(rangeSlider.value / 60) + ':' + rangeSlider.value % 60
+      rangeBullet.innerHTML = this.formatTime(rangeSlider.value)
       const bulletPosition = (rangeSlider.value / rangeSlider.max)
       rangeBullet.style.left = (bulletPosition * 578) + 'px'
     }
+
+    if (e) {
+      this.handleUIChange(e)
+    } else {
+      console.log('HEY')
+    }
   }
 
   render () {
@@ -212,17 +245,48 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-header2'>
+            {i18n.__('Theme Schedule')}
+          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.enableScheduleTheme}
+                ref='enableScheduleTheme'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable Scheduled Themes')}
+            </label>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Scheduled Theme')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.ui.scheduledTheme}
+                onChange={(e) => this.handleUIChange(e)}
+                ref='uiScheduledTheme'
+              >
+                <option value='default'>{i18n.__('Default')}</option>
+                <option value='white'>{i18n.__('White')}</option>
+                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
+                <option value='monokai'>{i18n.__('Monokai')}</option>
+                <option value='dracula'>{i18n.__('Dracula')}</option>
+                <option value='dark'>{i18n.__('Dark')}</option>
+              </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>
+                <span id='rs-bullet-1' styleName='rs-label'>{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'
+                <input id='rs-range-line-1' styleName='rs-range' type='range' value={config.ui.scheduleStart} min='0' max='1440' step='5' ref='scheduleStart'
-                  onChange={() => this.handleSlider(1)} />
+                  onChange={(e) => this.handleSlider(e, 1)} />
               </div>
               <div styleName='range-slider' id='secondRow'>
-                <span id='rs-bullet-2' styleName='rs-label'>24:00</span>
+                <span id='rs-bullet-2' styleName='rs-label'>{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'
+                <input id='rs-range-line-2' styleName='rs-range' type='range' value={config.ui.scheduleEnd} min='0' max='1440' step='5' ref='scheduleEnd'
-                  onInput={() => this.handleSlider(2)} />
+                  onChange={(e) => this.handleSlider(e, 2)} />
               </div>
               <div styleName='box-minmax'>
                 <span>00:00</span><span>24:00</span>