Fenix: Support RTL for theme / toolbar position picker images in Onboarding

Created on 24 Feb 2020  ·  7Comments  ·  Source: mozilla-mobile/fenix

This would provide a better RTL experience.
Initially reported in https://github.com/mozilla-mobile/fenix/issues/8469, it was seen in https://github.com/mozilla-mobile/fenix/issues/8673 that simply mirroring the existing imagery is not a solution.
For actually fixing this we need new images that would reflect the actual experience RTL users would have.

Onboarding engverified 🐞 bug

All 7 comments

@Mugurell I’ve designed an RTL variant that’s ready for export, and @apbitner (who’s the owner of this feature) will be able to post the assets here.

@Mugurell RTL assets posted below. Thanks!

MDPI

onboarding_light_theme_rtl
onboarding_dark_theme_rtl

HDPI - 1.5x

<a href="onboarding_light_theme_rtl@1">onboarding_light_theme_rtl@1</a> 5x
<a href="onboarding_dark_theme_rtl@1">onboarding_dark_theme_rtl@1</a> 5x

XHDPI - 2x

onboarding_light_theme_rtl@2x
onboarding_dark_theme_rtl@2x

XXHDPI - 3x

onboarding_light_theme_rtl@3x
onboarding_dark_theme_rtl@3x

XXXHDPI - 4x

onboarding_light_theme_rtl@4x
onboarding_dark_theme_rtl@4x

@apbitner Although this ticket initially only referenced the theme picker images
in review it was seen,
based on https://drive.google.com/file/d/11-3sSjg9PvJAjTbRJ_UMC1gghWnPelVS
that we'd also need similar rtl resources for the toolbar position picker images.

Can you help with these here so this ticket will land the resources for both pickers at the same time for a cohesive onboarding UX?

We also need to keep in mind the in-flight #7606 which comes to modify the same imagery.

Gray border assets have also been added to https://github.com/mozilla-mobile/fenix/issues/7606 for both the Theme and Toolbar cards

Thank you @apbitner for the images!

This patch will add just

  • the purple bordered rtl theme picker images and
  • the gray bordered rtl toolbar position picker images

since the ltr versions of these images only had this purple / gray border and not both.
Will leave it for #7606 to add the rest of the imagery and properly handle switching between them.

Hi, I can confirm that the radio button for the "Take a position" card on RTL language is displayed correctly but with the actual image, the radion button hovers the content from the displayed image.

Devices:

  • Samsung Galaxy Tab S6 (Android 9);
  • Google Pixel 3 (Android 10).

Build:

  • Firefox Preview Nightly 3/23 #20830607.

Notes:

Screenshot_10

  • An additional note is that the images from the "Take a position" card don't display correctly the app experience.
  • I think that till the images will be updated to a faithful experience with the app, the actual images need to be mirrored since the content from them are not in the same place as the position in the app. I filled the ticket #9316 for tracking this issue.
  • Also, I want to specify that the "Choose your theme" card icons are mirrored correctly.
Was this page helpful?
0 / 5 - 0 ratings