836622 - Edit contact: label's visual cue mismatches transition

Status: RESOLVED INCOMPLETE

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

Description

[Peter La]

Attachment: Problem + Proposed Solutions

When editing a contact, the down arrow icon on the labels (eg. for phone number) has the following problems:

1) it's pointing down but the label selection screen transitions from the right
2) it's small hit target

See attached image for illustration of problem and proposed solutions (A & B).

Comment 1

[steve]

The Label page should be a value selector page.  This was done before the creation of the full page value selectors and has never been changed. When you change this you need to create the custom page within the value selector style. The icon you speak about should be the value selector icon ( which is very similiar to  your proposal B although yours looks bigger)

Comment 2

[Peter La]

Attachment: Final Proposed Design

With input from Sergi and Steve, this is the proposed final design.

Comment 3

[Peter La]

Sam, can you take this or delegate?  Thank you.

Comment 4

[Sam Joch [:samjoch]]

Peter, i've a question: Where will the custom field appear ? It w'll be removed ?

Comment 5

[Peter La]

Hi Sam,
If by custom field, you mean Row 1, Screen 4 of the attached proposal, then yes, it's being replaced by the value selector.

Also, a note about transitions for the value selector.

I specified no transition in the attached proposal, but in fact, there is a bug that calls for the correct transition to be implemented for value selectors here:
https://bugzilla.mozilla.org/show_bug.cgi?id=834712

So there should be a transition (starts at the bottom and comes up), but once it's implemented in the building blocks, this should inherit the behavior as well I would hope.

Comment 6

[Peter La]

Hi again Sam.  Ignore my comment above about removing the custom field.  I totally misread that, sorry.  I'm going to take this issue up with Sergi/Steve/TEF folks and update the proposal.  Stay tuned.

Comment 7

[Sergi]

Attachment: Final Proposed Design

IMHO Peter's proposal is perfect, i just updated a couple of minor things like adding the small gray arrow in the field used to open the value selector and updated the visuals with the latest visuals.

Comment 8

[Sergi]

Attachment: Custom Field Screenshot

Here're some visuals on how the custom field should work. As you will see there's a new list item labeled "Custom" with an ">" next to it. When the user taps it a new screen will be opened showing a text field with some instructions on what he should type in, together with the keyboard. 

When the user types the new text and taps "Done", the label will be saved and the user will go back to the main contact details screen. Taping "X" on the header will take him to the main label list without making any changes.

Comment 9

[Sergi]

Attachment: Custom Field :: Screenshot

Comment 10

[Peter La]

Thanks for figuring this out further Sergi.

Sam, can you follow the two attachments above and implement accordingly?  For the  Custom Field :: Screenshot attachment, please follow the "After" proposal, except I feel we should go with a light grey arrow next to the Custom text label.  Ping me offline to get the right colour.

Comment 11

[steve]

Attachment: Proposed Custom arrow color

I agree Peter, I think the arrow should be a lighter grey (blue would give it too much prominence). See attached quick mock up.  Both are good, I suggest #a0a0a0.

Comment 12

[Peter La]

Hi Sam,
Can you take this bug now that the solution has been clearly defined?
Thanks.

Comment 13

[Peter La]

marking as yedo

Comment 14

[Peter La]

Sam, please go with #a0a0a0 for the arrow colour for the 'Custom'.

Comment 16

[Eric Pang [:epang] UX]

Hi Peter, I've re assigned this bug to Gareth since I think Sam has a lot going on. Gareth, let us know if you have any questions, thanks!

Comment 17

[Gareth Aye [:gaye] (back from PTO)]

I'm having some low-level issues with getting the select tags right :/. I summarized the issue here: https://github.com/mozilla-b2g/gaia/pull/9128, so if anyone has a free minute, I'd really appreciate a hand. Possibly more an issue with building blocks than anything else...

Comment 18

[Eric Pang [:epang] UX]

