Improved css

[Keyikedalube]

Fixes #1061
Fixes #1390

• Compile OS X specific code only in its environment
• Use classes to apply changes to multiple widgets
• Use ids to apply changes to specific widgets
• Don't style dialogs

Use Windows gtk3 theme to have a proper global look and feel instead of modifying UI by hand.

In my opinion, synfigstudio main window toolbar buttons need to be scaled down for every platform for space efficiency. But not the other parts of GUI ie., dialogs and their buttons. These things should be left alone. Or let third-party themes do the trick. Like this Windows 8 theme.

I need help with styling timeslider. Couldn't figure out how to increase its height with CSS. Or is it even possible?

[ice0]

I am thinking maybe making the css loadable from a file?
This will allow anyone to edit the design without knowing the code.
In addition, it will allow you to switch design/theme, for example, from regular to compact.

[Keyikedalube]

Yeah, but there's OS X specific code about insensitive context menus. And I don't want to waste more time on build scripts like in my other PRs.

I think I'd have to modify both build scripts to intelligently insert OS X stylesheet code using a configuration file (just like my previous attempt with *.xml.in file). I'm not really sure but I'm trying to save more time on my side here too. Hacking synfig is not the only thing I'm doing 24/7 :(

Anyway, if you think it's simple then I could try implementing loadable css file...

[ice0]

I think for the first iteration, we can just do #ifdef for file loading function. For example:

#ifdef _WIN32
  load_style("synfig.win.css");
#elseif _APPLE
  load_style("synfig.mac.css");
#else 
  load_style("synifg.css");
#endif

I am not sure, but it looks like there aren't many CSS styles out there, so you don't have to worry about duplicating code. In total there will be 3 almost identical css files with some OS-specific elements.

[rodolforg]

@ice0 , What about:

  load_style("synfig.css");
#ifdef _WIN32
  load_style("synfig.win.css");
#elseif _APPLE
  load_style("synfig.mac.css");
#else 
  load_style("synfig.lin.css");
#endif

Load a generic one, and maybe an OS-specific.

And, @Keyikedalube , you can add it in a new share/css folder, just like ui, sound, etc. (and provide an easy way to use it with that helper functions for path).

[Keyikedalube]

Guys, I was reading this post

https://www.geeksforgeeks.org/how-to-include-one-css-file-in-another/

Write once and import :)

No need to duplicate code by hand multiple times...

👍 👍 👍 your suggestions. Thanks!

[ice0]

Looks like Gnome CSS also support this feature (https://developer.gnome.org/gtk3/stable/chap-css-overview.html)
Awesome!

[Keyikedalube]

Need help with why OS X build is failing...

[Keyikedalube]

If I'm not able to figure out how to fix the time slider padding by this week (today and tomorrow)
I'm marking this PR as "Ready for review"
It's draining all my time away

BTW, here are some things I tried:

• Manually set the height from widget_timeslider (was 20, tried 40)
  But this is risky because the last time I tried to fix this issue Add extra time track space at start and end #1145 I broke other widgets; graph and sound

• Gtk::DrawingArea inherits Gtk::Widget so I tried manipulating min-height using CSS

Both of them didn't work

Anyway, here's how the time slider looks now after this PR:

And before this PR:

[rodolforg]

If I'm not able to figure out how to fix the time slider padding by this week (today and tomorrow)
I'm marking this PR as "Ready for review"
It's draining all my time away

BTW, here are some things I tried:

* Manually set the height from widget_timeslider (was 20, tried 40)
  _But this is risky because the last time I tried to fix this issue #1145 I broke other widgets; graph and sound_

* `Gtk::DrawingArea` inherits `Gtk::Widget` so I tried manipulating min-height using CSS

Both of them didn't work

AS far as I remember, the height of timeslider is related to the height of the header of Parameters panel treeview.

[rodolforg]

And that is reason indeed.

See? They're aligned.

The treeview header has buttons (for column sort) and somehow they style were affected.

(picture from GtkInspector)

[rodolforg]

Will all commits be squashed?

[Keyikedalube]

Will all commits be squashed?

Yes

And if I remember correctly, Telegram repo has a policy of keeping only one commit per PR. Contributors are supposed to squash their commits.
I prefer their style too. One PR one commit.
But that depends on how other projects want to organize their changes :)

[Keyikedalube]

And that is reason indeed.

See? They're aligned.

The treeview header has buttons (for column sort) and somehow they style were affected.

(picture from GtkInspector)

And I thought OOP design was to compartmentalize...

Those two are connected and I would never have suspected that strange behavior.

Anyway thanks for the heads up! Investigating right away...

UPDATE: You were right! Fixed it :)

[rodolforg]

They are related to sync scroll of parameters panel with timetrack Em sex, 23 de out de 2020 21:01, Keyikedalube Ndang < notifications@github.com> escreveu:

…

And that is reason indeed. [image: Captura de tela de 2020-10-23 17-06-00] <https://user-images.githubusercontent.com/1323987/97049537-3ffd5280-1552-11eb-8485-a5bb2a7fcce8.png> See? They're aligned. The treeview header has buttons (for column sort) and somehow they style were affected. [image: Captura de tela de 2020-10-23 17-08-02] <https://user-images.githubusercontent.com/1323987/97049641-6cb16a00-1552-11eb-9954-cbac19949e6d.png> (picture from GtkInspector) And I thought OOP design was to compartmentalize... Those two are connected and I would never have suspected that strange behavior. Anyway thanks for the heads up! Investigating right away... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1789 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKDHUY6RYW74TTV4TQOVG3SMIKOJANCNFSM4SWBPCIA> .

[ice0]

Merged. Thank you!