AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

increase slider handle size

Browse source
This commit is contained in:
Stewart Allen 2020-06-15 12:07:16 -04:00
commit 9e3f937404
2 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/kiri/init.js
View file

@ -1489,6 +1489,8 @@
}); });
// slider setup // slider setup
const slbar = 30;
const slbar2 = slbar * 2;
const slider = UI.sliderRange; const slider = UI.sliderRange;
const drag = { }; const drag = { };
@ -1498,7 +1500,7 @@
function sliderUpdate() { function sliderUpdate() {
let start = drag.top / drag.maxval; let start = drag.top / drag.maxval;
let end = (drag.top + drag.mid - 20) / drag.maxval; let end = (drag.top + drag.mid - slbar) / drag.maxval;
API.event.emit('slider.pos', { start, end }); API.event.emit('slider.pos', { start, end });
API.var.layer_hi = Math.round((1 - start) * API.var.layer_max); API.var.layer_hi = Math.round((1 - start) * API.var.layer_max);
API.var.layer_lo = Math.round((1 - end) * API.var.layer_max); API.var.layer_lo = Math.round((1 - end) * API.var.layer_max);
@ -1511,12 +1513,12 @@
tracker.style.display = 'block'; tracker.style.display = 'block';
ev.stopPropagation(); ev.stopPropagation();
drag.height = slider.clientHeight; drag.height = slider.clientHeight;
drag.maxval = drag.height - 40; drag.maxval = drag.height - slbar2;
drag.start = ev.screenY; drag.start = ev.screenY;
drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop); drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop);
drag.mdat = drag.mid = UI.sliderMid.clientHeight; drag.mdat = drag.mid = UI.sliderMid.clientHeight;
drag.mdmax = drag.height - 20 - drag.hiat; drag.mdmax = drag.height - slbar - drag.hiat;
drag.himax = drag.height - 20 - drag.mdat; drag.himax = drag.height - slbar - drag.mdat;
let cancel_drag = tracker.onmouseup = (ev) => { let cancel_drag = tracker.onmouseup = (ev) => {
if (ev) { if (ev) {
ev.stopPropagation(); ev.stopPropagation();
@ -1539,7 +1541,7 @@
dragit(UI.sliderHi, (delta) => { dragit(UI.sliderHi, (delta) => {
let midval = drag.mdat - delta; let midval = drag.mdat - delta;
let topval = drag.hiat + delta; let topval = drag.hiat + delta;
if (midval < 20 || topval < 0) { if (midval < slbar || topval < 0) {
return; return;
} }
UI.sliderHold.style.marginTop = `${topval}px`; UI.sliderHold.style.marginTop = `${topval}px`;
@ -1555,7 +1557,7 @@
sliderUpdate(); sliderUpdate();
}); });
dragit(UI.sliderLo, (delta) => { dragit(UI.sliderLo, (delta) => {
let midlen = Math.max(20, Math.min(drag.mdmax, drag.mdat + delta)); let midlen = Math.max(slbar, Math.min(drag.mdmax, drag.mdat + delta));
UI.sliderMid.style.height = `${midlen}px`; UI.sliderMid.style.height = `${midlen}px`;
drag.mid = midlen; drag.mid = midlen;
sliderUpdate(); sliderUpdate();
@ -1591,11 +1593,11 @@
API.event.on('slider.set', (values) => { API.event.on('slider.set', (values) => {
let height = slider.clientHeight; let height = slider.clientHeight;
let maxval = height - 40; let maxval = height - slbar2;
let start = Math.max(0, Math.min(1, values.start)); let start = Math.max(0, Math.min(1, values.start));
let end = Math.max(start, Math.min(1, values.end)); let end = Math.max(start, Math.min(1, values.end));
let topval = start * maxval; let topval = start * maxval;
let midval = ((end - start) * maxval) + 20; let midval = ((end - start) * maxval) + slbar;
UI.sliderHold.style.marginTop = `${topval}px`; UI.sliderHold.style.marginTop = `${topval}px`;
UI.sliderMid.style.height = `${midval}px`; UI.sliderMid.style.height = `${midval}px`;
}); });

6
web/kiri/index.css
View file

@ -768,9 +768,9 @@ and (orientation : landscape) {
display: none; display: none;
position: absolute; position: absolute;
font-size: smaller; font-size: smaller;
top: 10px; top: 15px;
right: 3px; right: 3px;
bottom: 10px; bottom: 15px;
width: 50px; width: 50px;
} }
#slider-hi-val, #slider-lo-val { #slider-hi-val, #slider-lo-val {
@ -813,7 +813,7 @@ and (orientation : landscape) {
} }
#slider-hold .handle { #slider-hold .handle {
width: 100%; width: 100%;
height: 10px; height: 15px;
border-radius: 3px; border-radius: 3px;
background-color: var(--bg-gray); background-color: var(--bg-gray);
} }