[External] : Re: UI elements sizing in Modena.css

[Andy Goryachev]

Yeah, I thought that it might be possible to define properties for sizes similarly to colors, and some earlier attempts seemed to indicate that it might work.

It does not, unless the sizes are fixed (e.g.     -fx-size-1px: 1px; )

The real solution, as you mentioned, would be to add capability to add variables, though it is much more complex task.

-andy



From: Pedro Duque Vieira <pedro.duquevieira at gmail.com>
Date: Tuesday, July 9, 2024 at 15:04
To: Andy Goryachev <andy.goryachev at oracle.com>
Cc: openjfx-dev at openjdk.org <openjfx-dev at openjdk.org>
Subject: [External] : Re: UI elements sizing in Modena.css
Andy, if I understand the suggestion correctly, you want to set the Modena sizes using variables that can be easily overridden. To that effect variables must first be able to hold numeric values as, as it stands today
JavaFX only allows colors to be used for CSS variables.
So, you're also suggesting adding the ability for CSS variables to define inset values, is that correct?

I think that's a good idea. I would, however, generalize that to allow CSS variables to hold numeric values that could be used anywhere. Or at least, starting to pave the ground for that.

I would go even further and start to pave ground to add the CSS variable spec into javafx css: https://codersblock.com/blog/what-can-you-put-in-a-css-variable/<https://urldefense.com/v3/__https:/codersblock.com/blog/what-can-you-put-in-a-css-variable/__;!!ACWV5N9M2RV99hQ!JHNtMTQauqCcPBTRoFSHfVOonWBx4nRfAP2Ei9t20B2epgC9GdVoGhGEa3vmHPsYQSHhtK4ZOJsDxzD0cMGoVV8p-QUG4Og$>

Why use the css web spec? Because of the following reasons:
1 - Designers already know how to work with the css web spec
2 - there are already many tools available that work with the css web spec
3 - there are already many examples on the web using CSS so developers can just copy paste those examples
4 - Developers coming from the web can easily start using javafx css with no friction and no need to learn it

Thanks





On Tue, Jul 9, 2024 at 9:04 PM Andy Goryachev <andy.goryachev at oracle.com<mailto:andy.goryachev at oracle.com>> wrote:
Since we touched the modena.css, I would like to ask the group's opinion on whether we should fix the way modena.css sizes UI elements.  Please see https://bugs.openjdk.org/browse/JDK-8314683 for reference, where changing the font size also unexpectedly changed the scrollbar.

What do you think about introducing a set of variables similar to -fx-base but for sizing/padding, placing them early on to depend on the font size in the .root selector instead of the font in the actual control?  Something along the lines of


.root {

-fx-size-3px: 0.25em;

...

}



.scroll-bar:horizontal > .increment-button > .increment-arrow {

    -fx-padding: -fx-size-3px -fx-size-3px -fx-size-3px -fx-size-3px;

}



instead of



.scroll-bar:horizontal > .increment-button > .increment-arrow {

    -fx-padding: 0.333em 0.167em 0.333em 0.167em; /* 4 2 4 2 */

}



This way we still permit the UI components resize with the main font, while keeping the sizes of all the control surfaces consistent?

This will require a trivial change in InsetsConverter.

What do you think?

-andy


--
Pedro Duque Vieira (Duke) - https://www.pixelduke.com<https://urldefense.com/v3/__https:/www.pixelduke.com__;!!ACWV5N9M2RV99hQ!JHNtMTQauqCcPBTRoFSHfVOonWBx4nRfAP2Ei9t20B2epgC9GdVoGhGEa3vmHPsYQSHhtK4ZOJsDxzD0cMGoVV8pAQ-_DwY$>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20240709/7f697aa1/attachment-0001.htm>