Added examples to the task’s description and put it back to Needs triage so we can discuss it in the next planning meeting @JTannerWMF.

Hi @scblr

The original spec you provided for zh-hant language code will make the text touch to the border, so I made other comparisons for your reference.

Please see the screenshots below and let me know which one I should proceed with.

19dp x 18dp + 5sp	20dp x 19dp + 6sp	19dp x 18dp + 6sp

Please note the Tab icon is 19dp x 18dp + 6sp

@cooltey, let’s go with 19dp x 18dp + 5sp then.

I updated the task’s description. I'm just making sure: did you see the definitions? 🤔👇

• The font size adapts:
  • One and two characters: Roboto Mono, Bold, 10sp (e.g. tab numbers and language codes with two letters)
  • More than two characters: Roboto Mono, Bold, 5sp (e.g. language codes with more than two letters)

Thanks!

Hi @scblr

The PR is working in progress, but you may check it here: https://github.com/wikimedia/apps-android-wikipedia/pull/4415
(the color might be off)

I have not checked if it applied all over the place, but here are the results:

It looks like using 5sp for zh-classical is acceptable, I do not think it would be necessary to limit the text length.

Hi @scblr

The design changes have been updated to the main branch, which does not apply to the Places yet.

Please download the APK from the ticket description to see the changes, thanks!

Here are the screenshots for your reference in case you cannot find them all 😉

Feed	Watchlist	Watchlist filter	Search (multiple languages)	Search (single language)

Notification	Notification filter	Customize feed	Contribution filter	Wiki languages

Here are the screenshots for Places (not in this APK yet)

Looks great! Except maybe for the ZH-CLASSICAL, which is a bit cramped → I still think we should limit the characters to 8, as the WP code for ZH-CLASS (for example) is distinguishable from other Chinese language codes like ZH-YUE. Thoughts @cooltey?

1) Can you remind me of the difference between the filled and outlined icons in this view? 🤔

2) For consistency with Places, let’s change this icon to be outlined (not filled)

Hi @scblr

Please download the APK to see the changes, thanks.

In T354522#9492064, @scblr wrote:

Looks great! Except maybe for the ZH-CLASSICAL, which is a bit cramped → I still think we should limit the characters to 8, as the WP code for ZH-CLASS (for example) is distinguishable from other Chinese language codes like ZH-YUE. Thoughts @cooltey?

Cutting the language code is not a good idea and I prefer to keep the minimum 5sp for the longer language code in this case, to respect every language code, even if it touching the edge of the view 😓

1) Can you remind me of the difference between the filled and outlined icons in this view? 🤔

Filled -> selected language
Outlined -> not selected language

Maybe we can simplify it to show the language code view only if it is selected.

2) For consistency with Places, let’s change this icon to be outlined (not filled)

Done!

@cooltey just looked at it (except for Places which isn’t visible yet).

1) The font resizing logic in the tab is incorrect yet. Compare the number 10 with the letters EN. It should also use 10sp:

2) Nitpick: when there’s a one-digit number in the new tabs icon, it is not visually not horizontally centered:

Can we move it a tad to the left? Thanks

In T354522#9496876, @cooltey wrote:

Hi @scblr

Please download the APK to see the changes, thanks.

In T354522#9492064, @scblr wrote:

Looks great! Except maybe for the ZH-CLASSICAL, which is a bit cramped → I still think we should limit the characters to 8, as the WP code for ZH-CLASS (for example) is distinguishable from other Chinese language codes like ZH-YUE. Thoughts @cooltey?

Cutting the language code is not a good idea and I prefer to keep the minimum 5sp for the longer language code in this case, to respect every language code, even if it touching the edge of the view 😓

Ok, agreed!

1) Can you remind me of the difference between the filled and outlined icons in this view? 🤔

Filled -> selected language
Outlined -> not selected language

Maybe we can simplify it to show the language code view only if it is selected.

Ok! 👍

2) For consistency with Places, let’s change this icon to be outlined (not filled)

Done!

Thanks!

Hi @scblr

The new icons have been applied to the feature branch. Please download the APK to see the changes on Places, thanks!

https://github.com/wikimedia/apps-android-wikipedia/pull/4182

Hey @cooltey – you’re going to hate me for this 🤗👇

I experimented a bit with bigger sizes to accommodate zh-classical better:

• Border: 21dp * 20dp
• Border-width: 1.5dp
• Up to 2 characters: Roboto Mono, Bold, 12sp
• Up to 8 characters: Roboto Mono, Bold, 7sp
• Up to 12 characters: Roboto Mono, Bold, 5sp

In theory, the result should look like this:

Any chance we could try out these settings? I owe you a bubble tea!🧋👼

In T354522#9501302, @scblr wrote:

Hey @cooltey – you’re going to hate me for this 🤗👇

I experimented a bit with bigger sizes to accommodate zh-classical better:

• Border: 21dp * 20dp
• Border-width: 1.5dp
• Up to 2 characters: Roboto Mono, Bold, 12sp
• Up to 8 characters: Roboto Mono, Bold, 7sp
• Up to 12 characters: Roboto Mono, Bold, 5sp

In theory, the result should look like this:

Any chance we could try out these settings? I owe you a bubble tea!🧋👼

Hi @scblr

Done!
https://github.com/wikimedia/apps-android-wikipedia/pull/4429

Please check the APK to see the changes 😄

Looks good to me @cooltey – we made it! Thanks for the great work!

Looking good to me on 2.7.50470-beta-2024-02-08