Zoom, Find in Page & other actions in Web Panels

BoneTone

@Streptococcus the zoom settings only seems to temporarily effect the panel when I refresh it (it appears larger or smaller momentarily until it resizes back to normal, perhaps because I make use of the mod -- tested on Wikipedia & SEP), but that's irrelevant. This isn't about creating a global zoom control for panels, and that's not what we've been talking about anyways.

We've been talking about the zoom controls on the status bar, which do not affect the panels. This mod creates the equivalent of those controls for the panel. That way users have immediate control over individual panels, just like the status bar controls provide for pages in tabs. This isn't something that Vivaldi is able to without the mod. The mod also provides several other very useful controls.

isaacjara17

Does this code also work as a CSS? I've tried it and it hasn't so far

nomadic

@isaacjara17 No. Check out the link listed in the installation instructions. Modding Vivaldi.

This is a JavaScript functionality mod rather than a purely style CSS mod, so see the section called "Adding Functionality".

joao.rossa

Did something change with vivaldi in the panel bottom bar? the search box get out of the bar...

beathell

default zoom got a little discomfort, about how it keeps going back and forth between 100% and our default settings (e.g. 80%),

this is very annoying in website like twitter or facebook,

is there any fix or settings for this ?

beathell

@guigirl said in Zoom, Find in Page & other actions in Web Panels:

@beathell said in Zoom, Find in Page & other actions in Web Panels:

keeps going back and forth between 100% and our default settings (e.g. 80%),

My default is 85%, but reliably after a few hours, it reverts to 100% [whilst still being labelled as 85%].

My case is not stuck in 100% , rather when i click next image (in twitter) it goes to 100%, and then back to default which is 80% in quick succession. it happen every time i click any link that goes to another page

joao.rossa

In case someone is interested, i changed the buttons of search in panels to match the ones in the main tab search:

function addSearchTextControls(webview){
        const panel = webview.parentElement.parentElement;
        const alreadyAdded = panel.querySelector("#pamodsearchTextBar");
        if(alreadyAdded){return;}
		const searchTextBarNavBtns = document.createElement("div");
		searchTextBarNavBtns.className = "toolbar-group";
		searchTextBarNavBtns.style.padding = "5px";
		const searchTextBarBtn = document.createElement("div");
		searchTextBarBtn.className = "button-toolbar";
		searchTextBarBtn.style.padding = "3px";
        const searchTextBar = document.createElement("div");
        searchTextBar.id = "pamodsearchTextBar";
        searchTextBar.className = "toolbar toolbar-medium toolbar-statusbar";
		searchTextBar.style.height = "35px";
		
        for(const key in ACTIONS_SEARCHTEXT){
            const action = ACTIONS_SEARCHTEXT[key];
            let newButton;
            if(key === "value") {
                continue;
            } else if(key === "search_label" || key === "search_input") {
                newButton = createElement(action, webview);
            } else {
                newButton = createActionButton(action, webview);
            }			
			
			if(key === "next_match" || key === "previous_match") {
               searchTextBarNavBtns.appendChild(newButton);
            } else {
				if(key === "cancel_search"){
					searchTextBarBtn.appendChild(newButton);
				}else{
					searchTextBar.appendChild(newButton);
			}
			}
			
			searchTextBar.appendChild(searchTextBarNavBtns);
			searchTextBar.appendChild(searchTextBarBtn);
        }
        panel.insertBefore(searchTextBar,panel.querySelector("footer"));
    }

Zalex108

@LonM and Collaborators

Very useful!

Thank you!

Zalex108

@LonM

Hi,

Would be possible a toggle to move the actions position? Left - Centre - Right

Mods Centered.png

Mods Centered Right.png

Thank you

LonM

@Zalex108 A toggle seems unnecessary. A css rule should be enough. I haven't looked at this mod in a while, but this should work:

.panel footer div {
    float: right; /* or left */
}

Zalex108

@LonM

Thank you!

AdeurD

How can I remove the invert colors option and move the options to the side of the panel (which in my case is the right side)?

LonM

@adeurd To remove it, delete all the text from invert:{ to the closing }

AdeurD

@lonm An how do I change the overlay position to the right?

LonM

@adeurd If you use the code I posted a couple of replies up it should work:

@lonm said in Zoom, Find in Page & other actions in Web Panels:

A css rule should be enough. I haven't looked at this mod in a while, but this should work:
.panel footer div {
    float: right; /* or left */
}

AdeurD

@lonm Where should I put this line of code?

LonM

@adeurd This can be added as a css mod.

AdeurD

@lonm hmm it's not working... Any idea for adding it to the js mod?

AdeurD

... "I don't have 'enough permissions to delete this reply" so I'll just change it lol.

LonM

If adding it as a css mod didn't work, then I'm not sure what would be broken.