From 9d37b2e678de53945b3cfc06bc3371b58ed3ba8b Mon Sep 17 00:00:00 2001 From: Stewart Allen Date: Wed, 27 Jan 2021 17:58:04 -0500 Subject: [PATCH] add hover-pop delay + grouping for left menu --- src/kiri/init.js | 14 ++++++++++++++ src/kiri/main.js | 14 +++++++------- src/kiri/ui.js | 33 +++++++++++++++++++++++++++++++++ web/kiri/index.css | 7 +++++-- web/kiri/index.html | 10 +++++----- 5 files changed, 64 insertions(+), 14 deletions(-) diff --git a/src/kiri/init.js b/src/kiri/init.js index db42243c..edddbef4 100644 --- a/src/kiri/init.js +++ b/src/kiri/init.js @@ -1464,6 +1464,10 @@ back: $('lt-back'), trash: $('lt-trash'), + ltsetup: $('lt-setup'), + ltfile: $('lt-file'), + ltview: $('lt-view'), + ltact: $('act-slice'), rotate: $('lt-rotate'), scale: $('lt-scale'), nozzle: $('lt-nozzle'), @@ -2085,6 +2089,16 @@ UI.scaleX.was = UI.scaleY.was = UI.scaleZ.was = 1; }; + let ltpops = []; + UC.hoverPop(UI.ltsetup, { group: ltpops, target: $('set-pop') }); + UC.hoverPop(UI.ltfile, { group: ltpops, target: $('file-pop') }); + UC.hoverPop(UI.ltview, { group: ltpops, target: $('pop-view') }); + UC.hoverPop(UI.ltact, { group: ltpops, target: $('pop-slice') }); + UC.hoverPop(UI.render, { group: ltpops, target: $('pop-render') }); + UC.hoverPop(UI.rotate, { group: ltpops, target: $('pop-rotate') }); + UC.hoverPop(UI.scale, { group: ltpops, target: $('pop-scale') }); + UC.hoverPop(UI.nozzle, { group: ltpops, target: $('pop-nozzle') }); + UC.onBlur([ UI.toolName, UI.toolNum, diff --git a/src/kiri/main.js b/src/kiri/main.js index c6d1a9a3..af3b23ea 100644 --- a/src/kiri/main.js +++ b/src/kiri/main.js @@ -1515,9 +1515,9 @@ let menu_show = selcount ? 'flex': ''; $('winfo').style.display = 'none'; if (selcount) { - UI.scale.classList.add('lt-enabled'); - UI.rotate.classList.add('lt-enabled'); - UI.nozzle.classList.add('lt-enabled'); + UI.scale.classList.add('lt-active'); + UI.rotate.classList.add('lt-active'); + UI.nozzle.classList.add('lt-active'); UI.trash.style.display = 'flex'; if (feature.meta && selcount === 1) { let sel = selection.widgets()[0]; @@ -1537,9 +1537,9 @@ } } } else { - UI.scale.classList.remove('lt-enabled'); - UI.rotate.classList.remove('lt-enabled'); - UI.nozzle.classList.remove('lt-enabled'); + UI.scale.classList.remove('lt-active'); + UI.rotate.classList.remove('lt-active'); + UI.nozzle.classList.remove('lt-active'); UI.trash.style.display = ''; } UI.nozzle.style.display = extruders && extruders.length > 1 ? 'flex' : ''; @@ -2489,7 +2489,7 @@ complete = {}; UI.back.style.display = ''; UI.render.style.display = ''; - UI.render.classList.add('lt-enabled'); + // UI.render.classList.add('lt-enabled'); // KIRI.work.clear(); STACKS.clear(); hideSlider(); diff --git a/src/kiri/ui.js b/src/kiri/ui.js index 8aa1b96b..a014f9db 100644 --- a/src/kiri/ui.js +++ b/src/kiri/ui.js @@ -47,6 +47,7 @@ setExpert, setHoverPop, hidePoppers, + hoverPop, bound, toInt, toFloat, @@ -882,4 +883,36 @@ return array; } + function hoverPop(el, opt = {}) { + if (Array.isArray(el)) { + opt.group = []; + return el.forEach(ev => hoverPop(ev, opt)); + } + let group = opt.group || []; + let closes = opt.closes || group; + let target = opt.target || el; + group.push(target); + if (closes !== group) { + closes.push(target); + } + el.addEventListener("mouseenter", (ev) => { + clearTimeout(closes.timer); + for (let close of closes) { + close.classList.remove("hoverpop"); + } + target.classList.add("hoverpop"); + }); + el.addEventListener("mouseleave", (ev) => { + closes.timer = setTimeout(() => { + target.classList.remove("hoverpop"); + }, 750); + }); + document.addEventListener("keydown", (ev) => { + if (ev.keyCode === 27 || ev.code === 'Escape') { + target.classList.remove("hoverpop"); + clearTimeout(closes.timer); + } + }); + } + })(); diff --git a/web/kiri/index.css b/web/kiri/index.css index f4a6211e..d41b7a59 100644 --- a/web/kiri/index.css +++ b/web/kiri/index.css @@ -471,10 +471,10 @@ th, tr, td, label { .lt-menu label { font-size: smaller; } -.lt-enabled { +.lt-enabled, .lt-active { color: var(--fg-gray); } -.lt-enabled:hover { +.lt-enabled:hover, .lt-active:hover { background-color: #eee; border: 1px solid #aaa; color: #000; @@ -482,6 +482,9 @@ th, tr, td, label { .lt-enabled:hover .pop-lcol { display: flex; } +.lt-active .hoverpop { + display: flex; +} @media only screen and (max-height : 800px) { .lt-menu, .pop-lcol { font-size: 16px !important; diff --git a/web/kiri/index.html b/web/kiri/index.html index e3760d58..ef601e46 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -72,7 +72,7 @@
-
+
@@ -90,7 +90,7 @@
-
+
@@ -105,7 +105,7 @@
-
+
@@ -127,7 +127,7 @@
-
+
@@ -146,7 +146,7 @@
-
+