Closed Bug 1078766 Opened 7 years ago Closed 6 years ago

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


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

Not set


(b2g-master verified)

Tracking Status
b2g-master --- verified


(Reporter: msandberg, Assigned: cwiiis)



(Whiteboard: [systemsfe])


(2 files)

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.
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.
Flags: needinfo?(msandberg)
Hey Chris,

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

Flags: needinfo?(msandberg)
Blocks: 1086514
Blocks: app-grouping
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.
Flags: needinfo?(hnguyen)
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...
Assignee: nobody →
Flags: needinfo?(hnguyen)
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.
Attachment #8515489 - Flags: review?(kgrandon)
Attachment #8515489 - Flags: review?(crdlc)
Comment on attachment 8515489 [details] [review]
Add a visual hint when dragging over the top

Looks good to me. Thanks.
Attachment #8515489 - Flags: review?(kgrandon) → review+
Comment on attachment 8515489 [details] [review]
Add a visual hint when dragging over the top

Me too, r+, thanks
Attachment #8515489 - Flags: review?(crdlc) → review+
Closed: 6 years ago
Resolution: --- → FIXED
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
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(ktucker)
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(ktucker)
You need to log in before you can comment on or make changes to this bug.