Overlay panels
-
I don't know, maybe some differences in the windows and mac ui?
-
I doubt it. But we will find out as soon as someone with Windows tries this.
-
In any case, it really works better for me by changing the csso var with Christoph's css, with animations off there's no extra wobbling whatsoever for me either with overlay or not.
var csso = '#main .inner { position: relative; } #panels-container { position: absolute; z-index: 1; top: 0; bottom: 0; background-color: var(--colorBg); } #panels-container.right { right: 0; }';
The important thing is that your mod is cool and can be adapted to both our needs easily.
-
@ian-coog said in Overlay panels:
In any case, it really works better for me by changing the csso var with Christoph's css
var csso = '#main .inner { position: relative; } #panels-container { position: absolute; z-index: 1; top: 0; bottom: 0; background-color: var(--colorBg); } #panels-container.right { right: 0; }';
That is pretty much the same thing I am using too. The code that was in the mod gave issues for me as well on Windows 8.1
-
Wrong contribution.
-
-
@retoree I have tabs on top and works flawlessly this way for me.
-
@ian-coog you really shouldn't have to answer I just explained what the differences. The two of them.
-
I tried the JS version with the mod where the panel container also overlays and I'm totally overwhelmed - great job!
As I tried this after the "pure" CSS hover mod, I'd like to combine both variants - have the JS switch for overlay/non-overlay AND flip out on hover.
Is this possible?
As far as I understood the CSS version, the "hover" action is not opening/closing the panel, but making it small (=disappear) or larger (=appear), with the disadvantage that the original resizing by gripping the border does not work any longer.
I must however admit that I don't fully understand the js logic..
Does anyone know a way to "really" switch panels per JS? (or CSS...) -
@morg42 It's hard to tell what you really want, since you are mixing up terminology. We have the panel container, and clicking on an item in the panel container shows a panel.
You want the panel container to disappear and appear on hover and then the actual panels to either overlay or work standard? I don't think that's possible, because if the panel container is already an overlay, the actual panel can't work in standard mode anymore.
-
I tried not mixing up terminology, but saying what I tried and wanted
We agree on terms of panel and panel container.
I would like the JS "overlay switch" in combination with a "hover to show panel" or "hover to show panel and panel container", whatever works better.
In consequence, I would like to show as few as possible (only the panel switcher "small bar with triangle" or the panel container) and the rest to pop out when hovering over it.
The first functionality is completely covered by the JS solution; the second is completely covered by your CSS solution (thanks for that, btw).
The combination of both would be perfect - pop out when hovering and be able to toggle if popping out means overlay the webpage or "push" the website aside.
-
@morg42 I didn't write any css for this, other than a little fixing, I only made the toggle which injects it. Anyway, I suggest you look at this thread: https://forum.vivaldi.net/topic/21528/animated-overlays/, which overlays the panel container on hover. You could try and split it up (one part of code issued by toggle), but not sure, if this can work. My earlier doubts still stand.
-
Ah, now I see - I got to this thread via a link which started at page 2, so one of your contributions was my first "seen" code...
Basically, I'd like the following:
nothing is shown at left window edge (except maybe for the thin triangle line "panel switcher")
by hovering I can popout the panel container and the selected panel (I dont show the panel container, just open/close both together with F4 to keep more screen space)
while hovering, I can select different panels
by "un-hovering", both elements pop under/outIn this scenario, overlay seems to me to be the proper display mode.
Alternatively, I just open the panel container and panel with F4 as usual and they take away rendering area (not overlaying).
The option "overlay on/off" more or less as implemented in the current JS could toggle both alternatives.
The only thing missing now (JS active) is the hover mechanism.
Hm. I'm running out of ways to describe this further
-
@morg42 Well, that works of course. Just exchange the current css for the version you like best from the thread I linked. This means opening your current javascript file, deleting the css part and pasting the new css in.
-
Will try that, thank you.
-
Ok, so this is my try...
This more or less combines
- the overlay functionality
- the "pop out on hover" functionality
- the possibility to switch between "standard no-hover no-overlay" and "pop-out as overlay on hover"
I added a second line so you can choose if you want the panel-container to pop-out/disappear also or only the panel itself.
The mod is not as smooth as the others as it only enables the panels to be on the left window edge without changing it.
Update:
when switching from "off" to "overlay", the current width of the panels-container is read and inserted into CSS, so that the overlay width fits the displayed panel width. If the widths are off, switch overlay off and on again.
custom.js:
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 circE = "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 circD = "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"; // pop-out both panel-container and panel var csso_tmpl = '#main .inner { position: relative; } #panels-container { position: absolute; z-index: 25; top: 0; bottom: 0; width: 6px !important; background-color: var(--colorBg); transition: width 0.2s linear 0.2s; } #panels-container:hover { width: ###px !important; }'; // pop-out only panel; show panel-container permanently // var csso_tmpl = '#main .inner { position: relative; } #panels-container { position: absolute; z-index: 25; top: 0; bottom: 0; width: 34px !important; background-color: var(--colorBg); transition: width 0.2s linear 0.2s; } #panels-container:hover { width: ###px !important; }'; btnS.classList.add('preferences'); btnS.id = 'overlay'; 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); // (un)comment the following blocks as wanted /* // startup in normal mode var styleS = document.createElement('style'); styleS.type = 'text/css'; styleS.innerHTML = ''; document.getElementsByTagName('head')[0].appendChild(styleS); btnS.setAttribute("title", "Enable Overlay"); pathS.style = circD; var mode = 0; */ // get current width of panels-container and update CSS before inserting nWidth = document.getElementById('panels-container').offsetWidth; csso = csso_tmpl.replace('###', nWidth); // startup in overlay mode var styleS = document.createElement('style'); styleS.type = 'text/css'; styleS.innerHTML = csso; document.getElementsByTagName('head')[0].appendChild(styleS); btnS.setAttribute("title", "Disable Overlay"); pathS.style = circE; var mode = 1; // toggle logic document.getElementById('overlay').addEventListener('click', function() { if (mode == 0) { // get current width of panels-container and update CSS before inserting nWidth = document.getElementById('panels-container').offsetWidth; csso = csso_tmpl.replace('###', nWidth); styleS.innerHTML = csso; btnS.setAttribute("title", "Disable Overlay"); pathS.style = circE; mode = 1; } else { styleS.innerHTML = ''; btnS.setAttribute("title", "Enable Overlay"); pathS.style = circD; mode = 0; } }); } else { setTimeout(wait, 300); } }, 300);
-
@retoree nice, thanks man.
-
@morg42 said in Overlay panels:
Ok, so this is my try...
This more or less combines
- the overlay functionality
- the "pop out on hover" functionality
- the possibility to switch between "standard no-hover no-overlay" and "pop-out as overlay on hover"
I added a second line so you can choose if you want the panel-container to pop-out/disappear also or only the panel itself.
The mod is not as smooth as the others as it only enables the panels to be on the left window edge without changing it.
Update:
when switching from "off" to "overlay", the current width of the panels-container is read and inserted into CSS, so that the overlay width fits the displayed panel width. If the widths are off, switch overlay off and on again.
custom.js:
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 circE = "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 circD = "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"; // pop-out both panel-container and panel var csso_tmpl = '#main .inner { position: relative; } #panels-container { position: absolute; z-index: 25; top: 0; bottom: 0; width: 6px !important; background-color: var(--colorBg); transition: width 0.2s linear 0.2s; } #panels-container:hover { width: ###px !important; }'; // pop-out only panel; show panel-container permanently // var csso_tmpl = '#main .inner { position: relative; } #panels-container { position: absolute; z-index: 25; top: 0; bottom: 0; width: 34px !important; background-color: var(--colorBg); transition: width 0.2s linear 0.2s; } #panels-container:hover { width: ###px !important; }'; btnS.classList.add('preferences'); btnS.id = 'overlay'; 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); // (un)comment the following blocks as wanted /* // startup in normal mode var styleS = document.createElement('style'); styleS.type = 'text/css'; styleS.innerHTML = ''; document.getElementsByTagName('head')[0].appendChild(styleS); btnS.setAttribute("title", "Enable Overlay"); pathS.style = circD; var mode = 0; */ // get current width of panels-container and update CSS before inserting nWidth = document.getElementById('panels-container').offsetWidth; csso = csso_tmpl.replace('###', nWidth); // startup in overlay mode var styleS = document.createElement('style'); styleS.type = 'text/css'; styleS.innerHTML = csso; document.getElementsByTagName('head')[0].appendChild(styleS); btnS.setAttribute("title", "Disable Overlay"); pathS.style = circE; var mode = 1; // toggle logic document.getElementById('overlay').addEventListener('click', function() { if (mode == 0) { // get current width of panels-container and update CSS before inserting nWidth = document.getElementById('panels-container').offsetWidth; csso = csso_tmpl.replace('###', nWidth); styleS.innerHTML = csso; btnS.setAttribute("title", "Disable Overlay"); pathS.style = circE; mode = 1; } else { styleS.innerHTML = ''; btnS.setAttribute("title", "Enable Overlay"); pathS.style = circD; mode = 0; } }); } else { setTimeout(wait, 300); } }, 300);
OMG this is so what I've been searching for months. Thank you!
EDIT: Separate width does not work. How may I enable it?
-
Can anybody of you who posted code, take a look at the "separate width" function? I can't seem to make it work. I have to use the same width for all my panels
-
I'm not sure what separate width is but I can guess. As I only modified the code, I must assume that separate width will not work with this implementation of mouse-over. A constant overlay (on/off with F4 or whatever) might work, but mouse-over changes the css with a fixed width parameter. At the moment we can not even change the width "live" (you have to change panel width and then turn mouse-over off and on again to apply the new value. I have no clue whatsoever where the individual panel widths might be stored or if they can be accessed.
Maybe one of the original authors might be able to tell you more...