Edit contact: label's visual cue mismatches transition

RESOLVED INCOMPLETE

Status

RESOLVED INCOMPLETE
6 years ago
5 years ago

People

(Reporter: pla, Assigned: pivanov)

Tracking

unspecified
All
Gonk (Firefox OS)

Firefox Tracking Flags

(blocking-b2g:-, b2g18+ affected)

Details

(Whiteboard: visual design, visual-tracking, jian)

Attachments

(4 attachments, 3 obsolete attachments)

(Reporter)

Description

6 years ago
Created attachment 708440 [details]
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).
(Reporter)

Updated

6 years ago
OS: Other → Gonk (Firefox OS)

Comment 1

6 years ago
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)

Updated

6 years ago
Component: Gaia → Gaia::Contacts
QA Contact: isabelrios
(Reporter)

Comment 2

6 years ago
Created attachment 709856 [details]
Final Proposed Design

With input from Sergi and Steve, this is the proposed final design.
Attachment #708440 - Attachment is obsolete: true
(Reporter)

Comment 3

6 years ago
Sam, can you take this or delegate?  Thank you.

Comment 4

6 years ago
Peter, i've a question: Where will the custom field appear ? It w'll be removed ?
(Reporter)

Comment 5

6 years ago
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.
(Reporter)

Comment 6

6 years ago
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

6 years ago
Created attachment 724961 [details]
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.
Attachment #709856 - Attachment is obsolete: true

Comment 8

6 years ago
Created attachment 724964 [details]
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

6 years ago
Created attachment 724970 [details]
Custom Field :: Screenshot
Attachment #724964 - Attachment is obsolete: true
(Reporter)

Comment 10

6 years ago
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

6 years ago
Created attachment 729047 [details]
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.
(Reporter)

Comment 12

6 years ago
Hi Sam,
Can you take this bug now that the solution has been clearly defined?
Thanks.
Flags: needinfo?(sjochimek)
(Reporter)

Comment 13

6 years ago
marking as yedo
Whiteboard: visual design → visual design yedo
(Reporter)

Updated

6 years ago
Assignee: pla → sjochimek
(Reporter)

Comment 14

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

Updated

6 years ago
Duplicate of this bug: 845091
(Reporter)

Updated

6 years ago
tracking-b2g18: --- → ?
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!
Assignee: sjochimek → gaye
Flags: needinfo?(sjochimek) → needinfo?(gaye)
status-b2g18: --- → affected
tracking-b2g18: ? → +
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...
Flags: needinfo?(gaye)
(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!
Flags: needinfo?(pivanov)
Sure ... I will work on this problem in this here: Bug 862246
I will update you soon :)
Flags: needinfo?(pivanov)
(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

6 years ago
(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?
Flags: needinfo?(pivanov)
(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
Flags: needinfo?(pivanov)

Updated

6 years ago
Status: NEW → ASSIGNED
Whiteboard: visual design yedo → c=contacts visual design yedo
Status: ASSIGNED → NEW
Assignee: gaye → nobody
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!
Flags: needinfo?(pla)

Updated

6 years ago
Whiteboard: c=contacts visual design yedo → visual design, hanzo, visual-tracking

Updated

6 years ago
Whiteboard: visual design, hanzo, visual-tracking → visual design, visual-tracking

Comment 24

6 years ago
Peter, per Eric's comment 23, please let me know where we landed on this. Thanks!
(Reporter)

Comment 25

6 years ago
Created attachment 757742 [details]
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.
Flags: needinfo?(pla)
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!
Assignee: nobody → arnau
Flags: needinfo?(arnau)
I could do the BB changes, but someone from Contacts should take care of the implementation.
Flags: needinfo?(arnau)
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!
Flags: needinfo?(wmathanaraj)
blocking-b2g: --- → koi?
Flags: needinfo?(wmathanaraj)
triage: minus for not blocking 1.2 but please ask for approval when it's ready for v1.2
blocking-b2g: koi? → -
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.
Assignee: arnau → pivanov
Flags: needinfo?(pivanov)

Updated

5 years ago
Whiteboard: visual design, visual-tracking → visual design, visual-tracking, jian
Contact edit will be getting a visual refresh in bug 951582 (making this invalid)
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Flags: needinfo?(pivanov)
Resolution: --- → DUPLICATE
Duplicate of bug: 951582
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
Resolution: DUPLICATE → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.