chriswood,

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:

chriswood,

The UI is coming along, bit by bit! Building templates is coming a bit more naturally too.

bragefuglseth,
@bragefuglseth@fosstodon.org avatar

@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?

chriswood,

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)

Demo of selecting an icon to view its details in the sidebar, and toggling between light and dark modes.

ebassi,
@ebassi@mastodon.social avatar

@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.

chriswood,

@ebassi Ah perfect, thank you! Will take a look at this

ebassi,
@ebassi@mastodon.social avatar

@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

chriswood,

@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?

ebassi,
@ebassi@mastodon.social avatar

@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.

bragefuglseth,
@bragefuglseth@fosstodon.org avatar

@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,
@bragefuglseth@fosstodon.org avatar

@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 🙂

chriswood,

@bragefuglseth Perfect, I'll follow suit with those conventions. Thank you very much!

bragefuglseth,
@bragefuglseth@fosstodon.org avatar

@chriswood No problem! Feel free to join the -dev:gnome.org room on Matrix for questions about coding/designing for GNOME, there are lots of helpful people there 💬

  • All
  • Subscribed
  • Moderated
  • Favorites
  • GNOME
  • rosin
  • magazineikmin
  • GTA5RPClips
  • khanakhh
  • InstantRegret
  • Youngstown
  • mdbf
  • slotface
  • thenastyranch
  • everett
  • osvaldo12
  • kavyap
  • cubers
  • DreamBathrooms
  • megavids
  • Durango
  • modclub
  • ngwrru68w68
  • vwfavf
  • ethstaker
  • tester
  • cisconetworking
  • tacticalgear
  • Leos
  • provamag3
  • normalnudes
  • anitta
  • JUstTest
  • All magazines