[Synfig Studio] Alternate row style in Parameters and Timeline windows for easier editing

[FirasH]

Synfig version & platform: master 7d4d8b7

Issue description: When there are many close waypoints in the Timeline it becomes hard to recognize to which paramater the waypoint belongs to, like in the following case:

and that becomes harder with wider screens as the distance from the Parameters window on the left is increased.

Sometimes I find myself selecting the parameter that I want to edit to highlight the exact row:

What about styling the Parameters and Timeline windows with an alternate row style, something like this mockup?

[rodolforg]

It looked like this way in older versions. I guess it was the current Gtk Theme (Adwaita) that doesn't implement it. We have to change the requested behavior in our custom CSS.

[FirasH]

The style should be applied to tree_view somewhere here: https://github.com/synfig/synfig/blob/7d4d8b79ba5e00e1e28d66fb3b2ebb30f875387e/synfig-studio/src/gui/docks/dock_params.cpp#L93-L113

[rodolforg]

I think it should be somewhere else, where the Params treeview is created.

I think it is in layertree.

[Keyikedalube]

Over here this guy did it with TreeView API member function Gtk::TreeView::set_rules_hint():

treeview_obj.set_rules_hint() // <-- default true in GTKMM

Then I noticed Synfig has that turned on already:

I guess it was the current Gtk Theme (Adwaita) that doesn't implement it.

Looks that way.

We have to change the requested behavior in our custom CSS.

Maybe using CSS filter: brightness() could help. GTK has its own implementation too. Here is a post from StackOverflow how filters are used. I haven't tested it but I have a hunch it should work on GTK.

[Keyikedalube]

Not the solution but here's what I got playing with CSS on GTK inspector

Instead of passing approximate decimal values, we can pass percentages to maintain color harmony with user themes. The downside to this is we might have to completely write out all styles for treeview behaviors.

[pgilfernandez]

Hi!

I'm working/experimenting on this subject, I can reach treeview and style it.

Is there any way to filter it in CSS so that I apply the styles to "Parameters", "Timetrack" and "Layers" panels individually? Something like:

#parameters treeview {
    background-color: red;
}

#timetrack treeview {
    background-color: blue;
}

#layers treeview {
    background-color: green;
}

Let me ping you to have your attention: @Keyikedalube @rodolforg @ice0

Thanks!

[Keyikedalube]

Hi @pgilfernandez the panels code are all inside the src/gui folder. They are named as docks.

Yes, GTK supports class ID and Name so you can filter according to your preference. The widget code to filter iirc would look like: tree_widget.set_name("parameters"); After that CSS magic follows.

Unfortunately I haven't been contributing to Synfig project. So I do not know much... to provide more valuable/accurate pointers. And apologies for the delay.

[pgilfernandez]

Hi @pgilfernandez the panels code are all inside the src/gui folder. They are named as docks.

Yes, GTK supports class ID and Name so you can filter according to your preference. The widget code to filter iirc would look like: tree_widget.set_name("parameters"); After that CSS magic follows.

Unfortunately I haven't been contributing to Synfig project. So I do not know much... to provide more valuable/accurate pointers. And apologies for the delay.

Thank you for your answer @Keyikedalube In the meantime I end up "learning" or guessing that the way to name widget is widget.set_name("name");, my problem now is how to locate the correct widget as I tried some of them without any luck...

I'll keep on trying but it's kind of a try and error loop for me Thanks again!

[Keyikedalube]

I believe the widgets you are looking for are all found in the src/gui/docks folder. The panel names are class labeled as docks.

[pgilfernandez]

Yes, thanks. The main problem for me is where to add the widget.set_name("name"); line and what widget should I use... I'm reading the code of a few docks files (for instance dock_navigator.cppand dock_layers.cpp) and I really don't know where should I add the line so that the named widget could be later styleable with CSS by #name {background-color:red;}...

But as I said, I'll keep on trying Thanks

[pgilfernandez]

I finally was able to set up a few panels... that's a nice step forward =) What I'm struggling now is with "Timetrack panel", the one where you can create and move waypoints... that panel has lot of code and it's hard to locate the right widget to name...

[pgilfernandez]

After lot of trials and error I'm close to give up... Could any good angel help me locating the widget for a "row of the Timetrack panel"? that is, I would like to set a name to unselected rows (in red) and selected one (in green):

I guess it has to be inside src/gui/docks/dock_timetrack.cpp or src/gui/docks/dock_timetrack2.cpp but I'm turning crazy... =(

Thanks

PS - what I'm looking for is to be able to set a background image to deal with this "alternate row style" thing...

Ping: @rodolforg @ice0