fix overflowing ops lists and popup positioning
This commit is contained in:
parent
46c135ba23
commit
d7acc93872
3 changed files with 26 additions and 19 deletions
|
|
@ -320,6 +320,7 @@ export function opRender() {
|
|||
el.classList.add("disabled");
|
||||
}
|
||||
bounds.push(el);
|
||||
let parent = $('camops');
|
||||
let timer = null;
|
||||
let inside = true;
|
||||
let popped = false;
|
||||
|
|
@ -329,14 +330,14 @@ export function opRender() {
|
|||
}
|
||||
el.rec = rec;
|
||||
el.unpop = () => {
|
||||
let pos = [...el.childNodes].indexOf(poprec.div);
|
||||
let pos = [...parent.childNodes].indexOf(poprec.div);
|
||||
if (pos >= 0) {
|
||||
el.removeChild(poprec.div);
|
||||
parent.removeChild(poprec.div);
|
||||
}
|
||||
popped = false;
|
||||
};
|
||||
function onEnter(ev) {
|
||||
if ((surfaceOn || traceOn) && env.poppedRec != rec) {
|
||||
if ((clock || surfaceOn || traceOn) && env.poppedRec != rec) {
|
||||
return;
|
||||
}
|
||||
if (popped && env.poppedRec != rec) {
|
||||
|
|
@ -351,22 +352,24 @@ export function opRender() {
|
|||
popped = true;
|
||||
poprec.use(rec);
|
||||
env.hoveredOp = el;
|
||||
if (!clock) {
|
||||
// offset Y position of pop div by % of Y screen location of button
|
||||
el.appendChild(poprec.div);
|
||||
poprec.addNote();
|
||||
const { innerHeight } = window;
|
||||
const brect = ev.target.getBoundingClientRect();
|
||||
const prect = poprec.div.getBoundingClientRect();
|
||||
const pcty = (brect.top / innerHeight) * 0.9;
|
||||
const offpx = -pcty * prect.height;
|
||||
poprec.div.style.transform = `translateY(${offpx}px)`;
|
||||
}
|
||||
// offset Y position of pop div by % of Y screen location of button
|
||||
parent.appendChild(poprec.div);
|
||||
poprec.addNote();
|
||||
const { innerHeight } = window;
|
||||
const brect = ev.target.getBoundingClientRect();
|
||||
const prect = parent.getBoundingClientRect();
|
||||
const Prect = poprec.div.getBoundingClientRect();
|
||||
const tdiff = prect.top - brect.top;
|
||||
const botoff = innerHeight - (brect.top + Prect.height);
|
||||
const offpx = -tdiff + (botoff < 0 ? botoff : -Prect.height/3);
|
||||
poprec.div.style.transform = `translateY(${offpx}px)`;
|
||||
poprec.div.onmouseenter = () => { inside = true };
|
||||
poprec.div.onmouseleave = onLeave;
|
||||
// option click event appears latent
|
||||
// and overides the sticky settings
|
||||
setTimeout(() => {
|
||||
UC.setSticky(false);
|
||||
}, 0);
|
||||
}, 10);
|
||||
}
|
||||
function onLeave(ev) {
|
||||
inside = false;
|
||||
|
|
|
|||
|
|
@ -1375,12 +1375,16 @@ details[open] summary::after {
|
|||
}
|
||||
#camops {
|
||||
display: flex;
|
||||
padding: 5px 0 0 0;
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
#oplist {
|
||||
max-height: 70vh;
|
||||
/* overflow-y: auto; */
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.cam-pop-op {
|
||||
top: 50%;
|
||||
top: 0;
|
||||
right: calc(100% + 4px);
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -420,7 +420,7 @@
|
|||
<div class="set2-group f-col mode-cam">
|
||||
<div class="set-header mode-cam"><a>operation list</a></div>
|
||||
<div id="camops" class="f-col a-stretch grow">
|
||||
<div id="oplist" class="f-col j-center"></div>
|
||||
<div id="oplist" class="f-col"></div>
|
||||
<div id="op-add" class="opdiv">
|
||||
<i class="fas fa-plus"></i>
|
||||
<div id="op-add-pop" class="f-col">
|
||||
|
|
|
|||
Loading…
Reference in a new issue