1078766 - Add visual hint for group creation/move group above top group

Status: VERIFIED FIXED

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

Description

[Maria Sandberg [:mushi]]

Attachment: grouping-visual-hint-missing.png

When moving an app or group there should be a visual hint between all groups, as well as below the bottom group and above the top group. 

Currently we are lacking the visual hint above the top group. See attached screenshot.

Comment 1

[Chris Lord [:cwiiis]]

Playing around with this, this is a bit trickier than you'd otherwise think...

There's no divider at the top of a group, so we don't have a convenient element to use to put the hint on - that's fine, we can improvise and style the group itself in this one situation (the code already special-cases 'at-the-top' when dragging, so this isn't exactly a huge step).

Then, there isn't actually any space at the top to put this hint... Should all the icons shift downwards slightly when going into edit mode? Should the header be smaller? The header is already slightly larger than the search bar on the home-screen, which causes some overlap when going into edit mode. Should the drop hint be placed over the edit header? Should it be part of the edit header itself?

I'll see about mocking something up, but some UX/visual work here would definitely be helpful.

Comment 2

[Hung Nguyen]

Hey Chris,

I'm currently revising the spec for app grouping and will be sure to address this scenario. 

Cheers

Comment 3

[Chris Lord [:cwiiis]]

So the spec doesn't really cover this fully. I have an implementation, but I assume we don't want an unnatural looking gap at the top of the group at all times (so that the hint can be visible). I'm playing around with this - a nice thing to do is shift all icons when you hover over the top, but I'm having some difficulty making that happen smoothly...

If I can't get that working, I'll try some other things, but the spec could use clarification here.

Comment 4

[Chris Lord [:cwiiis]]

Ok, I got it working smoothly and I'm pretty pleased with the effect actually :) Gonna cancel the needinfo, we can iterate and file more bugs if this isn't good enough.

Unfortunately github is playing up for me, so I can't open the pull-request just yet...

Comment 5

[Chris Lord [:cwiiis]]

Attachment: Add a visual hint when dragging over the top

It wouldn't hurt for both of you to have a look. Tiny code change, mostly in the CSS.

Note that the search bar being 5rem in height is in the spec, and stops the edit header from hiding the top of the grid.

Comment 6

[Kevin Grandon :kgrandon]

Comment on attachment 8515489 [details] [review]
Add a visual hint when dragging over the top

Looks good to me. Thanks.

Comment 7

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8515489 [details] [review]
Add a visual hint when dragging over the top

Me too, r+, thanks

Comment 8

[Chris Lord [:cwiiis]]

Merged: https://github.com/mozilla-b2g/gaia/commit/1dbadf7d6db80906f13559be2843490849ba7843

Comment 9

[Joshua Mitchell (Inactive)]

Verified fixed on the latest Nightly Flame 3.0 build

Results: A visual hint (a blue bar) is present when moving an app above the current top group

Device: Flame 3.0 (KK - Nightly - Full Flash)
Build ID: 20150209010211
Gaia: 0d7b35f23402c4cb29bca6b98280fec48a196dec
Gecko: 3436787a82d0
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0