More progress made!
The WIP icon manager app now renders SVG icons as vector drawings, so they don't get pixellated and appear extra crisp on HiDPi displays.
The search bar is also now visible in the header bar for quick access. It now filters the icons in the currently selected list.
For every day that I've sat down to work on this app, I've managed to solve a problem that seemed insurmountable the day before.
The app now copies icons to your clipboard, ready to paste into design software! It can paste icons both as SVG data (which Inkscape supports) and as a temporary file (which Figma and file managers support).
It also loads icon sets that are bundled with the app and has an overview of all the sets installed.
Having trouble with a GtkGridList. Looking for help.
I've replaced a GtkFlowBox with a GtkGridList to improve performance. However, the GridList is breaking the layout.
The height of every child of the GridList expands to beyond the edges of the window (screenshot 1), unless it’s the *direct descendent* of a GtkScrolledWindow (screenshot 2). In the second case, the grid renders as expected but I can't put the header in.
Does anyone know a way around this? (Code below)
Relevant files:
[1] - IconSetStackView (contains the ScrolledWindow)
https://github.com/azuredusk10/IconManager/blob/master/src/ui/IconSetStackView.ui
[2] - MainPanelView (contains the GridList)
https://github.com/azuredusk10/IconManager/blob/master/src/ui/MainPanelView.ui
Template hierarchy:
Window > IconSetStackView [1] > MainPanelView [2]
@chriswood GtkGridView and GtkListView are designed to be put into GtkScrolledView, or otherwise you won't get the performance benefits at all.
I was working on a custom widget that would enable showing a GtkScrollable (in this case a GtkGridView) with a header and keeping the perf benefits. I can show you the code and you can try to port it to swift.
You can also try setting vexpand/valign in the meantime
@vixalientoots thank you, this is what I suspected. I’ll work with this limitation then
Yes that sounds great, I’d be happy to take a look at your custom widget and see if I can rebuild it in JS!
Thanks for your help!
@chriswood Oh, I'm working in JS too. The PR is currently pending as there are some things I've not quite figured out, but the initial code is here: https://github.com/vixalien/muzika/pull/104
Here's the component code https://github.com/vixalien/muzika/blob/listview/src/components/scrolled-view.ts
You can put that into a ScrolledWindow, and give it a child and a header and footer, and it will do the rest (hopefully)"
```
ScrolledWindow {
$ScrolledView {
[header]
YourHeaderHere {}
GridView {}
}
}
```
@vixalientoots Cool, this looks really interesting! I hope you manage to finish this widget.
I've redesigned the UI so I no longer need a GridList header, but I can see your new widget being useful for lots of different apps. It's a shame the topic got closed for inactivity in the GNOME forums.
It's really nice to see your work!
@chriswood hey, your app looks really cool. Do you happen to use Workbench for learning or prototyping ? If so, I'd love to hear your thoughts and how it went.
@sonny Yes, absolutely. The official documentation feels impenetrable for a newcomer and assumes the user already has a lot of knowledge. I've found it much easier to understand how to build apps in GTK by seeing all the examples there, copying and pasting them into my own project, and tweaking them.
@sonny The concept of some widgets only accepting 1 child was mind-boggling, as someone coming from a web development background. I didn't see this clearly explained anywhere, nor any explanation of why some components have their child as a <property> or as a <child>. I sort of had to work this out by looking through the examples in Workbench. This was by far the biggest barrier; if I hadn't worked that out I would've given up early.
@sonny Workbench was the best resource for getting started. I love how you've got the different language bindings in there; that's really helpful.
It can be a bit tedious closing windows. It keeps asking me to save changes when all I did was click on a button in the preview panel. And I'd love it if it remembered my choice of UI templating language; at the moment, I manually change it to "XML" every time I open a new preview.
But overall, it's totally invaluable. It's a wonderful learning tool
@sonny I think I would've found it helpful to see a few more examples of navigation views and header bars. That was the first thing I built, and it took me a long time to work out how to put a widget in the middle of a header bar. I kept poring through the GTK documentation on GtkHeaderBar, trying <child type="center">, before realising the proper syntax was an AdwHeaderBar and the property <property type="title-widget">
Other than that, it's been really complete and fleshed out!
+1
Workbench current Library UX doesn't scale very well for variations of widgets / APIs.
I've been toying with interactive tutorials for GNOME where we could explain widgets and concepts at length.
Like a book with interactive / inline code examples to demonstrate and play with each option.
It's not a great example but it gives an idea of what the framework could do:
@sonny More examples with code in a beginner-friendly format sounds great. I would be concerned about adding one more source that people need to reference though.
So far, I've used
- The "GJS book" tutorial, to get started
- The "gjs.guide" website, as a reference for GJS concepts (e.g. how to work with properties, property bindings and signals)
- The GTK docs, for reference on individual class properties / methods / signals
- The GNOME GJS docs, when I realised these were more accurate for JS
@sonny
- The Adwaita docs, which have styling classes I need to refer back to
- Workbench
- The GNOME HIG
One more source might get lost. So if there's any way of integrating the examples into something that already exists, I think that would help people find it. Even if it were just a link from one source to the interactive code examples
@chriswood thanks! Glad to hear Workbench is fulfilling its goals.
I agree with you, and I'm confident we'll make things even better by improving diagnostics and adding a linter
https://github.com/workbenchdev/Workbench/issues/218
Please don't hesitate to file an issue or reach out if you see notice anything that would confuse a beginner.
@sonny Perfect, I'll keep that in mind!
Yes, it really is useful. I'm a UX Designer and I haven't build a web app in 7 years, so for all intents and purposes I shouldn't be able to build an app. But being able to start with ready-made layouts in Workbench and write in a language I'm fairly familiar with (JS) has made this possible. So, really, really incredible work - thank you for putting it together