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.
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.
Hey Chris, I'm currently revising the spec for app grouping and will be sure to address this scenario. Cheers
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.
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...
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.
Comment on attachment 8515489 [details] [review] Add a visual hint when dragging over the top Looks good to me. Thanks.
Comment on attachment 8515489 [details] [review] Add a visual hint when dragging over the top Me too, r+, thanks
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