Seitenpanel als Overlay?



  • Hallo,

    gibt es eine Möglichkeit Seitenpanel als Overlay zu zeigen, damit beim ausklappen die Webseitenansicht nicht verunstaltet wird.

    Ich glaub ich bin einer der wenigen, der noch Monitor mit einem Seitenverhältnis von 4:3 benutzt. Der Platz ist also kostbar und Panel soll nur bei Bedarf ausgeklappt werden. Das Ausklappen ist super animiert und so stört aber trotzdem. Wäre super, wenn eine Möglichkeit gäbe Panel als so Art Menü zu öffnen (welches dann von selbst verschwindet).

    Vielen Dank im Voraus!



  • https://forum.vivaldi.net/topic/10590/overlay-panels/36?page=2
    Erledigt den ersten Wunsch. Am Menü wird noch gearbeitet, auch gibt es eine Möglichkeit das gesamte Panel verschwinden zu lassen, wenn der Mauszeiger nicht darüber ist.



  • Hallo ice8.

    Mein Panel befindet sich an der rechten Seite; der Switch des Containers wird dabei ständig angezeigt und erweitert sich bei "hover" auf die eingestellte Breite (z.Z. 246px):

    /*Switch-Bereich am rechten/linken Rand "blockieren" für AutoHide und Overlay */
    #main .inner {
        position: absolute;
        padding-right: 34px;
        padding-left: 1px; /*linker Rand/Border aus optischen Gründen */
        background-color: #c0c0c0 !important;
    }
    
    /* Panels-Container als Overlay */
    #panels-container {
     	width: 34px !important;
     	top: 1px !important;
     	position: absolute !important;
    	z-index: 1;
    	height: 100% !important;
    	opacity: 1;
    	/*transition: max-width 0.5s ease 0.5s, opacity 0s ease 1.1s;*/
    	right: 0 !important;
    }	
    #panels-container:hover {
     	width: 246px !important;
    	opacity: 1;
    	/*transition: max-width 0.5s ease 0s;*/
    }
    

    Durch die Reduzierung der beiden Angaben "34px" auf z.B. "3px" schrumpft die Switch-Anzeige entsprechend auf einen dünnen Strich, der sich bei "hover" komplett als Overlay öffnet.

    Gruß nasE38



  • @nase38 Dein Code hat schwerwiegende Fehler. Zuallererst einmal hast du zweimal vergessen korrekt zu kommentieren/unkommentieren
    /transition: max-width 0.5s ease 0.5s, opacity 0s ease 1.1s;/
    /transition: max-width 0.5s ease 0s;/
    aber selbst wenn ich das berichtige, bekomme ich nur einen grauen Hintergrund in Vivaldi -- kein einziger Seiteninhalt wird angezeigt, und das Panel ist sowieso nicht zu sehen.



  • @luetage
    Kannst Du mir das genau erklären was ich wohin einfügen muss, damit das mit den Overlay funktioniert.



  • Die Erklärung gibts hier: https://forum.vivaldi.net/topic/10549/modding-vivaldi/

    Für diesen Mod brauchst du nur eine Datei namens custom.js erstellen, den Code einfügen und im Vivaldi Programm direkt im Vivaldi Ordner (nicht style Ordner) speichern. Dann selbige Datei im browser.html Code aufrufen.



  • Okay, und welchen Code soll ich da einfügen?
    Auf der verlinkten Seite sind einige Codes...



  • Probier einfach alle aus und verwend den der dir am ehesten zusagt. Allerdings ist der Link direkt zu einem js-mod, alles andere sind css mods.



  • Ah, jetzt hab ich es bzw ich hatte es falsch verstanden.
    Hatte angenommen das wenn man mit dem Mauszeiger über die Reiter (Lesezeichen, Download usw) beim Panel fährt, das sich diese Menüs automatisch öffnen/schließen, das wäre auch ein geiles Feature :-).



  • @rayzon Ich denke, ein Öffnen auf :hover ließe sich programmieren. Bin mir auch nicht sicher, ob das nicht jemand schon versucht hat. Hmmm



  • @luetage said in Seitenpanel als Overlay?:

    https://forum.vivaldi.net/topic/10590/overlay-panels/36?page=2
    Erledigt den ersten Wunsch. Am Menü wird noch gearbeitet, auch gibt es eine Möglichkeit das gesamte Panel verschwinden zu lassen, wenn der Mauszeiger nicht darüber ist.

    Super Mega Cool! Hat wunderbar funktioniert!

    Anleitung auf Deutsch, für "Nichtprogrammierer"

    1: man sucht wo vivaldi installiert ist. In meinem Fall brauche ich den Ordner C:/Benutzer/[Name]/Local/Vivaldi/Application/1.13.1008.32/resources/vivaldi

    2: In diesem Ordner erstellt man eine Datei namens z. B. overlay-panel.js

    3: in diese Datei kopiert man den Inhalt aus dem Post (das große dunkle Fenster):
    https://forum.vivaldi.net/topic/10590/overlay-panels/37?page=2

    Notiz: Will man, dass Overlay-Modus von Haus aus immer aktiviert ist - ersetzt man den Absatz "// startup setting" durch den Code darunter (nächstes kleine dunkle Fenster) "// startup in overlay mode" komplett

    4: Datei schließen und speichern

    5: Man öffnet demnächst die Datei (gleich hier im Ordner) browser.html, dort sucht man nach so etwas ähnlichem wie "<script src="bundle.js"></script>" (so werden die Skripte gestartet) und fügt eine neue Zeile gleich darunter (oder darüber, ist egal, Hauptsache noch vor "</body>") mit dem Inhalt "<script src="overlay-panel.js"></script>" (so starten wir das unsere Skript)

    6: Vivladi neustarten

    7: Enjoy =)



  • Hi,

    also wenn ich den Browser öffne ist das Overlay immer deaktiviert, obwohl ich die Zeile geändert hab...?
    Version: 1.13.1008.21 (Offizieller Build) (64-Bit)



  • Mach einfach eine Kopie des Inhalts deiner custom.js Datei und füg sie hier ein.
    Dann kann ich dir wahrscheinlich sagen, warum es nicht funktioniert.
    Bitte einen Code-Block erstellen der mit einer Zeile der Zeichen ``` beginnt und mit einer Zeile ``` endet



  • 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";
    		var csso = '#main .inner{position:relative}#panels-container{position:absolute;z-index:1;top:0;bottom:0}.toolbar-addressbar.toolbar{z-index:2}#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}';
    		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 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) {
    				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);
    


  • Der obere und untere Teil haben es nicht in die "Box" geschafft.
    Weiß nicht wie man das komplett anzeigen kann?



  • Du musst den gesamten Code zwischen die Zeichen legen. Ist aber auch egal. Ich hab mein ganzes Setup gelöscht und deinen Code verwendet. Browser startet im Overlay Modus. Auch neue Fenster werden im Overlay Modus gestartet. Code ist richtig, überrascht mich, dass es bei dir nicht klappt.

    Nur so als Zusatz: Habe seitdem den css Teil des originalen Codes geändert, du verwendest derzeit eine überholte Version -- behebt ein Problem in Fullscreen und mit Such-Leiste. Hat aber nichts damit zu tun, dass der Start bei dir im Normal Modus abläuft.



  • Seltsam das es bei nicht funktioniert...
    Welche Zeichen sind das?
    Was meinst Du mit überholt? Ist halt Stock.



  • @luetage said in Seitenpanel als Overlay?:

    Bitte einen Code-Block erstellen der mit einer Zeile der Zeichen``` beginnt und mit einer Zeile ``` endet

    @Gwen-Dragon editierte meinen Beitrag und fügte diesen Satz hinzu. Das Forum verwendet Markdown:
    http://commonmark.org/help/
    Moderatoren sind offenbar dazu angehalten sicherzustellen, das etwaiger Code auch benutzerfreundlich dargestellt wird.

    Mit überholt meine ich, dass ich meinen Post editiert habe, und der Code nun neu ist. Jedenfalls der css Teil. Du besuchst einfach noch einmal diesen Link
    https://forum.vivaldi.net/topic/10590/overlay-panels/37?page=2
    und kopierst den Code erneut.



  • @rayzon Bitte lies zu Code-Block: http://commonmark.org/help/tutorial/09-code.html

    Ich habe deinen Code neu formatiert.



  • @gwen-dragon Du hast den Code aber falsch formatiert -- Der gesamte Beitrag ist ein einziger Block. Anfang und Ende sind noch immer exkludiert :P


Log in to reply
 

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