1064502 - [RTL] Contacts List - Letters should not overlap contact names and faces.

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Contacts, defect)

Description

[Stephany Wilkes]

Set language to Arabic.
Contacts list is shifted right. 
Alphabetical, small gray letters are also shifted right and overlap contact names or, when photos are attached to a contact, overlap the contact's photo.

Expect that correct layout in terms of padding between elements will be maintained when an RTL language is selected, and that elements will not overlap.

Adding Fang to CC: list to provide detail on visual layout for 2.2.

Comment 1

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: Pointer to PR 26238

Comment 2

[Sergi Mansilla [:sergi] (Telenor) [PTO]]

Attachment: 2014-11-21-05-58-47.png

Thanks for your patch, Francisco!

I think the patch is good, but I believe there is a bit too much blank space on the right; I attach a screenshot of what I see. Perhaps UX could take a look and give a precise measure for the right padding, which is now 6rem.

I also left a small nit comment on the PR.

Cheers!

Comment 3

[Fang Shih [:fang]]

Thanks for the patch. I agree that now we have too much blank space on the right. I think We should only leave 1rem on the right padding. Also for the header icon, I've checked with UX, We don't need to change the position of the header icon for RTL mode. It should stay in right side. Let me know if you need more details. Thanks!

Comment 4

[Francisco Jordano [:arcturus] [:francisco]]

Thanks Fang,

I think is enough with your suggestion, also the gaia header will be fix in a different pull request for all apps using that web component.

Comment 5

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8524546 [details] [review]
Pointer to PR 26238

Second round, would wait first to have Fang's ok :)

Comment 6

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: 2014-11-24-18-47-44.png

Ei Fang, this is the result with yours and Sergi's suggestions.

Comment 7

[Fang Shih [:fang]]

Comment on attachment 8527830 [details]
2014-11-24-18-47-44.png

Hi Francisco,

Thanks for the patch. I think the padding on the right looks good now. The only issue here is the facebook icon is too close to the company title. Can we move the facebook icon right aligned with contact name? Thanks!

Comment 8

[Fang Shih [:fang]]

Attachment: contact_list_RTL.png

I've modified the screenshot with correct alignment. You can refer to the file attached.

Comment 9

[Francisco Jordano [:arcturus] [:francisco]]

Fang so, if I'm not wrong this case is about correcting the fb mark and company isnt?

Comment 10

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: 2014-11-23-15-16-33.png

Hei Fang, now the social marks are aligned as you showed on your screenshot

Comment 12

[Fang Shih [:fang]]

Comment on attachment 8528342 [details]
2014-11-23-15-16-33.png

Looks great! Thanks Francisco!

Comment 13

[Sergi Mansilla [:sergi] (Telenor) [PTO]]

Comment on attachment 8524546 [details] [review]
Pointer to PR 26238

Good patch, thanks Francisco!

Comment 14

[Francisco Jordano [:arcturus] [:francisco]]

Landed:

https://github.com/mozilla-b2g/gaia/commit/c70bc233c7f497d219ac8518f76e371de6680a9e

Comment 15

[Johan Lorenzo [:jlorenzo]]

Verified on:
Gaia-Rev        1fff49c664f905f11a86426a9835e6df6b58e825
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/1162e4a4d7a2
Build-ID        20141128040202
Version         36.0a1
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  39
FW-Date         Thu Oct 16 18:19:14 CST 2014
Bootloader      L1TC00011880