Closed
Bug 995128
Opened 10 years ago
Closed 10 years ago
Suggestion list should use the building block action menu
Categories
(Firefox OS Graveyard :: Gaia::Dialer, defect)
Firefox OS Graveyard
Gaia::Dialer
Tracking
(feature-b2g:2.0, tracking-b2g:backlog, b2g-v2.0 fixed)
VERIFIED
FIXED
2.0 S2 (23may)
Tracking | Status | |
---|---|---|
b2g-v2.0 | --- | fixed |
People
(Reporter: rik, Assigned: rik)
References
Details
Attachments
(7 files, 2 obsolete files)
46 bytes,
text/x-github-pull-request
|
etienne
:
review+
etienne
:
feedback+
|
Details | Review |
989.92 KB,
application/pdf
|
Details | |
102.84 KB,
image/png
|
Details | |
27.82 KB,
image/png
|
vicky
:
ui-review+
|
Details |
90.53 KB,
image/png
|
vicky
:
ui-review+
|
Details |
124.11 KB,
image/png
|
Details | |
3.43 KB,
application/zip
|
Details |
From bug 994558. Carrie: Could you show us how this screen would look like with action menus?
Flags: needinfo?(cawang)
Comment 1•10 years ago
|
||
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!
Flags: needinfo?(cawang)
Assignee | ||
Updated•10 years ago
|
Blocks: dialer-visual-refres
Assignee | ||
Comment 2•10 years ago
|
||
The patch is not yet ready for review (gotta check the tests and write new ones) but let's do the ui-review already.
Attachment #8412149 -
Flags: ui-review?(vpg)
Comment 3•10 years ago
|
||
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.
Flags: needinfo?(cawang)
Updated•10 years ago
|
Flags: needinfo?(ofeng)
Comment 4•10 years ago
|
||
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.
Flags: needinfo?(ofeng)
Assignee | ||
Comment 5•10 years ago
|
||
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.
Assignee | ||
Comment 6•10 years ago
|
||
This is probably better viewed with w=1. Only asking f+ because we're waiting for colors and comment 3.
Attachment #8413589 -
Flags: feedback?(etienne)
Comment 7•10 years ago
|
||
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.
Attachment #8413589 -
Flags: feedback?(etienne) → feedback+
Assignee | ||
Updated•10 years ago
|
Assignee: nobody → anthony
Comment 8•10 years ago
|
||
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?
Flags: needinfo?(vpg)
Flags: needinfo?(hhsu)
Flags: needinfo?(cawang)
Comment 9•10 years ago
|
||
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.
Flags: needinfo?(vpg)
Comment 10•10 years ago
|
||
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
Attachment #8412149 -
Flags: ui-review?(vpg) → ui-review-
Updated•10 years ago
|
blocking-b2g: --- → backlog
Comment 11•10 years ago
|
||
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.
Flags: needinfo?(hhsu)
Comment 12•10 years ago
|
||
Sure, but do you have a proposal of the kind of element that should go there? THanks.
Comment 13•10 years ago
|
||
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!
Flags: needinfo?(cawang)
Assignee | ||
Updated•10 years ago
|
Target Milestone: --- → 2.0 S2 (23may)
Assignee | ||
Comment 14•10 years ago
|
||
(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?
Attachment #8412149 -
Attachment is obsolete: true
Flags: needinfo?(vpg)
Assignee | ||
Comment 15•10 years ago
|
||
Harly: Could you help with comment 12 and 13?
Flags: needinfo?(hhsu)
Comment 16•10 years ago
|
||
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!
Flags: needinfo?(cawang)
Comment 17•10 years ago
|
||
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.
Flags: needinfo?(hhsu)
Comment 18•10 years ago
|
||
(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•10 years ago
|
||
(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!
Flags: needinfo?(vpg)
Comment 20•10 years ago
|
||
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.
Flags: needinfo?(vpg)
Assignee | ||
Comment 21•10 years ago
|
||
(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.
Assignee | ||
Comment 22•10 years ago
|
||
(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•10 years ago
|
||
(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.
Flags: needinfo?(vpg)
Comment 24•10 years ago
|
||
Comment 25•10 years ago
|
||
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.
Flags: needinfo?(anthony)
Assignee | ||
Comment 26•10 years ago
|
||
(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.
Assignee | ||
Comment 27•10 years ago
|
||
Attachment #8423189 -
Flags: ui-review?(vpg)
Flags: needinfo?(anthony)
Assignee | ||
Comment 28•10 years ago
|
||
Attachment #8422038 -
Attachment is obsolete: true
Attachment #8423190 -
Flags: ui-review?(vpg)
Comment 29•10 years ago
|
||
Comment on attachment 8423190 [details]
suggestion-list.png
Nice!
Attachment #8423190 -
Flags: ui-review?(vpg) → ui-review+
Updated•10 years ago
|
Attachment #8423189 -
Flags: ui-review?(vpg) → ui-review+
Assignee | ||
Comment 30•10 years ago
|
||
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.
Attachment #8413589 -
Flags: review?(etienne)
Updated•10 years ago
|
feature-b2g: --- → 2.0
Comment 32•10 years ago
|
||
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 :)
Attachment #8413589 -
Flags: review?(etienne)
Comment 33•10 years ago
|
||
(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•10 years ago
|
||
Comment 35•10 years ago
|
||
Comment 36•10 years ago
|
||
Find attached the solution (specs and assets) for the suggestions list indicator in dialer.
Assignee | ||
Comment 37•10 years ago
|
||
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.
Assignee | ||
Comment 38•10 years ago
|
||
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.
Attachment #8413589 -
Flags: review?(etienne)
Comment 40•10 years ago
|
||
Comment on attachment 8413589 [details] [review] https://github.com/mozilla-b2g/gaia/pull/18730 ready to squash and land!
Attachment #8413589 -
Flags: review?(etienne) → review+
Assignee | ||
Comment 41•10 years ago
|
||
\o/ https://github.com/mozilla-b2g/gaia/commit/40abb245b1e61df67757ba3747e2f73202e5182b
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Updated•10 years ago
|
status-b2g-v2.0:
--- → fixed
Comment 42•10 years ago
|
||
Tested and fine Hamachi 2.0 Gecko-564e4e1 Gaia-a436da1
Status: RESOLVED → VERIFIED
Assignee | ||
Comment 43•10 years ago
|
||
When squashing/rebasing, I've broken bug 992915. I'll fix it later today.
Assignee | ||
Comment 44•10 years ago
|
||
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 :(
Updated•9 years ago
|
blocking-b2g: backlog → ---
tracking-b2g:
--- → backlog
You need to log in
before you can comment on or make changes to this bug.
Description
•