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

VERIFIED FIXED

Status

Firefox OS
Gaia::Homescreen
VERIFIED FIXED
3 years ago
2 years ago

People

(Reporter: mushi, Assigned: cwiiis)

Tracking

unspecified
x86
Mac OS X
Dependency tree / graph

Firefox Tracking Flags

(b2g-master verified)

Details

(Whiteboard: [systemsfe])

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8500698 [details]
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.
(Assignee)

Comment 1

3 years ago
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)

Comment 2

3 years ago
Hey Chris,

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

Cheers
Flags: needinfo?(msandberg)
(Assignee)

Updated

3 years ago
Blocks: 1086514
(Assignee)

Updated

3 years ago
Blocks: 1067435
(Assignee)

Comment 3

3 years ago
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)
(Assignee)

Comment 4

3 years ago
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 → chrislord.net
Status: NEW → ASSIGNED
Flags: needinfo?(hnguyen)
(Assignee)

Comment 5

3 years ago
Created attachment 8515489 [details] [review]
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.
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+
(Assignee)

Comment 8

3 years ago
Merged: https://github.com/mozilla-b2g/gaia/commit/1dbadf7d6db80906f13559be2843490849ba7843
Status: ASSIGNED → RESOLVED
Last Resolved: 3 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
Status: RESOLVED → VERIFIED
QA Whiteboard: [QAnalyst-Triage?]
status-b2g-master: --- → verified
Flags: needinfo?(ktucker)
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(ktucker)
Depends on: 1189941
You need to log in before you can comment on or make changes to this bug.