845097 - Contact List and Search bar update

Status: RESOLVED DUPLICATE of bug 862321

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

Description

[Eric Pang [:epang] UX]

Attachment: Contact List and Search bar mock up

Changes:
1. Font and Layout changes
2. Search bar font size increased (17px)

Comment 1

[Eric Pang [:epang] UX]

Part of LG's request for font updates.

Comment 2

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 3

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

Comment 4

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia repo

Comment 5

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

Comment 6

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #5)
> Created attachment 732747 [details]
> After patch

Pavel, a couple of notes:
1. The search font looks a little small is it 17px?
2. On the right of the screen the 'A' has a line going through it.  Can you adjust so the 'A' is under the div line as shown in the mock up?  Maybe slightly (a tiny bit) increase the size of the magnifying glass and star to push the alphabetical list down just enough.  

Let me know if you have any questions, thanks!

Comment 7

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

1. About this one the screenshot was not the correct one 
2. I send email to Eric and ask him to resize the icons

After that I will update the patch and "after mockup"

Comment 8

[Sam Joch [:samjoch]]

Comment on attachment 732746 [details]
patch for Gaia repo

Please finish the patch and request a review again when it's finished. thanks.

Comment 9

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

Hey Eric,
the icons are 1-2px smaller but I made some tuning to the letters line-height and I think everything looks nice now :) if you are ok :) I will ask Sam for r+

Comment 10

[Eric Pang [:epang] UX]

Comment on attachment 734240 [details]
After patch

Nice work Pavel, this looks great now :).  Ready for Sam's review!

Comment 11

[Sam Joch [:samjoch]]

Attachment: Screenshot Review

The search field is not left align with the list items. 
Also you keep the background shadow image in the field, is that ok ? 
Then when i tap on the search field it seems that the active background color doesn't take the full width. Why don't you just disable it ? (can't get a screenshot of that)

Comment 12

[Eric Pang [:epang] UX]

(In reply to Sam Joch [:samjoch] from comment #11)
> Created attachment 734606 [details]
> Screenshot Review
> 
> The search field is not left align with the list items. 
> Also you keep the background shadow image in the field, is that ok ? 
> Then when i tap on the search field it seems that the active background
> color doesn't take the full width. Why don't you just disable it ? (can't
> get a screenshot of that)

Thanks for catching this Sam.  Paevl, regarding layout.  The div lines should have a 15 pixel margin on the left.  The text should be left aligned with the header (which i think they are already).  The right side of the div line and contact images should have a 25px margin. Can you also take a look at the shadow in the search files and other issues Sam mentioned?  Thanks!

Comment 13

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

Comment 14

[steve]

looks good

Comment 15

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #13)
> Created attachment 736398 [details]
> After patch

Hi Pavel, I have a feeling that this is the wrong screenshot.  The left and right margins are still off.  Let me know, thanks!

Comment 17

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch

you're right ... wrong screenshot ... now I think is the correct one :)

Comment 18

[Eric Pang [:epang] UX]

Comment on attachment 738042 [details]
After patch

Thanks Pavel, this looks good now! Ready for review :)

Comment 19

[Sam Joch [:samjoch]]

Comment on attachment 732746 [details]
patch for Gaia repo

Landed in master: https://github.com/mozilla-b2g/gaia/commit/010a8a6124e66249aa5ac1932d01f8b384bec44a

Comment 20

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: Followup Patch

Comment 21

[Sam Joch [:samjoch]]

Comment on attachment 739012 [details]
Followup Patch

Follow up landed in master: https://github.com/mozilla-b2g/gaia/commit/0511b82061624144007eb6f16454cd7cf81b8d3f

Comment 22

[alberto.pastor]

After this bug was merged (https://github.com/mozilla-b2g/gaia/commit/010a8a6124e66249aa5ac1932d01f8b384bec44a), the add Contacts Form has horizontal scrolling. Could you please follow up with a fix?
THanks!

Comment 23

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

this is fixed here: https://github.com/pivanov/gaia/commit/8dee603b8f392f7130d5c05840f88383cf0d68bc#L1L558
and will be soon on master :) thanks Alberto :)

Comment 24

[Germán Toro del Valle (:gtorodelvalle)]

Hi guys! I just found the reason of the Call Log not rendering correctly. It is due to the inclusion of https://github.com/mozilla-b2g/gaia/blob/817939fc85f8f81c287ee958db497a964817cae0/shared/style_unstable/lists.css#L43 I have just created a follow up to solve it in the Call Log: bug 866660

Comment 25

[Eric Pang [:epang] UX]

(In reply to gtorodelvalle from comment #24)
> Hi guys! I just found the reason of the Call Log not rendering correctly. It
> is due to the inclusion of
> https://github.com/mozilla-b2g/gaia/blob/
> 817939fc85f8f81c287ee958db497a964817cae0/shared/style_unstable/lists.css#L43
> I have just created a follow up to solve it in the Call Log: bug 866660

Great, thanks!

Pavel, has your fix landed on master?  And will it need to be reviewed?

Comment 26

[Sergi]

Eric, there're a couple of issues in the screenshot you uploaded. The avatar next to "Pablo Garcia" looks broken. It should arrive to the divider. The search box has been updated, so maybe it's better to update it also here (although the BB still needs to be updated to the last version). You can check the correct search box here:https://bug862321.bugzilla.mozilla.org/attachment.cgi?id=742260

Can you update the reference screenshot in this bug? if you prefer i can also update it.

Thanks!

Comment 27

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

(In reply to Eric Pang [:epang] from comment #25)
> Pavel, has your fix landed on master?  And will it need to be reviewed?
Yep it's landed ... I think we should open new bug for the search if we need to do some changes from Sergi's comment

Comment 28

[Sam Joch [:samjoch]]

Ok i revert the patch and the followup from master:
https://github.com/mozilla-b2g/gaia/commit/ff271e1fd97f2910672140d98d8ee32933fa2e48
https://github.com/mozilla-b2g/gaia/commit/7b6e268356afc8f83c364070b4a13d4f7225f27b

Comment 29

[alberto.pastor]

What's the status of this bug?

Comment 30

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

I'm not sure ... Eric do we need to do something here (after reverted changes)?

Comment 31

[Eric Pang [:epang] UX]

There's been an update to the visuals of the search bar and is being worked on in this bug 862321. Thanks!