Overlay panels



  • @kallon Yeah, I know what you mean and I was sorely convinced that the code does exactly that.

    However, on reading the code again, I found the two code snippets are identical, so uncommenting one instead of the other achieves a great and glorious ... nothing.

    I'll just dive into it and hope to come out head first 😉

    //edit...

    Okay, so this didn't get me further. It seems that for the "complete" hover solution, there is a container #panels-container which includes all the switcher and container items. As it includes shown and hidden elements, it can be used for the :hover argument.

    If I want to only show ("pop-out") the panel itself, I'm at a loss how to change one element's CSS by hovering over another. I'm not even sure this is possible, but certainly not by me, sorry.

    Maybe some of the other CSS gurus here are able to help you on this; without some guidance, I can't.



  • @morg42 It's pretty straightforward, if you want to use css only, you can only change a child element when you hover the parent, but not vice versa. It's called cascading style sheet for a reason. But I have no idea what you guys are talking about ^^



  • Ok I see I am not being able to tell what's happening (not English native speaker).
    I took a screenshot of Vivaldi home page and this it what it looks like:

    0_1521466753086_Overlay panel.png

    See that the panel container covers a portion of the page? Look at the Vivaldi logo.

    Does this happen to you as well?



  • @kallon It depends on which version you are using. @retoree and I wrote one where that doesn't happen, others want it that way. You have to try out the different solutions posted in this thread and see which one suits you.



  • @luetage I am using @Morg42 version which combines mouse hovering functionality. I have now tried your version and it works ok, but I lose hovering function 😞



  • @kallon Shifting the webpage on hover to make room for the panel container looks clumsy and I don't even know if that's easily possible. But by all means, try to make it happen. Good luck.



  • @luetage I think we are back at my earlier ... wall.

    The shown panel container should not hover and not overlay, but be visible permanently. On hover the panel should pop out as an overlay.

    I tried it, but I didn't get it to work...



  • Not sure if this helps anyone but here's the code I'm using and it seems to do what you want.

    I suppose it's worth noting that I'm only using pure css since I don't care about the toggle functionality.

    #main .inner {
        position: relative;
    }
    #panels-container {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
    	background-color: var(--colorBg);
    	opacity: 0.9;
    }
    .address-top.bookmark-bar-bottom #panels-container,
    .address-top.bookmark-bar-off #panels-container {
        top: 1px;
    }
    #panels-container.right {
        right: 0;
    }
    #panels-container.left + #webview-container, #panels-container.left ~ #tabs-container.left {
        margin-left: 34px;
    }
    #panels-container.right ~ #webview-container, #panels-container.right ~ #tabs-container.right {
        margin-right: 34px;
    }
    #browser.tabs-right #webview-container {
        margin-right: 0;
    }
    #panels-container.left.switcher + #webview-container, #panels-container.left.switcher ~ #tabs-container.left {
        margin-left: 0;
    }
    #panels-container.right.switcher ~ #webview-container, #panels-container.right.switcher ~ #tabs-container.right {
        margin-right: 0;
    }
    #browser.tabs-right #webview-container {
        margin-right: 0;
    }
    #browser.fullscreen #webview-container, #browser.fullscreen #tabs-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #browser.fullscreen #panels-container {
        position: relative;
    }
    
    @keyframes show-panel {
    	0% {
    		max-width: 34px;
    	}
    	100% {
    		max-width: 500px;
    	}
    }
    @keyframes hide-panel {
    	0% {
    		max-width: 500px;
    	}
    	100% {
    		max-width: 34px;
    
    	}
    }
    #panels-container /*.panels .panel-group*/ {
    	animation: hide-panel 2s ease forwards !important;
    	animation-delay: 1s !important;
    }
    #panels-container:hover /*.panels .panel-group*/, #panels-container:focus-within /*.panels .panel-group*/ {
    	animation: show-panel 0s ease forwards !important;
    }
    #panels-container:after {
    	background-color: transparent !important;
    }
    

    Oh and also this is for panel on the right not the left. You can use it as is on the left but the animations don't look as nice.



  • @narsis Thanks for your cooperation. Does this support mouse hover opening panel function?



  • @kallon As far as I know yes. 🙂



  • I've tested a few ideias out here, but none worked (for me) that well, so i sorta put together my alternative for this mod. It allows to toggle between normal mode (default), overlay mode (on click) and overlay mode with on hover trigger (open panels by hover. closed when no longer 'in the area')
    Feedback would be appreciated ^^

    /**
     * Author: Leonardo Domingues
     * 
     * #Web panel display enhancer
     * Toggle between
     * 		- Resize (Original)
     * 		- Overlay -> Click
     * 		- Overlay -> Hover
     */
    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";
    
    		//on click
    		var csso_overlay = '#main .inner { position: relative; }/* 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 = '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);
    
    		
    		// startup in normal mode
    		var styleS = document.createElement('style');
    		styleS.type = 'text/css';
    		styleS.innerHTML = '';
    		document.getElementsByTagName('head')[0].appendChild(styleS);
    		btnS.setAttribute("title", "Sobreposição");
    		pathS.style = cirdRing;
    		var mode = 0;
    
    		var panel = 0;
    
    		// toggle logic
    		document.getElementById('overlay').addEventListener('click', function() {
    			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
    				
    				for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) 
    				{
    					switchS.getElementsByTagName('button')[index].onmouseover = function(){
    						if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) {
    							switchS.getElementsByTagName('button')[index].click();
    							panel = index;
    						}
    					};
    				}
    
    				document.getElementById('panels-container').onmouseleave = function(){
    					if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) {
    						switchS.getElementsByTagName('button')[panel].click()
    					}
    				};
    
    			}else {
    				for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) 
    				{
    					switchS.getElementsByTagName('button')[index].onmouseover = '';
    				}
    				document.getElementById('panels-container').onmouseleave = '';
    
    				styleS.innerHTML = '';
    				btnS.setAttribute("title", "Sobreposição");
    				pathS.style = cirdRing;
    				mode = 0;
    			}
    		});
    
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);


  • @masterleo29

    Works as expected, good job.

    The only thing I would add (and this is just personal preference) would be a transition. It can reduce accidental triggers with a delay and look nicer too. And even if it does get unwittingly triggered, the transition will bring a portion of the panel into view instead and then retract rather than having the whole thing popping out over the page.

    hmm, upon further testing, for me the hover effect makes the panels themselves too sensitive, it's too easy to unintentionally switch from notes to bookmarks, etc.



  • @sjudenim First of all, thanks for the compliment.

    I think I can give a try and work on the transition effect (and perhaps adjust the hover effect to trigger after a few ms, to smooth it a bit) on my spare time, will update you if I'm successful.



  • @sjudenim Not sure if it was what u referred to, but I changed it a little bit (trick: settimeout everywhere xD)

    /**
     * Author: Leonardo Domingues
     * 
     * #Web panel display enhancer
     * Toggle between
     * 		- Resize (Original)
     * 		- Overlay -> Click
     * 		- Overlay -> Hover
     */
    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";
    
    		//on click
    		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; }';
    
    		// transition: width 0.2s linear 0.2s;
    
    		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);
    
    		
    
    		// startup in normal mode
    		var styleS = document.createElement('style');
    		styleS.type = 'text/css';
    		styleS.innerHTML = '';
    		document.getElementsByTagName('head')[0].appendChild(styleS);
    		btnS.setAttribute("title", "Sobreposição");
    		pathS.style = cirdRing;
    		
    		var mode = 0;
    		var panel = 0;
    		var toggle_token;
    
    
    
    		// toggle logic
    		document.getElementById('toggle').addEventListener('click', function() 
    		{
    			clearTimeout(toggle_token);
    			toggle_token = setTimeout(function() 
    			{
    				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;
    				}
    			}, 100);
    		});
    
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);


  • @masterleo29 said in Overlay panels:

    trick: settimeout everywhere xD

    That's not a trick, that's a workaround. I think what @sjudenim meant was introducing real css transitions.



  • @luetage Sorry for the confusion, english is not my main language. Yes, it's the workaround i found to make it work 'smoother'

    I'm not as good with css overall (i can work some stuff, but never did nothing too complex with transitions), so I can't do it right now (might be able, in the future)

    Edit: If i'm able to work on a good transition, will post the result



  • @masterleo29

    @luetage is correct, that was what I was getting at. But as I said, it's just a personal preference



  • @sjudenim Still not pure css, but I believe this is the effect you talked about. Try this piece inside the 'click' event for the "toggle" button, before the "if" logic I have there (right next to '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);
    				
    			}
    

    EDIT: (had this on my another mod) For a 'smoother' experience, add this to your custom css

    #main.left #webview-container{
        transition: flex 0.2s linear 0.2s;
    }
    #main.right #webview-container{
        transition: flex 0.2s linear 0.2s;
    }
    #browser.fullscreen #webview-container{
        transition: flex 0.2s linear 0.2s;
    }


  • @masterleo29

    Still this happening (look at vivaldi logo)

    0_1524757760108_f8dbc3a6-9fb4-4444-9355-6769bfa3da7b-image.png



  • @kallon If you're using mode 2 or 3, that's intended. The overlay is for the panel container, both the content and the switch bar.


 

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