Panel toggle as extension icon?



  • I recently moved over from opera. Opera, in recent updates added, added a panel much like vivaldi's, which is nice for people who use such a thing. I, however, don't! I didn't like it then (turned it off), and I certainly do not like it now that it's mandatory to have an intrusive panel (and/or panel toggle) in webpage-space at all times. Although I love the customization vivaldi brings, the dev's for whatever reason have abandoned this one crucial option. Can anybody create a modification that adds a toggle for the panel as an extension icon? (poorly done screenshot for demonstration: https://i.imgur.com/X67jBM4.png). Or better yet, remove the panel entirely and move the download's panel to it's own icon to the left of extensions (like opera :D). Please and thank you for any replies.



  • The panel is in my opinion one of the main selling points of Vivaldi. And it's done far better than in Opera. You can also show and hide the panel, or specifically the Downloads panel (or any other panel), with a keyboard shortcut.

    However, moving the panel toggle around is easy to do. You just gotta create a custom.js file as described in the pinned "Modding Vivaldi" thread.


    For the panel toggle it looks best if you move it to the toolbar (if you got the panel on the left):

    setTimeout(function wait() {
    	var toolbar = document.querySelector(".toolbar-addressbar.toolbar");
    	var panel = document.querySelector("button.paneltogglefooter.button-toolbar-small");
    	if (panel != null) {
    		panel.style.height = "34px";
    		toolbar.appendChild(panel);
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);
    

    0_1504923958342_Screenshot 2017-09-09 04.25.30.png


    Moving it to the extensions-wrapper is possible too:

    setTimeout(function wait() {
    	var toolbar = document.querySelector(".toolbar-addressbar.toolbar > .extensions-wrapper");
    	var panel = document.querySelector("button.paneltogglefooter.button-toolbar-small");
    	if (panel != null) {
    		panel.style.height = "34px";
    		toolbar.appendChild(panel);
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);
    


  • @fdhdfhn34sf said in Panel toggle as extension icon?:

    I certainly do not like it now that it's mandatory to have an intrusive panel (and/or panel toggle) in webpage-space at all times.

    Though i can't understand your hatred of the Panel, i can at least respect your opinion. What i can't however respect is aggressive misinformation paraded as fact. Hence, FYI, pls note that your quoted statement is incorrect. Please observe the following, & maybe then learn:

    0_1504924326474_2fc18dc9-3ecd-4f4c-a4c0-8f1055c30156-image.png

    0_1504924361759_19d5cab4-a545-4eaa-8b52-4e07428d1399-image.png

    No special customisation needed...



  • While both of the code snippets given by @luetage did unfortunately not work (I created the js file, added all the stuff required to my browser.html, pasted in the code and nothing happens even after browser restart. I even tried to drag the js file into my extensions tab as someone said it's possible to install scripts as extensions, but still nothing.) I have already grown to live with the F4 keyboard shortcut as the toggle key (can change at any time). Been enjoying vivaldi thus far! Thanks for all the help!



  • @fdhdfhn34sf

    How about making the toggle invisible? This way you don't have extra icons on the toolbar taking up space. I have mine set so that it only appears when the pointer is moved to that side of the window

    This is done with simple css

    #panels-container.left #panel_switch {box-shadow: none !important;}
    
    #panel_switch svg polygon {display: none;}
    
    #panel_switch:hover {background-color: var(--colorBg) !important;}
    
    #switch button.active {
        background-color: var(--colorBgDark) !important;
        border-color: transparent !important;
    }
    

    And then you can make the panel an overlay with this

    #panels-container {
        position: absolute !important;
        z-index: 15;
        height: 100%;
    }
    
    #panels-container:after {
        background-color: transparent !important;
    }
    

    There was some code a while back that added a button to the toolbar and made the entire panel a drop down menu but it was broken with an update. If I can find that old customisation thread I might take a stab at updating it, if possible.



  • @fdhdfhn34sf The code works, I tried it with an otherwise unmodified Vivaldi. But if you are happy with the standard keyboard shortcut, that's definitely the easier solution!



  • @sjudenim said in Panel toggle as extension icon?:

    There was some code a while back that added a button to the toolbar and made the entire panel a drop down menu but it was broken with an update. If I can find that old customisation thread I might take a stab at updating it, if possible.

    Are you sure? I can remember someone wanted a download button, like the bookmarks button from VivaldiHooks, but no one ever made it. Hmm, would be interested to see this too.



  • @luetage

    It was in the original customisation thread, before they changed forum.


Log in to reply
 

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