Re: [External] : Re: UI elements sizing in Modena.css
I don't know the internals of the JavaFX CSS parser but regarding the CSS
variable spec itself we could start by simply supporting numeric values as
well as colors. This would already allow developers to use variables
anywhere which would simplify and make managing stylesheets easier.
On Wed, Jul 10, 2024 at 6:24 PM Andy Goryachev
wrote:
> I agree - having CSS variables will definitely help. Personally, I would
> rather see a better way to create stylesheets programmatically, bypassing
> the whole parsing routine, but I am sure a lot of people would be more
> comfortable if things were similar to web css.
>
>
>
> Enabling CSS variables seems to me like a lot of work though, but I could
> be mistaken. Any ideas how to add support for CSS variables to JavaFX?
>
>
>
> -andy
>
>
>
> *From: *Pedro Duque Vieira
> *Date: *Tuesday, July 9, 2024 at 15:51
> *To: *Andy Goryachev
> *Cc: *openjfx-dev@openjdk.org
> *Subject: *[External] : Re: UI elements sizing in Modena.css
>
> .. 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.duquevie...@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/
> <https://urldefense.com/v3/__https:/codersblock.com/blog/what-can-you-put-in-a-css-variable/__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TwUIZ99I$>
>
>
>
> 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
> 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!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TjKYj490$>
>
>
>
>
> --
>
> Pedro Duque Vieira (Duke) - https://www.pixelduke.com
> <https://urldefense.com/v3/__https:/www.pixelduke.com__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TjKYj490$>
>
--
Pedro Duque Vieira (Duke) - https://www.pixelduke.com
Re: [External] : Re: UI elements sizing in Modena.css
I agree - having CSS variables will definitely help. Personally, I would
rather see a better way to create stylesheets programmatically, bypassing the
whole parsing routine, but I am sure a lot of people would be more comfortable
if things were similar to web css.
Enabling CSS variables seems to me like a lot of work though, but I could be
mistaken. Any ideas how to add support for CSS variables to JavaFX?
-andy
From: Pedro Duque Vieira
Date: Tuesday, July 9, 2024 at 15:51
To: Andy Goryachev
Cc: openjfx-dev@openjdk.org
Subject: [External] : Re: UI elements sizing in Modena.css
.. 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
mailto:pedro.duquevie...@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/<https://urldefense.com/v3/__https:/codersblock.com/blog/what-can-you-put-in-a-css-variable/__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TwUIZ99I$>
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
mailto:andy.goryac...@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!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TjKYj490$>
--
Pedro Duque Vieira (Duke) -
https://www.pixelduke.com<https://urldefense.com/v3/__https:/www.pixelduke.com__;!!ACWV5N9M2RV99hQ!JG_yI0ZU2mSJRD8IIa8A04SIQyiSaLmkkxdi65Y7JnmS-xaLYYxfHQr1AbFvjWh3DI0mYXqpcVPYrO4-WFHwnh4TjKYj490$>
Re: [External] : Re: UI elements sizing in Modena.css
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
Date: Tuesday, July 9, 2024 at 15:04
To: Andy Goryachev
Cc: openjfx-dev@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
mailto:andy.goryac...@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$>
Re: UI elements sizing in Modena.css
.. 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.duquevie...@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
> 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
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/
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
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
UI elements sizing in Modena.css
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
