[TC10.70b7] visual bugs dark mode, no scroll bar

[AntonyD]

Pls download these pics on your disk and look at them through image viewer and quickly switch between pairs of pictures
this way you can easily see HOW elements are rendered differently in dark mode compared to light mode.
[img]https://i.ibb.co/q56wRqS/1.png[/img]
[img]https://i.ibb.co/n8Yw6rQ/1-2.png[/img]

[img]https://i.ibb.co/vdgH5vg/2.png[/img]
[img]https://i.ibb.co/rHd18p2/2-2.png[/img]

for the 2 pairs above you should I hope already noted that the main problem here
that the TEXT is being rendering TOO far from the corresponding GUI elements:
[img]https://i.ibb.co/6HPpBfh/image.png[/img]
on this pic you can more correctly to understand about what I am talking here.

on the next pair of pic problem does exist in both modes, but here dark mode looks a little bit better ))
[img]https://i.ibb.co/JvfvNP2/3.png[/img]
[img]https://i.ibb.co/nrmRj7y/3-2.png[/img]

For the next Image I have a small question - why we do not see the horizontal scrollbar here?
[img]https://i.ibb.co/vXRvk8c/4.png[/img]
Some kind of GUI object of the "table" type is definitely built in here - two columns with information stand out very noticeably.
But for some reason, the scrollbar is not shown for the case when this information does not fit completely.

[white]

Moderator message from: white » 2022-05-30, 13:02 UTC

Split to separate thread

[ghisler(Author)]

Please let me know
1. The font (name, size, weight) you use for dialog boxes
2. The DPI scaling factor in Total Commander (if set)
3. The scaling factor of the current screen in Windows, e.g. 120%

The space between checkbox and text is determined by the currently used font. There is no documentation on how Windows calculates this space, so I had to make a guess. It works well with most fonts, but your seems to be too wide.

[AntonyD]

1) All is default - Microsoft Sans Serif, 8
2) 120
3) 100

The space between checkbox and text is determined by the currently used font.

Well, it would be unambiguously clear - if this empty space difference between text and checkbox was ALWAYS!
BUT it exists ONLY for the case of turning on the dark mode! So this is not just the influence of Windows itself.

so I had to make a guess.

Those. again - I don't change any more TC's options - just the dark mode option and I get such different renderings.
If something had to be guessed during this procedure, then it would always work ... And not just for the dark mode;)

[ghisler(Author)]

Well, it would be unambiguously clear - if this empty space difference between text and checkbox was ALWAYS!
BUT it exists ONLY for the case of turning on the dark mode! So this is not just the influence of Windows itself.

When using dark mode, I have to draw the checkboxes manually. When in normal mode, the Windows theme draws them.

[AntonyD]

OK, so I assume that some checks, tests will be applied to the code in order to understand what is wrong with that "void";)

btw what about "why we do not see the horizontal scrollbar here?"
Image: https://i.ibb.co/vXRvk8c/4.png

[white]

Pls download these pics on your disk and look at them through image viewer and quickly switch between pairs of pictures
this way you can easily see HOW elements are rendered differently in dark mode compared to light mode.
[img]https://i.ibb.co/q56wRqS/1.png[/img]
[img]https://i.ibb.co/n8Yw6rQ/1-2.png[/img]

[img]https://i.ibb.co/vdgH5vg/2.png[/img]
[img]https://i.ibb.co/rHd18p2/2-2.png[/img]

for the 2 pairs above you should I hope already noted that the main problem here
that the TEXT is being rendering TOO far from the corresponding GUI elements:
[img]https://i.ibb.co/6HPpBfh/image.png[/img]
on this pic you can more correctly to understand about what I am talking here.

Confirmed, even with clean ini (Microsoft Sans Serif 8, no scaling).

The space between checkbox and text is determined by the currently used font. There is no documentation on how Windows calculates this space, so I had to make a guess. It works well with most fonts, but your seems to be too wide.

Your guess is bad. If I change from Microsoft Sans Serif 8 to size 16, the space is 2.5 times bigger in dark mode than in normal mode.

[ghisler(Author)]

Sorry, I was wrong - after digging through the component library, the drawing of the checkbox is done by Windows itself. I couldn't find out why it's adding 2 pixels in dark mode. Unfortunately I will have to move this thread to "will not be changed", sorry.

[white]

[img]https://i.ibb.co/vdgH5vg/2.png[/img]

What about the combobox sticking out of the groupbox?

[ghisler(Author)]

I fixed that by making all the groupboxes a tiny bit wider.

[AntonyD]

I couldn't find out why it's adding 2 pixels in dark mode

First of all we are talking about 5 px diff! NOT 2!
"Void" is 4 px width in light mode and 9 px in dark mode.
Secondly - NOT only distance between checkboxes and text is changing - but also and the position of groupboxes
[img]https://i.ibb.co/mt3NFfm/2.png[/img]
just open the pic and zoom it and compare my dividing lines that are drawn strictly along the boundaries of objects.
And you will see these differences more clearly.

P.S. Wow, while I was drawing my pictures, something in the code has already been fixed))
Let's see what happens in the next beta.

[AntonyD]

2ghisler(Author)
But I still do not understand: what about "why we do not see the horizontal scrollbar here?"
Image: https://i.ibb.co/vXRvk8c/4.png

[white]

I couldn't find out why it's adding 2 pixels in dark mode

First of all we are talking about 5 px diff! NOT 2!
"Void" is 4 px width in light mode and 9 px in dark mode.

Her is what I meassured for the space between checkbox and label:

	Microsoft Sans Serif 8 and no scaling	Microsoft Sans Serif 16 and no scaling
Normal mode	3	7
Dark mode	5	18

So in normal mode when changing the font from 8 to 16, the space approximately doubled.
In dark mode the space more than trippled.

[AntonyD]

Normal mode 3

hmmm. strange. look at my picture
[img]https://i.ibb.co/tLbxqKb/screenshot.png[/img]
But in general, your digits are quite accurate in showing that this distance is actually TOO drastically different in these two modes...

[ghisler(Author)]

I found an old Stackoverflow post which explained the calculation of the gap:
https://stackoverflow.com/questions/1164868/how-to-get-size-of-check-and-gap-in-check-box
However, this leads to vastly incorrect values for big fonts.

In my own tests, the closest I can get is by using 1/4 of the average character width of the characters A-Za-z. This leads to good values for fonts up to about 20, then it's a bit too small compared to normal mode. It also looks too narrow if I don't make it at least 2 pixels wide, even if the normal mode uses just 1 pixel for e.g. font size 8.

But I still do not understand: what about "why we do not see the horizontal scrollbar here?"

I'm not using a horizontal scrollbar there because the actual columns until the last are not really relevant there. It's more like a hint of what the custom column configuration contains.