Overlay panels
-
@masterleo29
New code throw an error in dev tool and button is not shown
Uncaught ReferenceError: styleS is not defined at wait (overlay.js:54)
(exact copy of the one you posted, I'll keep both this and the "old" one)Kinda "fixed" with // at line 54
// styleS.innerHTML = csso_overlay;
Great mod, thanks again for this ^^
Some values are named
painel
. Shouldn't be all namedpanel
?
A transition delay - meant as "x" time before triggering the panel opening with hover/click will be the perfection but maybe isalready in the code -
@hadden89 I cleaned the code a bit so that it is easier to read. About the 'painel' variable, that's portuguese for 'panel'. I replaced the variables' names with english (kept the tooltips in portuguese for my usage).
And yes, there is already a transition delay on hover effect. You can change it if you want (on the overlay_hover function, look for the 'setTimeouts' and search for the number like '100' or '400')/** * 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); var styleS = document.createElement('style'); styleS.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(styleS); var web_panel = document.getElementById('panels-container'); var mode = 0; var panel = 0; var show_token; var hide_token; function overlay_click () { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Sobreposição 2"); pathS.style = circEye; mode = 1; } function overlay_hover () { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Encaixe"); pathS.style = circTarget; mode = 2 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); }; } web_panel.onmouseleave = function() { hide_token = setTimeout(function() { if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[panel].click() } }, 400); }; web_panel.onmouseenter = function() { clearTimeout(hide_token); }; } function original () { for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = ''; } web_panel.onmouseleave = ''; web_panel.onmouseenter = ''; styleS.innerHTML = ''; btnS.setAttribute("title", "Sobreposição"); pathS.style = cirdRing; mode = 0; } // set startup (replace this function with 1 of the above) original ();/*overlay_click ();*/ /*overlay_hover ();*/ // toggle logic document.getElementById('toggle').addEventListener('click', function() { /********************************************************/ var curr_width = web_panel.style.width; if (curr_width != "34px") { //In web_panel.style.transition = 'width 0.3s'; web_panel.style.width = "34px"; //Out setTimeout(function() { web_panel.style.width = curr_width; }, 350); setTimeout(function() { web_panel.style.transition = ''; }, 700); } /********************************************************/ if (mode == 0) { overlay_click(); }else if (mode == 1) { overlay_hover(); }else { original (); } /********************************************************/ }); } else { setTimeout(wait, 300); } }, 300);
-
@masterleo29 Thanks alot.
Taken the improved version. I'll look the setTimeouts values. -
These are some details I would like to change from Leonardo's version. Any idea how to make the panel toggle colored and the panel edge to match the page border?
-
@kallon You gotta set the z-index to make the panel edge disappear behind the address bar. I did this fix on retoree's initial code on page 2, look it up.
-
@luetage said in Overlay panels:
@kallon You gotta set the z-index to make the panel edge disappear behind the address bar. I did this fix on retoree's initial code on page 2, look it up.
z-index: 1?
Where do I insert it? -
-
@kallon If you would like a fix using my version, I got it here (funny story: I made this fix for a friend; forgot to post)
Just override the 'csso_overlay' variable with this:
(differences: 1 line xD)var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 1px; bottom: 0px;}'+ '#panels-container.right {right: 0; }'+ '#panels-container.left {left: 0; }'+ '#panel_switch {background-color: var(--colorBgDark);}'+ '/* 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; }';
EDIT: on the #panel_switch background color, you can use other css variable or even your own color
-
@masterleo29 said in Overlay panels:
@kallon If you would like a fix using my version, I got it here (funny story: I made this fix for a friend; forgot to post)
Just override the 'csso_overlay' variable with this:
(differences: 1 line xD)var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 1px; bottom: 0px;}'+ '#panels-container.right {right: 0; }'+ '#panels-container.left {left: 0; }'+ '#panel_switch {background-color: var(--colorBgDark);}'+ '/* 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; }';
EDIT: on the #panel_switch background color, you can use other css variable or even your own color
You sir, ROCK!
-
@kallon Thanks, man. You can't imagine how much I appreciate it
Btw, if you (or anyone for that matter) have more suggestions for this mod (my favorite one) or other mods, msg me. I like to code (in work, in my spare time, ...). For example, I also made a mod for a custom button to open privacy window (posted it), another to have bookmarks bar on speed dial only (posted) and atm i'm working on a scrollable tab bar (instead of shinking, saw some request around) -
@masterleo29 said in Overlay panels:
@kallon Thanks, man. You can't imagine how much I appreciate it
Btw, if you (or anyone for that matter) have more suggestions for this mod (my favorite one) or other mods, msg me. I like to code (in work, in my spare time, ...). For example, I also made a mod for a custom button to open privacy window (posted it), another to have bookmarks bar on speed dial only (posted) and atm i'm working on a scrollable tab bar (instead of shinking, saw some request around)Are you from Portugal or Brazil? If the latter, we're neighbors. Cheers from Uruguay!
-
@kallon Portugal
-
@masterleo29 That's the wrong fix, since you don't set the z-index, but shift the panel by 1px. I know this because I tried to fix it like this at first too. As far as I can recall this introduces several new problems on the bottom of panels.
Hiding the edge of the panel behind the address bar is how Vivaldi does it without any modifications, shifting it down is problematic. The way that works best is to set a z-index of 3 for the address bar and a z-index of 2 for the panel. If you follow my link above it's all there in the csso variable. You should actually know this since you used most of my code for your revised modification
-
@luetage I personally don't like/I'm not used to work too much with z-index, so I just changed the panel one. The fix I posted was for the toggle transparency (by setting the same color background 'manually'). The 1px change was just a 'regression', since I noticed it when it was mencioned here. ( I remember that I tried to change multiple z-indexes when I tried to fix the toggle transparency but it didn't work at the time)
And yes, this code is a modificiation from the original one. It was what gave me the idea to start 'playing' with some vivaldi mods on my spare time. I think (will check to be sure) that the 1º time i posted i mencioned it was a "tentative of improvement" or something like that. If I did not, then is my fault. Good job with the original code. (so far I believe I tweaked the css, upgraded the toggle and made that animation stuff between modes with timeouts and stuff),
EDIT: yeah ... the 'author' thing in the begining of the mod might lead to some erros (i'm used to type stuff like this at the start for sharing purposes, specially when working w/ other people so that I can see fast who's writing what)
-
@masterleo29 You didn't change the z-index of the panel – retoree did. The z-index of 1 is the reason why the panel is visible in the first place. It enables the overlay of the panel. But setting this z-index also means that the z-index of the panel is now higher than that of the addressbar. While on default Vivaldi the addressbar hides the edge of the panel, in the original css mod you are using for your own code, the edge is visible because of that z-index. I fixed that by giving the addressbar a higher z-index than the panel. Well, use it or don't use it, it's your choice. But it's the "vanilla" way to go about it and doesn't introduce further regressions like the current "1px fix" you are applying. I hope this makes sense.
-
@luetage Yes, it makes sense. About the z-index, when i said 'I changed' it was relative to original - no mod - panel, since i too tried to change the z-index for the address bar and other elements at the time the 'toggle panel transparency' bug reached to me (by a friend) and I didn't succedded. Will try to make another take again with z-indexes only.
Btw, thanks for sparing the time to explain the z-indexes way -
@MasterLeo29
Thanks for this script, it works perfectly.
A small request to add a little more flexibility :- the possibility to activate the overlay on different elements, the bar and/or the panel
- and the possibility to activate the mouse over or the click on the bookmarks/downloads/etc.
For example :
Button 1 > Sidebar Overlay On/Off
Button 2 > Webpanel Overlay On/Off
Button 3 > Toggle MouseOver on elements On/Off
I tried to modify your script, but obviously without success...
Thanks for your help!
-
@cjlan Glad you liked it! About your request, I will (try to) grab it soon and see what can I do. If you want (for learning purposes), you can send me what you have tried and I'll try to see what did you miss
-
@cjlan Update: I'm having dificulties to make the sidebar fixed with the wepanel in overlay (tl;dr: one of the options). Good think is this particular option will be available on the next vivaldi version (currently in snapshot).
I can send you my current work with only 2 buttons (1 for mouseover on/off; 1 for overlay onn/off) -
@knoelli said in Overlay panels:
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; }';
Hi, I've been using your suggestion smoothly for these months.
Now I decided to have fixed only the "Show panel" toggle (with the little arrow). Do you know what's the margin in pixels to avoid this little overlay? Thanks.