add hover-pop delay + grouping for left menu

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,

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.scale.classList.add('lt-active');
-            UI.rotate.classList.add('lt-enabled');
+            UI.rotate.classList.add('lt-active');
-            UI.nozzle.classList.add('lt-enabled');
+            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.scale.classList.remove('lt-active');
-            UI.rotate.classList.remove('lt-enabled');
+            UI.rotate.classList.remove('lt-active');
-            UI.nozzle.classList.remove('lt-enabled');
+            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();

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);
+            }
+        });
+    }
+
 })();

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;

web/kiri/index.html

@@ -72,7 +72,7 @@
                 <i class="fas fa-times-circle"></i>
             </div>
             <div id="lt-top"></div>
-            <div id="lt-setup" class="lt-menu lt-enabled">
+            <div id="lt-setup" class="lt-menu lt-active">
                 <i class="fas fa-cogs"></i>
                 <label>setup</label>
                 <div id="set-pop" class="pop-lcol f-row">
@@ -90,7 +90,7 @@
                     </div>
                 </div>
             </div>
-            <div id="lt-file" class="lt-menu lt-enabled">
+            <div id="lt-file" class="lt-menu lt-active">
                 <i class="fas fa-folder"></i>
                 <label>files</label>
                 <div id="file-pop" class="pop-lcol f-row">
@@ -105,7 +105,7 @@
                 </div>
             </div>
             <div id="act-sep"></div>
-            <div id="lt-view" class="lt-menu lt-enabled">
+            <div id="lt-view" class="lt-menu lt-active">
                 <i class="fas fa-eye"></i>
                 <label>view</label>
                 <div id="pop-view" class="pop-lcol f-row">
@@ -127,7 +127,7 @@
                     </div>
                 </div>
             </div>
-            <div id="act-slice" class="lt-menu lt-enabled">
+            <div id="act-slice" class="lt-menu lt-active">
                 <i class="fas fa-bars"></i>
                 <label id="label-slice" title="analyze parts">slice</label>
                 <div id="pop-slice" class="pop-lcol f-row">
@@ -146,7 +146,7 @@
                 </div>
             </div>
             <div id="lt-sep"></div>
-            <div id="lt-render" class="lt-menu lt-enabled">
+            <div id="lt-render" class="lt-menu lt-active">
                 <i class="fas fa-border-style"></i>
                 <label>render</label>
                 <div id="pop-render" class="pop-lcol f-row">