Using a GtkListBox instead of TreeView

[infirit]

One of the more annoying things with the current implementation is that it's overly complicated and uses custom draw methods, faders etc. I Made a proof of concept using GtkListBox for the view and GtkRevealer for animation and GtkLevelBar for the bars.

Why did I do this you might ask. We have been discussing changing the UI and doing all that is going to involve more custom drawing making things even more complicated.

• GtkListBox: A GtkListBoxRow is just a container we can put any kind of GtkWidget in.
• GtkRevealer: No more custom drawing methods to handle animation. These do a good enough job for what blueman needs.
• GtkLevelBar: Fully themable with CSS so no need for the lowres pixmaps we currently use.

Small demo.
blueman_listbox.webm

Just putting this out in the open so anyone can comment on it.

ps: The bars are not right yet and need a gradient, the bar icons are just placeholders.

[infirit]

Using css to create the striped effect.

levelbar#lq_levelbar block.filled {
  background-color: #71d016;
  border-color: #71d016;
  background: linear-gradient(15deg, #5eb30d 10%, #71d016 10%, #71d016 20%, #5eb30d 20%, #5eb30d 30%, #71d016 30%, #71d016 40%, #5eb30d 40%, #5eb30d 50%, #71d016 50%, #71d016 60%, #5eb30d 60%, #5eb30d 70%, #71d016 70%, #71d016 80%, #5eb30d 80%, #5eb30d 90%, #71d016 90%, #71d016 100%);
}

[cschramm]

Pretty cool.

If I get it right, using ListBox, Revealer and LevelBar are three distinct topics. Well, maybe the first two are connected but introducing LevelBar is separate, right?

Regarding the bars, we have to keep in mind #860, #1642, and #1620. I do like the concepts without bars, but I have the feeling you do not and I agree that having colors there is nice. Adding some color to those concepts (applied to text and icon) does work in my mind, though. 😄

[infirit]

If I get it right, using ListBox, Revealer and LevelBar are three distinct topics. Well, maybe the first two are connected but introducing LevelBar is separate, right?

Yeah, the first two I like to handle together. But I can do the bars later and just put the pixbuf we already have in a GtkImage (although this does have a drawback that we'll have to let Gtk scale it which makes it blurry).

Regarding the bars, we have to keep in mind #860, #1642, and #1620. I do like the concepts without bars, but I have the feeling you do not and I agree that having colors there is nice. Adding some color to those concepts (applied to text and icon) does work in my mind, though. smile

My primary goal with this was to see if I could replicate what we already have with standard widgets. This can be done pretty easily with a few small changes. I have no problem dropping the bars for something else.

And those issues was what made me investigate other, more flexible options. The nice thing with using these widgets is that we can style them how we like it. We could provide color profiles that are stored in css files and can be changed by the user. I think we can even style the icons (not tried but see 1)

1: https://docs.gtk.org/gtk3/css-properties.html#icon-properties

[cschramm]

Regarding the bars, we have to keep in mind #860, #1642, and #1620. I do like the concepts without bars, but I have the feeling you do not and I agree that having colors there is nice. Adding some color to those concepts (applied to text and icon) does work in my mind, though. smile

My primary goal with this was to see if I could replicate what we already have with standard widgets. This can be done pretty easily with a few small changes.

Yeah, sure. I was just thinking that it does not make sense to change the bars if we then drop them. 😄 If it's small enough, it wouldn't hurt, though.

[infirit]

It really is easy to replace pixbufs with the bars. Let me push the script to a repo so people can judge my check out the code. It's horrible mess of little experiments so please be nice 😅

[infirit]

Here are all the files I used (or have used) in my experiments. https://github.com/infirit/listbox

[infirit]

First devicemenu attempt with popover. Search button to headerbar. Also changed the animation to slide which looks much better to me.

Peek.2022-11-13.19-58.webm