@Sharvaniharan do you know if this functionality is feasible for the compass icon in Mapbox? 👇

https://www.dropbox.com/scl/fi/vbccj1vp8zv64ce5ctgjj/RPReplay_Final1700743529-2.mov?rlkey=mqvtw5rxeg7745agy9xg566i4&dl=0

It tilts the map based on the direction you are facing. If we get it out of the (map) box, let’s use it, as it’s great for navigation.

Thanks!

Hi @scblr
This is ready for Design review: https://github.com/wikimedia/apps-android-wikipedia/pull/4319/checks

The change of marker icons and compass icon will happen in the ui element update task.

@scblr A couple of comments and requests:

• The "tabs" button in the design looks slightly larger than our Tabs button in other places, such as the article screen or main screen. Can we make it consistent, or do we want to change the design for the tabs button everywhere?
• Same for the language button: it looks slightly different from other places where we have it (thicker border?).
• Regarding the Language selection screen: can we please reuse the language selection that we have in other places, such as Talk pages. That way we can leverage an existing screen without needing to build anything new:

1)

The "tabs" button in the design looks slightly larger than our Tabs button in other places, such as the article screen or main screen. Can we make it consistent, or do we want to change the design for the tabs button everywhere?

Same for the language button: it looks slightly different from other places where we have it (thicker border?).

Good eye @Dbrant. I adapted the tabs and language icons to look consistent alongside each other. But yeah, let’s use the ones we have in the app already and see how they look together. Then make some tweaks, possibly. It wouldn’t make sense to, e.g., use a different type of border thickness for each of these since they use the same square shape.

2)

Regarding the Language selection screen: can we please reuse the language selection that we have in other places, such as Talk pages. That way we can leverage an existing screen without needing to build anything new:

Yes, it looks like the screenshot you posted does not match the designs on Figma (which re-use the contributions filter design).

Figma

3)

I noticed that this view uses incorrect type definitions:

a) Please change it to use the p type definition for the language list:

font-family: Roboto
font-weight: Regular
font-size: 16sp
line-height: 24sp/1.5em

b) And h3-button for the 'Add language' label:

font-family: Roboto
font-weight: Medium
font-size: 16sp
line-height: 24sp/1.5em

@Dbrant not sure if this belongs in this ticket:

1) Can this button be removed?

2) Location button design needs to be updated:

Implementation	vs	Design

3) Update compass design button:

Implementation	vs	Design

Thx!

Hi @scblr

Picking things back after the changes on this task.. 😅

1. The tabs view and langCode view now look off sized. Should we match their sizes, or is this ok?

2. Regarding the language selection, I feel the current Figma looks like the best choice. The app language is not always the map language, so opening the Languages screen directly might not be the best way. The current Filters-like selection feels better here Cc @Dbrant

3. I have updated the language list items. I also saw that the language scrollview on top had localized name, so have changed that as well. Please check the changes here: https://github.com/wikimedia/apps-android-wikipedia/pull/4351/checks and confirm.

In T351397#9421119, @scblr wrote:

1) Can this button be removed?

Attribution for maps is required, per the terms of use.

Thanks for the great work on this so far! ✨

1)

Attribution for maps is required, per the terms of use.

Gotcha @Dbrant. The current positioning (next to the location button) feels random. What do you think about this idea? 👇

Map default state: Show info button at the bottom left	Map tilted state: Compass overlaps info button

The color of the info icon should be placeholder. Here’s the Figma link with all the details.

2) This hasn’t been updated yet:

Update compass design button:

Implementation	vs	Design

3)

The tabs view and langCode view now look off sized. Should we match their sizes, or is this ok?

Agreed @Sharvaniharan. Since this is a global change, I created a new task: T354522.

4)

Regarding the language selection, I feel the current Figma looks like the best choice. The app language is not always the map language, so opening the Languages screen directly might not be the best way. The current Filters-like selection feels better here Cc @Dbrant

Agreed @Sharvaniharan. I had a few conversations about this with @Dbrant on Slack and explored consistent language screens that works in different scenarios across the app:

Figma

However, aligning all language screens is a bigger undertake: so we should consider creating a separate task for it and go with the current design suggestion for now.

5) Related to 4): Please make sure to use the exact design specs from Figma for that language screen:

Implementation	vs	Design

Some things to optimize:

• p font definition for the list
• border between list items
• background color for the entire screen and paper for the list items
• list items "jump" (are moving by 1px) when selecting an item
• margin between items is too large

Hi @scblr

Sorry it took long 😅
Here is the new apk. We merged most of the stable updates so we could give you consolidated apks. So the new link is here: https://github.com/wikimedia/apps-android-wikipedia/pull/4383/checks
Thank you!

Thanks @Sharvaniharan.

Minor thing: Please apply the h3-button font style to this:

h3-button {
  font-family: Roboto;
  font-weight: Medium;
  font-size: 16sp;
  line-height: 24sp/1.5em;
}

And I guess 1) and 2) are handled in T353562.

Hi @scblr

This is done.
And yes, the first two things were addressed on this T353562, but since we merged all our work, you should be able to see the updated changes on the apk.
APK: https://github.com/wikimedia/apps-android-wikipedia/pull/4383/checks
Thank you :)

@Sharvaniharan "Update app languages" using bold or faux bold now 🤔 (cc @cooltey) 👇

Can you check if it’s using

h3-button {
  font-family: Roboto;
  font-weight: Medium;
  font-size: 16sp;
  line-height: 24sp/1.5em;
}

oops sorry @scblr .. i had used h3 instead of h3-button 😅
Fixed on APK: https://github.com/wikimedia/apps-android-wikipedia/pull/4182/checks
Thank you !

@Sharvaniharan looks good now I moved it to Code review 👏

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