After going through the source code of some gnome shell extension I was able to add the scrollview to my extension. I want to know how can I make it scrollable.
const scrollView = new St.ScrollView({
overlay_scrollbars:true,
hscrollbar_policy:2,
enable_mouse_scrolling: true,
x_expand: true,
y_expand: true,
});
const scrollBase = new PopupMenu.PopupMenuSection();
scrollBase.actor.add_child(scrollView);
for (let i = 0; i<30; i++) {
let pmItem = new PopupMenu.PopupMenuItem("This is item "+ i,{});
//this._indicator.menu.addMenuItem(pmItem);
scrollBase.addMenuItem(pmItem);
}
// `Main.panel` is the actual panel you see at the top of the screen,
// not a class constructor.
this._indicator.menu.addMenuItem(scrollBase);
Main.panel.addToStatusArea(indicatorName, this._indicator);
}
StScrollView is a container that provides scrollbars to its scrollable child.
That means
the scrolled contents have to be inside the ScrollView, not added alongside
the view’s child must implement the StScrollable interface (like StBoxLayout and StViewport)
So what you want is roughly along those lines:
const scrollView = new St.ScrollView();
this._indicator.menu.actor.add_child(scrollView);
const section = new PopupMenu.PopupMenuSection();
scrollView.set_child(section);
for (let i = 0; i < 30; i++) {
const item = new PopupMenu.PopupMenuItem(`This is item ${i}`);
section.addMenuItem(item);
}
At the moment, no, mostly because Clutter and St together are a pretty big topic.
Personally, I’m not a Clutter expert, but St.ScrollView is probably a good place to start, so maybe I can pick a few similar topics to start with (time permitting). We do have a bit of an Architecture Overview which might help a bit though.
Absolutely, that’s a type of help we really need!
If you figure out how to do something (even something small like using St.ScrollView), it would be very helpful to open a merge request here for gjs.guide.
If you look at an accepted merge request like this one there are some simple examples of adding a page, with the extra bits for the sidebar and overview page. If you’re new to git, you’re welcome to do that all in the web interface and then request a review from me or @jrahmatzadeh.
I still couldn’t figure out how to add the scrollview. I understand that the menu items should be on the scrollview in order for them to be scrollable. I don’t understand how can I get a reference to the scrollview container once I add it to the menu.
the child must implement the StScrollable interface to be scrollable
That’s why I didn’t tell you to add menu items to the scroll view, but a menu section. PopupMenuSection uses an StBoxLayout as its actor, which is one of the widgets that implements StScrollable.