(In reply to gaye from comment #17)
> I'm having some low-level issues with getting the select tags right :/. I
> summarized the issue here: https://github.com/mozilla-b2g/gaia/pull/9128, so
> if anyone has a free minute, I'd really appreciate a hand. Possibly more an
> issue with building blocks than anything else...

Pavel, can you give Gareth a hand when you have a minute? Thanks!

Comment 19

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

Sure ... I will work on this problem in this here: Bug 862246
I will update you soon :)

Comment 20

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #19)
> Sure ... I will work on this problem in this here: Bug 862246
> I will update you soon :)

Thanks Pavel!

Comment 21

[alberto.pastor]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #19)
> Sure ... I will work on this problem in this here: Bug 862246
> I will update you soon :)

Should we mark it as duplicated then?

Comment 22

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

(In reply to Alberto Pastor [:albertopq] from comment #21)
> (In reply to Pavel Ivanov [:ivanovpavel] from comment #19)
> > Sure ... I will work on this problem in this here: Bug 862246
> > I will update you soon :)
> 
> Should we mark it as duplicated then?

no I think this bug contains the problem with <select/> elements but is not for them

Comment 23

[Eric Pang [:epang] UX]

Peter, can you look over this bug?  The visual cue seems to be fixed now, but the use of the value selector and custom field doesn't seem to be implemented.  Was this bug intended to address both issues?  Can you clarify and reassign to Sam or Pavel if work is needed?  Thanks!

Comment 24

[Stephany Wilkes]

Peter, per Eric's comment 23, please let me know where we landed on this. Thanks!

Comment 25

[Peter La]

Attachment: Original Problem Illustrated

Hi Eric/Stephany,

Apologies for the delay!  Ideally, we want the value selector and custom field implemented as well.  This would be the correct solution.

The way it currently is, if we just change the visual indicator, it's technically incorrect.  Whether this is good enough or not is up to the partner who requested this fix.  Talk to me offline for details.

This attachment illustrates the original problem where the arrow points downward but the edit screen slides in from the right.  It's better now that the arrow points diagonally to the right, but it's still not the desired way to do this input.

Peter.

Comment 26

[Eric Pang [:epang] UX]

Hi Arnau,

I just spoke with Peter about this bug and found it still needs implementation.  I believe the changes will use the building blocks, is this something you can help us with?

There's a couple of changes that need to be made (Refer to the attached images).

1. 'Final Proposed Design' - when you press the drop down the value selector should be used.

2. 'Custom Field' - Screenshot' - The value selector has a 'Custom' option at the end of the list.  There should be a black arrow that brings you to the next seen to fill in your custom label.

Thanks!

Comment 27

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

I could do the BB changes, but someone from Contacts should take care of the implementation.

Comment 28

[Eric Pang [:epang] UX]

Wilfred, can you help point me in the right direction to get this implemented?  You can see what's being proposed in comment 26.  Thanks!

Comment 29

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

triage: minus for not blocking 1.2 but please ask for approval when it's ready for v1.2

Comment 30

[Eric Pang [:epang] UX]

Hi Pavel, can you help with implementing this? Below is what needs to be updated (it's in the comments above to Arnau).  If you can help implement, flag me for feedback and then review from a contact peer that would be great!

I just spoke with Peter about this bug and found it still needs implementation.  I believe the changes will use the building blocks, is this something you can help us with?

There's a couple of changes that need to be made (Refer to the attached images).

1. 'Final Proposed Design' - when you press the drop down the value selector should be used.

2. 'Custom Field' - Screenshot' - The value selector has a 'Custom' option at the end of the list.  There should be a black arrow that brings you to the next seen to fill in your custom label.

Comment 31

[Eric Pang [:epang] UX]

Contact edit will be getting a visual refresh in bug 951582 (making this invalid)

Comment 32

[Eric Pang [:epang] UX]

Changing to incomplete (since it was my misunderstanding that it was a duplicate - This bug was filled a long time ago and is outdated.  If still an issue we should open a new bug