UI elements sizing in Modena.css

[Pedro Duque Vieira]

.. one more reason to use the CSS variable spec that I forgot to mention:
 5 - It's a spec that has been thoroughly thought of before it was added to
CSS and it has stood the test of time.

On Tue, Jul 9, 2024 at 11:04 PM Pedro Duque Vieira <
pedro.duquevieira at gmail.com> wrote:

> 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/
>
> 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>
> 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
>


-- 
Pedro Duque Vieira (Duke) - https://www.pixelduke.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20240709/e625ac91/attachment-0001.htm>