Auto adjust sensor texts size in header

[McGiverGim]

Fixes #2065

The elements of the Configurator not always adjust to the size of translations. This is specially a problem in very short strings, like the sensors header. This tries to fix that making it resize using a SVG. This is the result:

[DusKing1]

Wow nice work! But don't you think that GPS is wayy fat?

[McGiverGim]

Yes, it seems it has used all the space, the ideal is to reduce only, not to make it bigger, but I'm not too sure if there is a property for this... I will play a little more with it, but I want to know if this is an accepted solution.

[DusKing1]

It seems nice to me considering there won't be strings longer than 4 CN chars. I think that's acceptable.

[asizon]

Looks so good this autoadjust idea! Html part cant be done in css??

[McGiverGim]

Fixed the ugly width and cleaning of the code...

[McGiverGim]

It seems this latest solution has cutted some of the characters.. I will go back to see what I have lost...

[McGiverGim]

I need to let it by today. The problem is the textLength="100%", if I use it is like the first images, if not it cuts the text. Maybe someone want to play a little more with it today...

[asizon]

@McGiverGim what about reduce GPS textLength to 70%??Anyway I think the text at 100% in other languages are too big

[McGiverGim]

No that will not work. What this does is to say the text the size it must fill. If I use 70% ALL the text will be compressed to 70% of the assigned space, making too small the big texts.

I will try to find a solution today, but yesterday search give me nothing...

[McGiverGim]

The SVG path has ended to me... So we have several solutions, now we need to decide which we prefer:

1. The SVG way, it modifies (reduces and magnifies) all the letters to fit always the size of the div. Is smooth but maybe it makes too bigger the shorter strings.
   
   
2. Cut the text when it is bigger. It has a tooltip, so moving the cursor over the icon will show the complete text. But I don't know if this is acceptable for some languages like Chinese.
   
   
3. Reduce the font when the text is too big. We can do this in an automatic way (the captures are using a javascript library to do it: https://www.npmjs.com/package/textfilljs) or letting the translator add style tags manually to the translations (using the live translation version of the Configurator maybe).
   
   

I think this are the more common solutions for this problem.

[asizon]

For me the 3 solution is the best for these cases :)

[DusKing1]

The third solution seems fine to me. I won't be bothered if I need to add additional style tags.

[McGiverGim]

Updated the code with solution 3 as requested.

Now I think we need to wait @mikeller to see if better to use this code, or better to do the same manually with <style> tags in the translators side.

[mikeller]

Seems to be a reasonable approach. But is this meant to work for all languages? It seems to be failing for some that define overly long text:

(These are broken in master as well.)

[McGiverGim]

I've limited the minimum don't size but yes, it must work. I will recheck my code to see what is happening.

[McGiverGim]

Sorry @mikeller I forgot to upload the library, so it was not working... 🤦‍♂️

I've tested with German and is very large so it does not work at all...

The russian works better:

With the SVG solution neither...

So seeing that, I think the best we can do is simply "cut" the large texts, and if some translator want to make them smaller let him do that in the translations string as you suggested.

[mikeller]

Yes, the super small fonts do not work - translators will have to change this. Maybe we should add instructions for such fields to indicate that these need to fit into small fields.
But shouldn't they all of these labels be in the same font size in the first place?

[McGiverGim]

No, the library works independent for each field. We can change this, of course but it will not work neither seeing how long are some strings.
We have a text of "keep it very short", and we have the live translator version of Configurator. But it is not enough 😉
If it is ok, I will change it to simply cut the long texts to not break the UI and if someone really needs some space more admit the use of style tags here.

[mikeller]

No, the library works independent for each field. We can change this, of course but it will not work neither seeing how long are some strings.

That's where I am not sure if trying to do this automatically here to make it work for a small number of languages, and introducing the potential for all other languages to end up with an odd look if different size text is used for fields in the same group is the right thing to do here.
I think as long as these are edge cases and not the norm then using style tags for individual messages in individual languages is a better approach.
And German and Russian translators will have to try harder. ;-) I am sure 'Baro' is understandable in German.

[McGiverGim]

Pushed new code. It simply cuts the text if too big. All the icons have a tooltip with a long string, so is not a problem.

I've uploaded the directly cut version:

Is cleaner with ellipsis, but maybe the strings are too short then:

@DusKing1 you will need to add your own "reductor" in the the translations, something like: <span style=\"font-size:6pt\">Gyro long text<style>. I suggest to give all of them the same size and that you use the "live" translation version of the configurator, in this way you will see how it looks.

[DusKing1]

@McGiverGim Thank you so much for putting so many efforts on this, I like this solution and have no problem with that!

[McGiverGim]

Another PR forgotten, rebased!

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

No Coverage information
0.2% Duplication