995128 - Suggestion list should use the building block action menu

Status: VERIFIED FIXED

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

Description

[Anthony Ricaud (:rik)]

From bug 994558.

Carrie: Could you show us how this screen would look like with action menus?

Comment 1

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

Hi, I think you can directly adopt the action menu systematically? It should be visual refreshed, scrollable and adaptive for the item numbers. Correct me if I'm wrong on this. :( 
Thanks!

Comment 2

[Anthony Ricaud (:rik)]

Attachment: suggestion-list.png

The patch is not yet ready for review (gotta check the tests and write new ones) but let's do the ui-review already.

Comment 3

[Victoria Gerchinhoren [:vicky]]

Anthony, Carrie, it looks pretty weird to me that we use an action menu to select an item like this, action menus should have a list of "actions" as its name indicates, while value selector looks to me as the apropiate component to use here. 

NI to Carrie and Omega to see what's their stand on this.

Comment 4

[Omega Feng [:Omega] [:馮於懋]]

Since I'm not the owner of Dialer, so I try to propose a crazy idea. :P
When there are more than 1 candidate, user can tap the triangle or scroll the suggestion list to hide the dial pad and show more candidates. User can scroll the suggestion list to browse and call them. User can tap something like "show dial pad" to show dial pad.

Comment 5

[Anthony Ricaud (:rik)]

See attachment 8395598 [details], we're currently using a "value selector" building block. (It's cropped to the center of the screen so it looks a bit weird).
I think it's also worth mentioning that each item has an action associated with it: calling that contact.

So we can go back to value selector and just uncrop it. But to me, action menu is the proper building block to use here.

Comment 6

[Anthony Ricaud (:rik)]

Attachment: https://github.com/mozilla-b2g/gaia/pull/18730

This is probably better viewed with w=1.

Only asking f+ because we're waiting for colors and comment 3.

Comment 7

[Etienne Segonzac (:etienne)]

Comment on attachment 8413589 [details] [review]
https://github.com/mozilla-b2g/gaia/pull/18730

Pretty cool.
Some comments on github.

I'm ready to get behind the js-* selectors but I'd like a bug filed to make sure the css linter checks this.

And also I'd like for this newly gained structure to be reflected in the |images| directory.

Comment 8

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

OK. I've discussed this with Harly and from the rule of building block, the menu should be action menu (it will be dialed directly, it's an action). So the problem would be the matched results button here. It shouldn't be the triangle for value selector, it should look like a button to trigger users to tap. Hence, if we want to make the whole design correct, we might need a new icon design to represent the number of the matched results. 
ni? Harly for tracking this building block issue.
and ni? Vicky to see if we can have some icon design here?

Comment 9

[Victoria Gerchinhoren [:vicky]]

Carrie, the triangle indicates a list of results as we use it all across the system, I don't see that being wrong. 
But if you think a new way of indicating results should be done, please suggest a solution and i will provide a visual for that.

Moreover if this particular bug is ok for you, I respect that.

Thanks.

Comment 10

[Victoria Gerchinhoren [:vicky]]

Comment on attachment 8412149 [details]
suggestion-list.png

The highlight should be inverted, the matching numbers should be white, and the rest colored in #9ef2e7

Comment 11

[Harly Hsu[:harly]]

Hi Victoria,
There is a difference between the button triggering action menu & value selector. 
Action menu is opened from a action button within App content, and value selector is opened by a list button with a triangle at the lower right corner. Therefore, if we are using a action menu, we should not use the button with triangle, it will confuse the user that this is a value selector.


