Overlay panels



  • @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...



  • Nice ^^



  • @morg42 Thanks for your such detailed reply. Last petition (I promise), can somebody advise how the "x" for closing tabs, can be moved to the left side of the tab title? Inaccuracy makes me most of the time hover mouse out of the panel instead of clicking "x".



  • I love this mod, but I'm wondering if it's possible to get the panels closed by clicking or touching outside them. Something like this:

    I want to check my last.fm scrobbles so I click on its icon in the side bar to open the panel. I check my scrobbles, I want to come back to what i was doing, so I click outside the panel and it disappears, keeping visible only the side bar.

    I think it could be a very useful feature 🙂

    I hope you'll understand what I'm trying to say because English is not my mother language XD



  • @holotaco said in Overlay panels:

    I love this mod, but I'm wondering if it's possible to get the panels closed by clicking or touching outside them. Something like this:

    I want to check my last.fm scrobbles so I click on its icon in the side bar to open the panel. I check my scrobbles, I want to come back to what i was doing, so I click outside the panel and it disappears, keeping visible only the side bar.

    I think it could be a very useful feature 🙂

    I hope you'll understand what I'm trying to say because English is not my mother language XD

    And what if you want to click something on the page but still keep your panel open?



  • @kallon You simply change between 2 modes with the button, one closes on click outside, the other doesn't.



  • @holotaco Not exactly what you asked for, but did you try the code above?

    It opens on "mouse touches side of windows" and closes on "mouse leaves panel area". This should mostly do what you want, no?



  • @kallon You can already do it with the code previously posted
    @Morg42 I saw it, but I'm as precise as an elephant in a glassware XD
    I think it's not the best solution for me but I don't pretend anyone to spend hir time to write lines of code. It's just a suggestion, maybe someone gets here and finds out ze need this feature like it's oxygen 😛
    I think I didn't write in English, sorry :c



  • @holotaco precise... you're talking about "hitting" the border? I have enabled the small "panel switcher". If the window is not at the border of the screen, I also have to aim precisely; mostly the window does end at the screen border, so I just drive the mouse pointer into the left barrier. It can recuperate while I'm using the panel 😉

    Otherwise, it is possible to (re-)change the code so the panel container (with the icons) stays open all the time and only the panels fly out. Not as neat, but easier to hit... 😉



  • @holotaco
    @kallon
    @Morg42

    I'm also interested in closing the overlay as soon as a click outside the panel happens.
    It's the natural behaviour of overlays, like seen in Windows start menu or window menus (File, Edit, View, ...)

    An extra button for that behaviour would be nice, although I think keeping the panel open as an overlay doesn't make too much sense as it partially hides web content and for me it never happens that I navigate a site with left clicks (unlike scrolling) while leaving my Bookmarks or Downloads panel open.

    So for me it could also make sense to merge functionalities in the exisiting Toggle button:
    Untoggled: Panel resizes webpage and stays open until pressing the current panel button (->classic sidebar)
    Toggled: Panel as overlay which closes if mouse is pressed on webpage (->classic overlay)

    The hover feature is also nice, but not so much in windowed mode/on tablets and for me the less natural one.
    I hope that a vivaldi employee could pick up some of the proposals posted here and deliver it as a nice finished product with in-browser settings (ღ˘⌣˘ღ)



  • @g3nbas I agree concerning tablets - but then the concept of "hovering" need mouse pointers to act on in the first place...

    Windowed mode might be an annoyance, as you have to "target" the slim line exactly. Possibly you can keep the panel selector (with the icons) open, so you have a wider margin of error (or target).

    As you don't want to click outside the panel while it's open, it seems even more naturally for me to close it if the mouse pointer leaves the area (and as it opens again without any page interaction, so you can open and close it even with actions outside Vivaldi in between. (Internally, the panel is open all the time, just hidden).

    The code can be modified to open/close the panel in an overlay way (instead of pushing the page aside), which is also describe in a topic which I don't have handy right now. I tried it and it was much more counterintuitive to have an overlay/flyout which I needed to close manually. So I went with the hover/flyout variant.



  • @morg42 The variant pop-out only panel; show panel-container permanently makes the panel-container cover a portion of the page instead of showing next to the page. I think for this to work ok the code should include a resizing of the page in order that full content can be displayed.
    Overlay should only be once I hover the mouse on the panel. Right?



  • @kallon Yeah, that's right.

    For the mentioned functionality you need to change the js code. The needed code is already there, only commented out.

    Change

    // 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; }';
    

    to

    // 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; }';
    

    in the js file and try again. It should work... 🙂



  • @morg42 Hey that was a quick reply!
    I didn't make myself clear. I already knew how to change between options.

    However, the issue I am exposing is that the always visible piece of panel does cover the page instead of sticking next to it. It is more noticeable when you choose pop-out only panel; show panel-container permanently


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.