Tweaking memory range sliders.

Fixed minor issue where an extra tick was added. The bar fill color now changes to yellow and red depending on how much memory is being allocated.
dscalzi · Jun 12, 2018 · b61a9a2 · b61a9a2
1 parent 6ac48a6
commit b61a9a2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
@@ -1143,6 +1143,7 @@ input:checked + .toggleSwitchSlider:before {
     width: 50%;
     height: 5px;
     border-radius: 3px 0px 0px 3px;
+    transition: background 0.25s ease;
 }
 .rangeSliderTrack {
     position: absolute;

diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
@@ -375,10 +375,19 @@ settingsMinRAMRange.setAttribute('min', ConfigManager.getAbsoluteMinRAM())
 settingsMinRAMRange.onchange = (e) => {
     const sMaxV = Number(settingsMaxRAMRange.getAttribute('value'))
     const sMinV = Number(settingsMinRAMRange.getAttribute('value'))
+    const bar = e.target.getElementsByClassName('rangeSliderBar')[0]
+    const max = (os.totalmem()-1000000000)/1000000000
+    if(sMinV >= max/2){
+        bar.style.background = '#e86060'
+    } else if(sMinV >= max/4) {
+        bar.style.background = '#e8e18b'
+    } else {
+        bar.style.background = null
+    }
     if(sMaxV < sMinV){
         const sliderMeta = calculateRangeSliderMeta(settingsMaxRAMRange)
         updateRangedSlider(settingsMaxRAMRange, sMinV,
-        (1+(sMinV-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
+        ((sMinV-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
         settingsMaxRAMLabel.innerHTML = sMinV.toFixed(1) + 'G'
     }
     settingsMinRAMLabel.innerHTML = sMinV.toFixed(1) + 'G'
@@ -387,10 +396,19 @@ settingsMinRAMRange.onchange = (e) => {
 settingsMaxRAMRange.onchange = (e) => {
     const sMaxV = Number(settingsMaxRAMRange.getAttribute('value'))
     const sMinV = Number(settingsMinRAMRange.getAttribute('value'))
+    const bar = e.target.getElementsByClassName('rangeSliderBar')[0]
+    const max = (os.totalmem()-1000000000)/1000000000
+    if(sMaxV >= max/2){
+        bar.style.background = '#e86060'
+    } else if(sMaxV >= max/4) {
+        bar.style.background = '#e8e18b'
+    } else {
+        bar.style.background = null
+    }
     if(sMaxV < sMinV){
         const sliderMeta = calculateRangeSliderMeta(settingsMaxRAMRange)
         updateRangedSlider(settingsMinRAMRange, sMaxV,
-        (1+(sMaxV-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
+        ((sMaxV-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
         settingsMinRAMLabel.innerHTML = sMaxV.toFixed(1) + 'G'
     }
     settingsMaxRAMLabel.innerHTML = sMaxV.toFixed(1) + 'G'
@@ -402,7 +420,7 @@ function calculateRangeSliderMeta(v){
         min: Number(v.getAttribute('min')),
         step: Number(v.getAttribute('step')),
     }
-    val.ticks = 1+(val.max-val.min)/val.step
+    val.ticks = (val.max-val.min)/val.step
     val.inc = 100/val.ticks
     return val
 }
@@ -414,7 +432,7 @@ function bindRangeSlider(){
         const value = v.getAttribute('value')
         const sliderMeta = calculateRangeSliderMeta(v)
         updateRangedSlider(v, value, 
-            (1+(value-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
+            ((value-sliderMeta.min)/sliderMeta.step)*sliderMeta.inc)
 
         track.onmousedown = (e) => {
 
@@ -430,9 +448,9 @@ function bindRangeSlider(){
 
                     const perc = (diff/v.offsetWidth)*100
                     const notch = Number(perc/sliderMeta.inc).toFixed(0)*sliderMeta.inc
-                    console.log(notch, perc)
+
                     if(Math.abs(perc-notch) < sliderMeta.inc/2){
-                        updateRangedSlider(v, sliderMeta.min+(sliderMeta.step*((notch/sliderMeta.inc)-1)), notch)
+                        updateRangedSlider(v, sliderMeta.min+(sliderMeta.step*(notch/sliderMeta.inc)), notch)
                     }
                 }
             }