Scroll WebPanel
-
So i officially exceeded the number of web panels on screen. How are you guys dealing with this?
Well, since there was no progress on this from the vivaldi team, i tried to take a look into it, and i managed to make the whole panel scroll while still maintaining the add panel box visible. Also when adding a new panel it will scroll to bar to the said panel.
--
ModEdit:
Split from
Scroll WebPanel FR
Related Content
Scroll WebPanel + JS ¿?Here's the code :
JS:
/* * Panel Scroll (A Mod for Vivaldi)v.1 * joao.rossa * https://forum.vivaldi.net/topic/58832/scroll-webpanel * No Copyright Reserved */ (function panel_bar_scroll(){ function changePanelScrollOverFlow(){ const x = new MutationObserver(function (e) { if (e[0].removedNodes.length > 0){ document.getElementById('switch').style.overflow = "scroll"; } if (e[0].addedNodes.length > 0){ document.getElementById('switch').style.overflow = "initial"; } }); const panelWrapper = document.getElementsByClassName('addwebpanel-wrapper')[0]; console.log(panelWrapper); x.observe(panelWrapper, { childList: true }); } function scrollToAddedPanel(){ const x = new MutationObserver(function (e) { if (e[0].addedNodes.length > 0){ e[0].target.scrollTop = e[0].addedNodes [0].offsetTop; } }); const panelBar = document.getElementById('switch'); x.observe(panelBar, { childList: true }); } /** * Initialise the mod */ function initMod(){ const browser = document.getElementById('browser'); if (browser) { console.log('browser detected!!'); changePanelScrollOverFlow(); scrollToAddedPanel(); } else { setTimeout(initMod, 500); } } /* Start 500ms after the browser is opened */ setTimeout(initMod, 500); })();
CSS:
#panels-container #switch { overflow: scroll; } #panels-container #switch::-webkit-scrollbar { display: none; } #panels-container #switch .addwebpanel-wrapper { order: -1; } .addwebpanel-wrapper .addwebpanelcallout { top: 4px; } .addwebpanel-wrapper .addwebpanelcallout:before, .addwebpanel-wrapper .addwebpanelcallout:after { top: 2px; }
-
@joao-rossa I use this simple mod:
#panels-container #switch { overflow: scroll; } #panels-container #switch::-webkit-scrollbar { display: none; } /* Not needed */ #panels-container #switch .addwebpanel-wrapper { margin-bottom: 34px; }
-
@potmeklecbohdan Hey that works decently. Thanks.
I wonder how will vivaldi will deal with this.Edit: It seems it gives problems when pressing the add panel button....i cant see the box to insert the url for the new panel.
-
@potmeklecbohdan The add panel button and settings should have been inside a position:absolute div and then let the rest scroll
-
@joao-rossa I was trying to do it some way, but it breaks when I added/enabled/disabled a panel.
-
@joao-rossa I updated the code a bit. It's still a bit difficult to add a panel and suggestions are hidden, but better than before.
#panels-container #switch { overflow: scroll; } #panels-container #switch::-webkit-scrollbar { display: none; } #panels-container #switch .addwebpanel-wrapper { order: -1; overflow: visible; } .addwebpanel-wrapper .addwebpanelcallout { min-height: 0; height: 64px; min-width: 34px; width: 34px; padding: 0; position: unset; } .addwebpanel-wrapper .webpanel-suggestions { display: none; } .addwebpanel-wrapper .addwebpanelcallout form header { display: none; } .addwebpanel-wrapper button.add { margin: 6px auto 0 auto; } .addwebpanel-wrapper .addwebpanelcallout form .urlfield > input { width: 34px; padding-left: 0; padding-right: 0; } .addwebpanel-wrapper .addwebpanelcallout form .webpanel-input { flex-direction: column; }
-
@potmeklecbohdan said in Scroll through Side Panel:
@joao-rossa I updated the code a bit. It's still a bit difficult to add a panel and suggestions are hidden, but better than before.
#panels-container #switch { overflow: scroll; } #panels-container #switch::-webkit-scrollbar { display: none; } #panels-container #switch .addwebpanel-wrapper { order: -1; overflow: visible; } .addwebpanel-wrapper .addwebpanelcallout { min-height: 0; height: 64px; min-width: 34px; width: 34px; padding: 0; position: unset; } .addwebpanel-wrapper .webpanel-suggestions { display: none; } .addwebpanel-wrapper .addwebpanelcallout form header { display: none; } .addwebpanel-wrapper button.add { margin: 6px auto 0 auto; } .addwebpanel-wrapper .addwebpanelcallout form .urlfield > input { width: 34px; padding-left: 0; padding-right: 0; } .addwebpanel-wrapper .addwebpanelcallout form .webpanel-input { flex-direction: column; }
Interesting, the ideal thing would be to put the add button out of the scrollable div but ive tried and didn't managed to do it well
-
@potmeklecbohdan Interesting, thank you for sharing this. I have no experience with whatever kind of coding language this is. But I'm going to give it a go.
Is your GitHub pretty straight forward on how to set this up?
-
@mdoverl that's CSS only. I dont know if this is doable with only CSS quite frankly.
-
Hi,
Related to the CSS Mod
Would be possible as a WorkAround, disable the CSS temporary from V UI?
Add a Switch ON / OFF to the Panel's Frame, on Top or adding a toolbar as LonM's Panel Actions?
With that:
- Move to Panel Bottom till + appears
- Open the last Panel
- Click to Disable Scroll
- Add the New Panel
- Click to Enable Scroll
Thank you
-
@potmeklecbohdan
Thank you!
-
@Zalex108 What horizontal bars are these beetween the panel icons?
-
@Maxrunner said in Scroll through Side Panel:
@Zalex108 What horizontal bars are these beetween the panel icons?
Separators for WebPanel.
-
@Zalex108 Nice, did you get to fix the scroll and add panel thing?
-
@Zalex108
The user @potmeklecbohdan fixed it for you? -
@Maxrunner said in Scroll through Side Panel:
@Zalex108
The user @potmeklecbohdan fixed it for you?Just asked about a proposal, not sure whether is feasible or not, neither if potmeklecbohdan seen the question.
For now, mostly all the needed WebPanels are already added on my side, but the ability to add new ones without commenting or disabling the CSS will be very welcome.
-
@Zalex108 The CSS was a bit outdated, but anyway the main issue is (& will be) the same & afaik impossible to fix w/o JS. The text field still works well, you just see less letters at once.
The up-to-date version is this (tested only from devtools, but should work normally)
#panels-container #switch { overflow: scroll; } #panels-container #switch::-webkit-scrollbar { display: none; } #panels-container #switch .addwebpanel-wrapper { order: -1; } .addwebpanel-wrapper .addwebpanelcallout { min-height: 0; min-width: 34px; width: 34px !important; padding: 0; position: unset; } .addwebpanel-wrapper .addwebpanelcallout::before, .addwebpanel-wrapper .addwebpanelcallout::after, .addwebpanel-wrapper .webpanel-suggestions, .addwebpanel-wrapper .addwebpanelcallout form header { display: none; } .addwebpanel-wrapper .addwebpanelcallout form .webpanel-input { grid-template-columns: 1fr; grid-template-rows: 1fr auto; margin-bottom: 0; } .addwebpanel-wrapper .addwebpanelcallout form input.address { width: 34px; padding-left: 0; padding-right: 0; border-left: none; border-right: none; } .addwebpanel-wrapper button.add { margin: 6px auto; margin-left: auto !important; }
-
@potmeklecbohdan
Thanks
Well need to wait till it's implemented at some point.
-
@potmeklecbohdan said in Scroll through Side Panel:
@Zalex108 The CSS was a bit outdated, but anyway the main issue is (& will be) the same & afaik impossible to fix w/o JS. The text field still works well, you just see less letters at once.
The up-to-date version is this (tested only from devtools, but should work normally)
#panels-container #switch { overflow: scroll; } #panels-container #switch::-webkit-scrollbar { display: none; } #panels-container #switch .addwebpanel-wrapper { order: -1; } .addwebpanel-wrapper .addwebpanelcallout { min-height: 0; min-width: 34px; width: 34px !important; padding: 0; position: unset; } .addwebpanel-wrapper .addwebpanelcallout::before, .addwebpanel-wrapper .addwebpanelcallout::after, .addwebpanel-wrapper .webpanel-suggestions, .addwebpanel-wrapper .addwebpanelcallout form header { display: none; } .addwebpanel-wrapper .addwebpanelcallout form .webpanel-input { grid-template-columns: 1fr; grid-template-rows: 1fr auto; margin-bottom: 0; } .addwebpanel-wrapper .addwebpanelcallout form input.address { width: 34px; padding-left: 0; padding-right: 0; border-left: none; border-right: none; } .addwebpanel-wrapper button.add { margin: 6px auto; margin-left: auto !important; }
let me check this.
thanks.
-
@Maxrunner The thing is you should have three divs in the bar, the upper ones with history,notes, downloads, etc.. where they should stay at the top always. The true panels one with overflow and the bottom one with the settings and add panel. You can actually to this with javascript but you might break their functionality without access to the original code.