From b61a9a2c55370f36fa7c6b1efa504be845fa4223 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Tue, 12 Jun 2018 03:48:36 -0400 Subject: [PATCH] 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. --- app/assets/css/launcher.css | 1 + app/assets/js/scripts/settings.js | 30 ++++++++++++++++++++++++------ 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 1c59a755..6d1ba8f2 100644 --- 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 index 1c91e50f..d82ad8f1 100644 --- 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) } } }