(In reply to Victoria Gerchinhoren [:vicky] from comment #9)
> Carrie, the triangle indicates a list of results as we use it all across the
> system, I don't see that being wrong. 
> But if you think a new way of indicating results should be done, please
> suggest a solution and i will provide a visual for that.
> 
> Moreover if this particular bug is ok for you, I respect that.
> 
> Thanks.

Comment 12

[Victoria Gerchinhoren [:vicky]]

Sure, but do you have a proposal of the kind of element that should go there?

THanks.

Comment 13

[Victoria Gerchinhoren [:vicky]]

Carrie, can you provide a spec on the best element to represent this interaction? Based on the IA patterns, it should be consistent to the rest of scenarios and fit this kind of layout.

THanks!

Comment 14

[Anthony Ricaud (:rik)]

Attachment: suggestion-list.png

(In reply to Victoria Gerchinhoren [:vicky] from comment #10)
> The highlight should be inverted, the matching numbers should be white, and
> the rest colored in #9ef2e7
Vicky: You mean like this?

Comment 15

[Anthony Ricaud (:rik)]

Harly: Could you help with comment 12 and 13?

Comment 16

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

Attachment: [Dialer] Suggestion list in Dialer.pdf

Hey guys, 

I've uploaded the spec here, but we still need visual input for icon design. Also, I might need Harly to confirm if it's ok to have two lines in each item of the Action menu. Thanks!

Comment 17

[Harly Hsu[:harly]]

Thank you Carrie for providing the spec. As for the two lines in each item of Action menu. Currently, we do not have this pattern in Building Blocks, but I think it's reasonable to add a new two lines pattern for dialer or any other applications that might need to use it.

Comment 18

[Victoria Gerchinhoren [:vicky]]

(In reply to Carrie Wang [PTO from 5/14 -23 ] [:carrie] from comment #16)
> Created attachment 8422124 [details]
> [Dialer] Suggestion list in Dialer.pdf
> 
> Hey guys, 
> 
> I've uploaded the spec here, but we still need visual input for icon design.
> Also, I might need Harly to confirm if it's ok to have two lines in each
> item of the Action menu. Thanks!

Carrie, thanks for the spec. I'll work on a visual solution for this. Just notice that the ellipsis is not a good option as it is used to represent long press in direct buttons on DSDS, so we do not want to mix patterns here. I think the + as you mentioned at one point can be a better option. 

Will provide specs soon.

Comment 19

[Victoria Gerchinhoren [:vicky]]

(In reply to Anthony Ricaud (:rik) from comment #14)
> Created attachment 8422038 [details]
> suggestion-list.png
> 
> (In reply to Victoria Gerchinhoren [:vicky] from comment #10)
> > The highlight should be inverted, the matching numbers should be white, and
> > the rest colored in #9ef2e7
> Vicky: You mean like this?

Sorry, I think I haven't been completely clear, i was just talking about the second line, I think the name of the contact (first line) and the matching portion of the number should be white.

Thanks!

Comment 20

[Victoria Gerchinhoren [:vicky]]

Since we changed the way we highlight on the dialer main screeb, this looks really awkuard. Let me check how the sequence would look like and will get back to you with a better solution color wise. Putting NI to myself to provide a mockup.

Comment 21

[Anthony Ricaud (:rik)]

(In reply to Victoria Gerchinhoren [:vicky] from comment #18)
> Carrie, thanks for the spec. I'll work on a visual solution for this. Just
> notice that the ellipsis is not a good option as it is used to represent
> long press in direct buttons on DSDS, so we do not want to mix patterns
> here. I think the + as you mentioned at one point can be a better option. 
> 
> Will provide specs soon.
Please note that if you have more than 10 contacts matching, we currently display "10+" and the triangle.

Comment 22

[Anthony Ricaud (:rik)]

(In reply to Etienne Segonzac (:etienne) from comment #7)
> I'm ready to get behind the js-* selectors but I'd like a bug filed to make
> sure the css linter checks this.
Opened bug 1010249.

Comment 23

[Victoria Gerchinhoren [:vicky]]

(In reply to Anthony Ricaud (:rik) from comment #21)
> (In reply to Victoria Gerchinhoren [:vicky] from comment #18)
> > Carrie, thanks for the spec. I'll work on a visual solution for this. Just
> > notice that the ellipsis is not a good option as it is used to represent
> > long press in direct buttons on DSDS, so we do not want to mix patterns
> > here. I think the + as you mentioned at one point can be a better option. 
> > 
> > Will provide specs soon.
> Please note that if you have more than 10 contacts matching, we currently
> display "10+" and the triangle.

Thanks for the observation. 
I think a different bug for this issue should be opened.

Comment 24

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual Spec. Dialer Matching Contact selector

Comment 25

[Victoria Gerchinhoren [:vicky]]

PLease find attached full spec to implement the custom action menu for matching contacts.

Note that contacts name and phone information has different font weight and that the selection is highlighted with the same resource used in the dialer screen.

Thanks.

Comment 26

[Anthony Ricaud (:rik)]

(In reply to Victoria Gerchinhoren [:vicky] from comment #23)
> Thanks for the observation. 
> I think a different bug for this issue should be opened.
Yes, let's land something here and fix the indicator issue in another bug.

Comment 27

[Anthony Ricaud (:rik)]

Attachment: suggestion-bar.png

Comment 28

[Anthony Ricaud (:rik)]

Attachment: suggestion-list.png

Comment 29

[Victoria Gerchinhoren [:vicky]]

Comment on attachment 8423190 [details]
suggestion-list.png

Nice!

Comment 30

[Anthony Ricaud (:rik)]

Comment on attachment 8413589 [details] [review]
https://github.com/mozilla-b2g/gaia/pull/18730

Here is the patch rebased and with comments addressed.

We should add hidpi versions for the triangle image but since we plan on using another image, I preferred to not ask for those versions and wait for the follow up bug.

Comment 32

[Etienne Segonzac (:etienne)]

Comment on attachment 8413589 [details] [review]
https://github.com/mozilla-b2g/gaia/pull/18730

A few comments on github.

Also, this is too good of an occasion not to add a simple translate transition when we display the overlay :)

Comment 33

[Victoria Gerchinhoren [:vicky]]

(In reply to Etienne Segonzac (:etienne) from comment #32)
> Comment on attachment 8413589 [details] [review]
> https://github.com/mozilla-b2g/gaia/pull/18730
> 
> A few comments on github.
> 
> Also, this is too good of an occasion not to add a simple translate
> transition when we display the overlay :)

Agree completely.

Check transitions for overlays in buildingfirefoxos.com

Comment 34

[Victoria Gerchinhoren [:vicky]]

Attachment: Visual SPEC Dialer Suggestions

Comment 35

[Victoria Gerchinhoren [:vicky]]

Attachment: Assets: More suggestions icon

Comment 36

[Victoria Gerchinhoren [:vicky]]

Find attached the solution (specs and assets) for the suggestions list indicator in dialer.

Comment 37

[Anthony Ricaud (:rik)]

I've opened bug 1013330 to track the transition and the design update of the suggestion bar. This bug was originally only about the suggestion list.

Comment 38

[Anthony Ricaud (:rik)]

Comment on attachment 8413589 [details] [review]
https://github.com/mozilla-b2g/gaia/pull/18730

All github comments adressed. Adding the transition is in bug 1013330.

Comment 40

[Etienne Segonzac (:etienne)]

Comment on attachment 8413589 [details] [review]
https://github.com/mozilla-b2g/gaia/pull/18730

ready to squash and land!

Comment 41

[Anthony Ricaud (:rik)]

\o/ https://github.com/mozilla-b2g/gaia/commit/40abb245b1e61df67757ba3747e2f73202e5182b

Comment 42

[Loli (:lolimartinezcr)]

Tested and fine
Hamachi
2.0
Gecko-564e4e1
Gaia-a436da1

Comment 43

[Anthony Ricaud (:rik)]

When squashing/rebasing, I've broken bug 992915. I'll fix it later today.

Comment 44

[Anthony Ricaud (:rik)]

I've restored the full-height class. https://github.com/mozilla-b2g/gaia/commit/453e0aac18b4d528ac1e485f174348eea2cefeae

There was a conflict in my squashing because I moved all the suggestion based CSS in a different file. I was not cautious enough when resolving that conflict, sorry :(