1073547 - (App-Grouping) Conform to app-grouping specification 0.2

Status: RESOLVED FIXED

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

Description

[Hung Nguyen]

Please update visuals of the app grouping experience to version 0.2 of the specification. 

Document location:
https://mozilla.box.com/s/q61isypbff0gtes7qc1c 

Changes:
1. Header size adjustment.
2. Group gap adjustment.
3. Addition of visual hint for group creation.
4. Addition of disabled state for collapse/expand button when a group is being moved.
5. Hint text for adding a group label.
6. Addition of a single group creation scenario
7. Moving to left alignment for the icons (collapsed state).

Comment 1

[Chris Lord [:cwiiis]]

I can't access the document location :(

Comment 2

[Hung Nguyen]

Attachment: VsD_Homescreen_Grouping.pdf

Attached to the bug! 

Sorry about that.

Comment 3

[Chris Lord [:cwiiis]]

This is turning out to be a bit difficult because the sizes for the group header don't reflect their actual size. The font-size, for example, says 24px, but this is much larger than the font size shown in the image, and indeed larger than the values stated for its draw-box, so this doesn't work out correctly.

I'll try to get things matching the screenshots and we can examine it in review and amend the document.

Comment 4

[Chris Lord [:cwiiis]]

Drawing the background for the toggle arrow is also turning out to be a bit tricky without using nested elements because it's no longer square - if the collapse-arrow asset could be altered to include the background, this would make things easier.

The full set of collapse arrow and gripper images are also missing - I have an @1.5x and a much larger version (I don't know what size this is meant to correspond to), from which I derived the 1.0x asset, but it would help if we had the full sets of assets too.

n?hnguyen for assets.

Comment 5

[Chris Lord [:cwiiis]]

WIP available at https://github.com/Cwiiis/gaia/tree/bug1073547-app-grouping-spec-0.2

Comment 6

[Chris Lord [:cwiiis]]

Decided to split this out into separate bugs to get things to land quicker - the WIP in comment #5 is out of date, see bug 1074798 instead.

Comment 7

[Hung Nguyen]

Attachment: GroupingAssets.zip

Adding updated assets for groups.

Comment 8

[Hung Nguyen]

Attachment: VsD_Homescreen_Grouping.pdf

Updating specification based on discussions with Chris. 

Chris - check out the spec and let me know if you have any questions. 

Thanks
Hung

Comment 9

[Chris Lord [:cwiiis]]

(In reply to Hung Nguyen from comment #8)
> Created attachment 8497619 [details]
> VsD_Homescreen_Grouping.pdf
> 
> Updating specification based on discussions with Chris. 
> 
> Chris - check out the spec and let me know if you have any questions. 
> 
> Thanks
> Hung

Assets are perfect, I've incorporated them in bug 1074993 :)

Comment 10

[Maria Sandberg [:mushi]]

Hey Chris,

We've gotten some comments from people about having a hint text indicating you can enter a group name. (#5 in Hung's list). Should I file this as a separate bug for Cristian or just leave it as part of this visual bug? Let me know what makes most sense for you :)

Comment 11

[Chris Lord [:cwiiis]]

(In reply to Maria Sandberg [:mushi] from comment #10)
> Hey Chris,
> 
> We've gotten some comments from people about having a hint text indicating
> you can enter a group name. (#5 in Hung's list). Should I file this as a
> separate bug for Cristian or just leave it as part of this visual bug? Let
> me know what makes most sense for you :)

I'll file and fix this on Monday if that's ok :) I'll make sure to add it as a dependency on this bug.

Comment 12

[Maria Sandberg [:mushi]]

Sounds great, thanks!

Comment 13

[Hung Nguyen]

Attachment: VsD_Homescreen_Grouping.pdf

Updating the document to V0.4 

The updates in the document reflect the feedback from the UX team. Listed below is what's new. 

1. Added alternating group underlays.
2. Updated group headers.
3. Adjusted vertical alignment of app icons within a group.
4. Updated collapsed group.
5. Removed group labels from the design.
6. Updated gripper icon for edit mode.
7. Added gutter to the top of edit mode for moving groups to the top scenario.
8. Adjusted carrot hint opacity for idle state.

Chris - let's get together and I'll run you through the changes.

Comment 14

[Hung Nguyen]

Attachment: GroupingAssets_V04.zip

Updating assets to reflect the changes.

Comment 15

[Chris Lord [:cwiiis]]

This bug should only reflect conformance with v0.2 of the spec. I think we're close enough at this point to call this fixed, moving efforts to bug 1086514 and v0.4 of the spec.