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 on mobile. improve look of slider in dark mode

Browse source
This commit is contained in:
Stewart Allen 2022-10-17 10:48:12 -04:00
commit 4d96fc7cd2
4 changed files with 34 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
release.md
View file

@ -5,7 +5,7 @@ Full docs @ https://docs.grid.space/projects/kiri-moto
# Release 3.6
* mobile pinch zoom and layer slider improvements
* mobile pinch zoom and layer slider usability improvements
* update CLI to work in CAM mode and add working samples
* improved FDM preview rendering speed and reduced memory usage
* threaded task and message passing performance improvements

11
src/kiri/init.js
View file

@ -2049,11 +2049,18 @@ gapp.register("kiri.init", [], (root, exports) => {
}
// slider setup
const slbar = 30;
const mobile = moto.space.info.mob;
const slbar = mobile ? 80 : 30;
const slbar2 = slbar * 2;
const slider = ui.sliderRange;
const drag = { };
if (mobile) {
ui.slider.classList.add('slider-mobile');
ui.sliderLo.classList.add('slider-mobile');
ui.sliderHi.classList.add('slider-mobile');
}
function pxToInt(txt) {
return txt ? parseInt(txt.substring(0,txt.length-2)) : 0;
}
@ -2081,7 +2088,7 @@ gapp.register("kiri.init", [], (root, exports) => {
drag.hiat = pxToInt(ui.sliderHold.style.marginRight);
drag.mdmax = drag.width - slbar - drag.loat;
drag.himax = drag.width - slbar - drag.mdat;
let cancel_drag = tracker.onmouseup = (ev) => {
let cancel_drag = tracker.ontouchend = tracker.onmouseup = (ev) => {
if (ev) {
ev.stopPropagation();
ev.preventDefault();

3
src/moto/space.js
View file

@ -1444,7 +1444,8 @@ gapp.register("moto.space", [], (root, exports) => {
ver: ctx.getParameter(ctx.VERSION),
ven: ctx.getParameter(ctx.VENDOR),
glr: ctx.getParameter(ctx.RENDERER),
pla: nav.platform
pla: nav.platform,
mob: nav.maxTouchPoints > 1 || (/android/i.test(nav.userAgent))
};
initialized = true;

27
web/kiri/index.css
View file

@ -3,6 +3,7 @@
--bg-gray: rgba(0,0,0,0.25);
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
--holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
--holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1));
--holdbar-sf: linear-gradient(to top, rgba(200,200,200,0.1), rgba(255,255,255,1), rgba(200,200,200,0.1)) !important;
--highlight: rgba(126,153,183,0.4);
--main-color: rgba(126,153,183,1);
@ -1531,6 +1532,9 @@ th, tr, td, label {
bottom: 3px;
pointer-events: all;
}
#slider.slider-mobile {
height: 40px !important;
}
#slider {
display: none;
height: 30px;
@ -1552,15 +1556,16 @@ th, tr, td, label {
flex-direction: row;
align-items: center;
}
#slider-max {
background-color: #ccc;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 3px;
.dark #slider-center {
background-image: var(--holdbar-dk);
}
#slider-center {
background-image: var(--holdbar);
}
.dark #slider-zero, .dark #slider-max {
background-color: #555;
color: white;
}
#slider-zero {
z-index: 10;
margin-right: 3px;
@ -1568,6 +1573,15 @@ th, tr, td, label {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#slider-max {
background-color: #ccc;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 3px;
}
.dark #slider-hold {
background-color: rgba(255,255,255,0.25);
}
#slider-hold {
background-color: rgba(0,0,0,0.15);
position: absolute;
@ -1575,6 +1589,9 @@ th, tr, td, label {
right: 0;
top: 0;
}
#slider-hold .slider-mobile {
width: 40px !important;
}
#slider-hold .handle {
width: 15px;
height: 100%;