Recent searches
Search options
Today I began building a native icon manager app for Linux.
On MacOS, I relied on IconJar to select icon sets that fitted different visual styles. It also gave me lightning-fast access to glyphs I would use over and over again, like arrows and chevrons.
While we have Norde Source for Linux, sadly:
- It crashes when you click-and-drag an icon
- It's slow to load
- It hasn't been updated in 4 years
Let's see where this goes!
#GNOME #Linux #FOSS #design #UIDesign
The UI is coming along, bit by bit! Building templates is coming a bit more naturally too.
#GNOME
Today I managed to:
- load a directory of icons into the app. Even with 2000+ icons in the grid it's not too sluggish!
- add a right-click context menu
- invert the icons in dark mode
- show the details of the selected icon in the sidebar
- get the sidebar toggle button working
Will need to pick someone's brain on why the SVGs are rendered blurry at some point. (They're in GtkImage widgets with a set pixel-size)
@chriswood Looks neat! The sidebar list box would benefit from the .navigation-sidebar class: https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#sidebars
@bragefuglseth Oh thank goodness, I couldn't find that anywhere! That's going straight in, was really bugging me. So many other useful classes there I'll start using. Thank you!
@chriswood In GNOME apps with sidebars, the main menu (hamburger) button is usually placed to the right in the sidebar, not to the right in the entire window itself. Also, since the sidebar hides automatically on narrow window widths, the show/collapse button is usually not displayed when the window is that wide. You may choose to not follow that convention if you think it makes sense for your app, though 
@bragefuglseth Perfect, I'll follow suit with those conventions. Thank you very much!
@chriswood No problem! Feel free to join the #app-dev:gnome.org room on Matrix for questions about coding/designing for GNOME, there are lots of helpful people there 
@chriswood Some resources:
- Iconify maintains sets for most open source icon libraries https://github.com/iconify/icon-sets/tree/master/json
- Icônes for inspiration https://icones.js.org/
@GeopJr This is great!! Would love to have at least some of these open-source sets loaded in by default. I'll play around with Icônes some more. Thank you!
@chriswood Looking good! The color input should probably have its `valign` property set to `center`, and I wonder what the icon properties preview would look like if it was a full-height sidebar?
@bragefuglseth thanks for the alignment tip! Ooh if it’s possible to have an additional sidebar then that would be great! Do you know which widget I could use for that?
@chriswood @bragefuglseth I'd go with a Utility Pane (AdwOverlaySplitView). Not sure if Brage has something else in mind
I'd also say the new AdwDialogs might be worth trying out (instead of another sidebar)!
@GeopJr @bragefuglseth Yes, this is exactly what I was looking for. Thank you!
@chriswood
Looks cool! GTK3 or 4?
@iorsh thanks! GTK4
@chriswood SVG are rasterised on upload, and GtkImage does not change the size of its contents, so the content get stretched.
If you want to render an SVG at different sizes you will need to load it with librsvg directly and implement a GdkPaintable object; there’s a demo in gtk4-demo.
@ebassi Ah perfect, thank you! Will take a look at this
@chriswood I was on my phone when I replied, so couldn't easily get the link, but here it is: https://gitlab.gnome.org/GNOME/gtk/-/blob/main/demos/gtk-demo/svgpaintable.c
@ebassi Got it, thank you very much!
I'm writing the app in Javascript and am not familiar with C. It looks like the method gdk_paintable_snapshot is the important one, is that right? Is there any steer you could give me on how to make a snapshot from the contents of an SVG file?
@chriswood you need to implement the Gdk.Paintable interface, and override the vfunc_snapshot, vfunc_get_intrinsic_width, and vfunc_get_intrinsic_height methods. Inside the vfunc_snapshot you render to a Cairo context using Rsvg.
@Erendogu06 Yes, although the code is very much a work-in-progress: https://github.com/azuredusk10/IconManager