916010 - [Contacts] Follow up for visual polish of bug 902399

Status: RESOLVED FIXED

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

Description

[Salvador de la Puente González [:salva]]

Attachment: Current matching details implementation

Current visual implementation of matching details require some polish:

Current matching details implementation

Differences between current implementation and visuals provided are:

1- Currently, photo is very small and aligned to the right edge. It should have a margin and be bigger.

2- Currently, name is appearing two times: in the title and in the details. According to the visual, let's remove the one in the details.

3- Font-size is very small.

Furthermore, I think we need some visual element to point the user he can tap on the right to see the matching details.

Comment 1

[ayman maat :maat]

(In reply to Salvador de la Puente González [:salva] from comment #0)
> Created attachment 804295 [details]

> 2- Currently, name is appearing two times: in the title and in the details.
> According to the visual, let's remove the one in the details.

Yes the one in the details should be removed - however the content of the 'company' field should go here

> Furthermore, I think we need some visual element to point the user he can
> tap on the right to see the matching details.

This is not considered necessary at this moment in time.. however if Victoria wishes to provide a solution i have no problem with that.

Comment 2

[Jose Manuel Cantera]

(In reply to ayman maat :maat from comment #1)
> (In reply to Salvador de la Puente González [:salva] from comment #0)
> > Created attachment 804295 [details]
> 
> > 2- Currently, name is appearing two times: in the title and in the details.
> > According to the visual, let's remove the one in the details.
> 
> Yes the one in the details should be removed - however the content of the
> 'company' field should go here

I totally disagree. The name in the details should be there, because we may need to mark up that it is matching. 

> 
> > Furthermore, I think we need some visual element to point the user he can
> > tap on the right to see the matching details.
> 
> This is not considered necessary at this moment in time.. however if
> Victoria wishes to provide a solution i have no problem with that.

Comment 3

[Ismael Gonzalez [:basiclines]]

(In reply to Salvador de la Puente González [:salva] from comment #0)
> Created attachment 804295 [details]
> Current matching details implementation
> 
> Current visual implementation of matching details require some polish:
> 
> Current matching details implementation
> 
> Differences between current implementation and visuals provided are:
> 
> 1- Currently, photo is very small and aligned to the right edge. It should
> have a margin and be bigger.
> 
 That is because the visual design provided asumes that the modal window is full screen, which is not possible, so the image is 20px smaller (height/width) because of the statusbar size.
If we want to fit the image on the modal header, we will need to do at that size, if not we should put the image in another place.

> 2- Currently, name is appearing two times: in the title and in the details.
> According to the visual, let's remove the one in the details.
I don't have any opinion here, but seems what JMC says is reasonable enough 

> 3- Font-size is very small.
We will need the exact size of the text (in px plx), as we only got a plain .png w/o font dimensions.  

> Furthermore, I think we need some visual element to point the user he can
> tap on the right to see the matching details.

Comment 4

[Silviaf]

Hello, answering to the font size; 1.7 REM. Thanks!

Comment 5

[Silviaf]

Attachment: Font sizes

Comment 6

[Victoria Gerchinhoren [:vicky]]

Clearing info as Silvia just answered with the visual specification

Comment 7

[Victoria Gerchinhoren [:vicky]]

Attachment: Contact details overlay with the status bar shown.

Comment 8

[Sergi]

Attachment: Confirm with content :: BB

I'm wondering if it would be possible to use a component from the ones we have already done. I'm thinking on the "confirm with content" BB. My point is we don't have headers with pictures anywhere, and this would require creating a custom component for this case. 

The confirm component already has the option to add a picture, and it would require a minimum update to create this contact details overlay.

I've added a screenshot for your reference.

Comment 9

[Salvador de la Puente González [:salva]]

(In reply to Jose M. Cantera from comment #2)
> (In reply to ayman maat :maat from comment #1)
> > (In reply to Salvador de la Puente González [:salva] from comment #0)
> > > Created attachment 804295 [details]
> > 
> > > 2- Currently, name is appearing two times: in the title and in the details.
> > > According to the visual, let's remove the one in the details.
> > 
> > Yes the one in the details should be removed - however the content of the
> > 'company' field should go here
> 
> I totally disagree. The name in the details should be there, because we may
> need to mark up that it is matching. 

A suggestions: why not remove and highlight the name in the header?

Comment 10

[Sergi]

Attachment: Contact Details Screen Overlay

Find attached a sample of the Contact Details screen overlay using the "Confirm" BB.

Comment 11

[Jose Manuel Cantera]

reassigning to German. German will be helped by Arnau

Comment 12

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

Attachment: 12447.html

Comment 13

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

Attachment: Implemented_overlay-changes_to_confirm_BB_pending_1

Comment 14

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

Attachment: Implemented_overlay-changes_to_confirm_BB_pending_2

Comment 15

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

As shown in attachment 809942 [details] and attachment 809944 [details], there is still an update pending to get the final look & feel. This update consists on vertically aligning the name of the contact with the space reserved to the image. This update will be included in the confirm with content BB so it can be reused by any app. bug 920587 has been created to implement this update in the BB.

Comment 16

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

Attachment: Pull request: 12506

Comment 17

[Jose Manuel Cantera]

Comment on attachment 811157 [details]
Pull request: 12506

at last!

Comment 18

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

Merged in master: https://github.com/mozilla-b2g/gaia/commit/137849319cb9e71a289328900fa3fc9d5e093a5f

Comment 19

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

triage: not blocking release, please ask for approval for landing into v1.2

Comment 20

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

Comment on attachment 811157 [details]
Pull request: 12506

NOTE: Please see https://wiki.mozilla.org/Release_Management/B2G_Landing to better understand the B2G approval process and landings.

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Visual redesign of the duplicate contacts details screen
[User impact] if declined: Bad user experience
[Testing completed]: Tested in device
[Risk to taking this patch] (and alternatives if risky): Low
[String changes made]: None

Comment 21

[Noemí Freire (:noemi)]

Assigning to Francisco for the approval review

Comment 22

[bhavana bajaj [:bajaj]]

Comment on attachment 811157 [details]
Pull request: 12506

Approving given low risk and comment #19.Also has been on master for a while.

Please add qawanted and let QA know if there is any specific testing to be done once this lands on 1.2 branch.

Comment 23

[John Ford [:jhford] CET/CEST Berlin Time]

Uplifted 137849319cb9e71a289328900fa3fc9d5e093a5f to:
v1.2: b0e7c009f98cb774b972dd6a29dd6d0c8da01d23

Comment 24

[John Ford [:jhford] CET/CEST Berlin Time]

Uplifted 137849319cb9e71a289328900fa3fc9d5e093a5f to:
v1.3 already had this commit