984315 - Follow-up Bug 947189. Polish contact button content according to the length of operator, tel number and SIM indicator

Status: RESOLVED FIXED

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

Description

[Jose Manuel Cantera]

See attached screen with the issue described. Some UX input needed

Comment 1

[Jose Manuel Cantera]

Attachment: 20140317_112808.jpg

issue captured

Comment 2

[Jose Manuel Cantera]

 The issue is that if the operator name is too long or tel number itself the operator name /tel number and the SIM descriptor can overlap. This is a visual issue

Comment 3

[Carrie Wang [New account: [e-mail]]]

ni? Jose on visual issue. Thanks!

Comment 4

[José Vittone]

Hi guys, please check out the DSDS visual specs for contacts, the carrier should be moved next to the phone type. 

Check it out:
https://bug947186.bugzilla.mozilla.org/attachment.cgi?id=8374186

Best,
Jose

Comment 5

[Joe Cheng [:jcheng] (please needinfo)]

triage: 1.4+, the strings can be easily overlaping in DSDS devices

Comment 6

[Anthony Ricaud (:rik)]

To fix this, you can do something like this:

<button>
  <div style="display: flex">
    <div style="flex: 1">
      <span>012345</span>
      <span>, Jamon networks</span>
    </div>
    <div class="sim-indication">SIM 1</div>
  </div>
</button>

The extra wrapping div is because Gecko doesn't seem to support flex on buttons (I opened bug 984869).
An alternative is to use a <div style="display: flex" role="button" tabindex="0">.

Comment 7

[David Scravaglieri [:scravag]]

Michal, could you take a look at this please ?

Comment 8

[Michał Budzyński (:michalbe)]

Ok, I'm on it.

Comment 9

[Michał Budzyński (:michalbe)]

Attachment: Patch

Comment 10

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

Comment on attachment 8393567 [details] [review]
Patch

Removing the review flag until we have unit tests here, please ask for r? again when ready to go :)

Thanks a lot!

Comment 11

[Michał Budzyński (:michalbe)]

Tests updated, patch ready to r.

Comment 12

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

Comment on attachment 8393567 [details] [review]
Patch

Almost there Michal!

Left some comments in github:

- Use mozL10n for appending the carrier value (specially the separator).
- Unit test can be improved a bit, checking for the carrier value.
- CSS rules, looking a bit weird to me, we are moving the phone number away from the phone icon.

Thanks a lot!

Comment 13

[Michał Budzyński (:michalbe)]

Attachment: Final Patch

Comment 14

[Michał Budzyński (:michalbe)]

Fixed, ready for r again!

Comment 15

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

Comment on attachment 8394224 [details] [review]
Final Patch

Nice, please merge once travis is green.

Comment 16

[Michał Budzyński (:michalbe)]

Merged, thanks!
https://github.com/mozilla-b2g/gaia/commit/9b73110dbbfd4d9b95e4054fb93f7b843c3e7f42

Comment 17

[Ryan VanderMeulen [:RyanVM]]

v1.4: b09bf796d82ca7aa00d141a0cb705ee9cabfab47

Comment 18

[Francesco Lodolo [:flod]]

One silly question: is there a missing space somewhere between number and carrier? Space is not in the string or the code either.

Comment 19

[Michał Budzyński (:michalbe)]

Francesco,

Carrier name is now above the number, next to th phone type, so there is no space between them.

Comment 20

[Francesco Lodolo [:flod]]

Thanks for the explanation.