add hover-pop delay + grouping for left menu
This commit is contained in:
Stewart Allen
parent
e8ce2f66d1
commit
9d37b2e678
5 changed files with 64 additions and 14 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue