Overlay panels
-
-
-
@kallon I'm out of time today, when I get it perfectly I reply to you again
-
Based on the version from MasterLeo29, I found a simple way for options 2 and 3 so that the side bar does not overlay the webpage while the hover opens as temporary overlay. All that's needed is to give the #webview-container a left margin of 34 pixels, so the code should be:
var csso_overlay = '/* Overlay */ #panels-container { position: absolute; z-index: 1; top: 0px; bottom: 0; }#panels-container.right {right: 0; }/* Overlay - Sides */ #main.left #webview-container { margin-left: 34px;} #main.right #webview-container { margin-right: 0px;} /* Fullscreen */ #browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } #browser.fullscreen #panels-container { position: relative; }';
-
@knoelli This works if you keep the side bar always open and just open/close panels. If you try to hide all, it will leave behind the 34px border. Good job tho, not a perfect solution but a good solution for this case
-
@masterleo29 said in Overlay panels:
@kallon I'm out of time today, when I get it perfectly I reply to you again
Hey! Thank you both, what @knoelli is proposing works smooth!
Now, may I add something I noticed? When leaving mouse from the panel, sometimes I cannot make it close by itself. I have to make some more movements with the mouse until the panel closes. Such strange behavior.
Sorry I cannot contribute with something else because I am not CSS knowledgeable. -
@kallon That's something I noticed as well. For me, a workaround is to disable "Open download panel automatically" in Vivaldi's settings (section "Downloads").
The problem seems to be triggered once a download is started and Vivaldi opens the panel automatically - in this case, the panel is opened but without attaching the event listener to act on mouseout.
-
@kallon I cannot replicate that behavior, if you can narrow it down for me I might be able to fix it
-
@masterleo29 said in Overlay panels:
@kallon I cannot replicate that behavior, if you can narrow it down for me I might be able to fix it
What I was trying to explain is that on mouse leaving the panel is supposed to close, right? Well, that not always happen in my browser. Sometimes I leave mouse from the side panel, but it doesn't close, stays open until you keep moving the mouse somewhere.
-
@kallon That's a Vivaldi problem, not a problem with the mod. It's already somewhat fixed, but not completely.
-
-
@masterleo29 Have you seen my above comment? I can replicate the problem @kallon reported by the following steps:
- make sure "Open download panel automatically" is set
- startup Vivaldi, don't hover over any side panel button
- start a download
- side panel is opened automatically and won't close neither by entering it with the mouse nor by clicking somewhere in- or outside of the panel
- it will only close once I move the mouse above some side panel button (notes/history/...)
For this reason I concluded it must be because if Vivaldi expands the side panel automatically on download start, the event listener (mouseover/mousout) will not be added to the expandable area. Once the mouse is moved over a button, the event handler is added and the area will close.
Like I wrote above, a workaround is to disable "Open download panel automatically".
-
@knoelli I replicated your steps and yes, it happened to me aswell and agree with your explanation. However, @kallon didn't said it was only on downloads, he said that "sometimes happens", so his problem might be different from what you stated. That's why I susgested to remove the timeouts, just to test it out. And according to @luetage , it's a vivaldi problem.
Note: your workaround is still valid, it might just not solve all the cases that @kallon is experiencing -
as @luetage mentioned, it's a Vivaldi issue and one that was not present until the 1.15 branch. So it actually doesn't have to do with the panel, it's a focus issue. You can also reproduce this behaviour by hovering over the window control buttons (or toolbar buttons, etc.) and remove the cursor quickly, do not move it again and you will see the button is still highlighted as if it's being hovered. Vivaldi is not releasing focus for some odd reason. If you use @MasterLeo29's code in any of the previous branches you will notice that things work as they should.
I've mentioned this issue a few times in the snapshot stage and they said that they had an internal fix that they would add, which they did, but it's still not 100%. It is pretty annoying with my overlays as well
-
Uh oh, the newest snapshot (1.16) is even worse, hidden overlay elements do not get triggered at all from web pages, they only seem to respond when your cursor moves from a UI element
-
It does seem like in 1.16 that it doesn't recognize the mouse over a web page. The only way I can get it to close is to mouseover another UI element.
-
@recnamoruen Just tested it on 1.16 and it works fine for me. Tried with a clean profile? is there another mod implemented ? (just guesses)
-
@masterleo29 Cool
How can I start in "Encaixe" ?
It still start in resize mode even changingvar mode = x
Guess I'm doing some wrong as it works changing via button.Could you repost the whole script with the "patch" for transition effect? (I'm really bad in editing js :P)
-
@hadden89 Here you go. Anything else give me a heads up !
(P.S: The tooltips are in portuguese. 'encaixe' = 'fitting' )/** * Author: Leonardo Domingues * * #Web panel display enhancer * Toggle between * - Resize (Original) * - Overlay -> Click * - Overlay -> Hover * * Transition included */ setTimeout(function wait() { var adr = document.querySelector(".toolbar-addressbar.toolbar"); if (adr != null) { // Panel Overlay Toggle var switchS = document.getElementById('switch'); var btnS = document.createElement('button'); var svgS = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var pathS = document.createElementNS("http://www.w3.org/2000/svg", "path"); var circTarget = "d: path('M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var circEye = "d: path('M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var cirdRing = "d: path('M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 0px; bottom: 0;}'+ '#panels-container.right {right: 0; }'+ '/* Overlay - Sides */'+ '#main.left #webview-container { margin-left: 0px;}'+ '#main.right #webview-container { margin-right: 0px;} '+ '/* Fullscreen */'+ '#browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } '+ '#browser.fullscreen #panels-container { position: relative; }'; btnS.classList.add('preferences'); btnS.id = 'toggle'; btnS.setAttribute("tabindex", "-1"); svgS.setAttributeNS(null, "width", "26"); svgS.setAttributeNS(null, "height", "26"); svgS.setAttributeNS(null, "viewBox", "0 0 26 26"); switchS.lastChild.style = "margin-top: 0px"; switchS.insertBefore(btnS,switchS.lastChild); btnS.appendChild(svgS); svgS.appendChild(pathS); styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Encaixe"); pathS.style = circTarget; mode = 2 var show_token; for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = function() { clearTimeout(show_token); show_token = setTimeout(function() { if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[index].click(); panel = index; } }, 100); }; } var hide_token; document.getElementById('panels-container').onmouseleave = function() { hide_token = setTimeout(function() { if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[panel].click() } }, 400); }; document.getElementById('panels-container').onmouseenter = function() { clearTimeout(hide_token); }; var panel = 0; // toggle logic document.getElementById('toggle').addEventListener('click', function() { /********************************************************/ var painel = document.getElementById('panels-container'); var curr_width = painel.style.width; if (curr_width != "34px") { //In painel.style.transition = 'width 0.3s'; painel.style.width = "34px"; //Out setTimeout(function() { painel.style.width = curr_width; }, 350); setTimeout(function() { painel.style.transition = ''; }, 700); } /********************************************************/ if (mode == 0) { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Sobreposição 2"); pathS.style = circEye; mode = 1; }else if (mode == 1) { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Encaixe"); pathS.style = circTarget; mode = 2 var show_token; for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = function() { clearTimeout(show_token); show_token = setTimeout(function() { if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[index].click(); panel = index; } }, 100); }; } var hide_token; document.getElementById('panels-container').onmouseleave = function() { hide_token = setTimeout(function() { if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[panel].click() } }, 400); }; document.getElementById('panels-container').onmouseenter = function() { clearTimeout(hide_token); }; }else { for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = ''; } document.getElementById('panels-container').onmouseleave = ''; document.getElementById('panels-container').onmouseenter = ''; styleS.innerHTML = ''; btnS.setAttribute("title", "Sobreposição"); pathS.style = cirdRing; mode = 0; } /********************************************************/ }); } else { setTimeout(wait, 300); } }, 300);
-
@hadden89 To be honest, this code can be optimized/simplified a little. I just made it work and forgot to clean it up a bit. Soon I might do it and post it here, so it can be adjusted more easily