924468 - Adding re-organizing functionality to edit mode in Collections

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Everything.me, defect)

Description

[Yosef Waysman]

Attachment: Collections - Re-organizing apps.bmml

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

This is a leftover from v1.2, intended for v1.3.



Expected results:

Attached are the specs for this functionality.

Comment 1

[Yosef Waysman]

Attachment: Collections - Re-organizing apps.png

Comment 4

[Amir Nissim (:amirn)]

Re-opened this bug and closed the duplicate (bug 922428) instead.

Comment 5

[Amir Nissim (:amirn)]

Attachment: patch - redirect to github PR

The patch is not 100% perfect yet. Will appreciate any help.

Cristian - you have done a great job for the homescreen drag-and-drop and I'm sure you can improve my code :)

Thanks.

Comment 6

[Cristian Rodriguez (:crdlc)]

How can we test it?

STR:

1) Open Social collection
2) Enter in edit mode pressing phone for example
3) Nothing happens

How users are able to move icons?

Thanks a lot

Comment 7

[Amir Nissim (:amirn)]

> How users are able to move icons?

Same as in homescreen. long tap on 'Phone' and move around without releasing.
(It only works for apps above the line, not web results)

Comment 8

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8337662 [details] [review]
patch - redirect to github PR

In general the code looks good and it is r+. I have some suggestions on github, please address them, thanks

When this bug will be landed, you should fill a new one to implement the smooth transition when the draggable icon is released and goes towards its new position

Good job

Comment 9

[Ran Ben Aharon [:ranbena] EverythingMe]

A few bugs I've noticed:
1. Can't remove app by clicking X. Opens the app instead.
2. When dropping an icon, the moved icon animates twice the distance. Reproducable in "Music".
3. When dropping an icon, an icon that changed row position blinks.

Bugs that happened but I can't reproduce:
1. Hovering over an icon didn't move it. Happened a few times only above the 3rd icon in the row.
2. After dropping an icon, still in edit mode, icons do not pulsate. Checked in AppManager and noticed data-transitioning was still "true".
3. Things got funky and icons landed on each other. Rare.

Comment 10

[Ran Ben Aharon [:ranbena] EverythingMe]

Visual bug - the dragged (pseudo) icon's text spreads to one line. Should look like the original icon.

Comment 11

[Ran Ben Aharon [:ranbena] EverythingMe]

Bug - if you drag an icon downwards (before edit mode is triggered), it'll transition to the bg image full screen mode.

Comment 12

[Amir Nissim (:amirn)]

Fixed:
> implement the smooth transition when the draggable icon is released and goes towards its new position
> Bug - if you drag an icon downwards (before edit mode is triggered), it'll transition to the bg image full screen mode.

Commit: https://github.com/EverythingMe/gaia/commit/dfb6d3ae836d167f386f8141fa92150bf28e61c3

Comment 13

[Ran Ben Aharon [:ranbena] EverythingMe]

(Everything.me) from comment #9)
> 2. When dropping an icon, the moved icon animates twice the distance.
> Reproducable in "Music".
> 3. When dropping an icon, an icon that changed row position blinks.

A suggestion for the drag leave transition bugfix. It's not very clean but it's the only method that worked :/
https://github.com/EverythingMe/gaia/commit/adc57d5820a25cc0eaed359b6face174a43c333a(In reply to Ran Ben Aharon

Comment 14

[Ran Ben Aharon [:ranbena] EverythingMe]

(In reply to Ran Ben Aharon (Everything.me) from comment #9)
> 2. After dropping an icon, still in edit mode, icons do not pulsate. Checked
> in AppManager and noticed data-transitioning was still "true".

Found the cause. Elaborated a bit here https://github.com/mozilla-b2g/gaia/pull/14007/files#r8011157

Comment 15

[Ran Ben Aharon [:ranbena] EverythingMe]

(In reply to Ran Ben Aharon (Everything.me) from comment #14)
> (In reply to Ran Ben Aharon (Everything.me) from comment #9)
> > 2. After dropping an icon, still in edit mode, icons do not pulsate. Checked
> > in AppManager and noticed data-transitioning was still "true".
> 
> Found the cause. Elaborated a bit here
> https://github.com/mozilla-b2g/gaia/pull/14007/files#0

STR:
1. Open a Collection and go to edit mode.
2. Click the home button. And again to go back to homescreen.
3. Open a Collection.
4. Long press an icon (don't leave) and drag it to another position.
Notice the icons aren't pulsating.

Comment 16

[Ran Ben Aharon [:ranbena] EverythingMe]

(In reply to Ran Ben Aharon (Everything.me) from comment #9)
> A few bugs I've noticed:
> 1. Can't remove app by clicking X. Opens the app instead.

Seems like this is the cause
https://github.com/EverythingMe/gaia/blob/924468-collections-organize/apps/homescreen/style/dragdrop.css#L78

Comment 17

[Amir Nissim (:amirn)]

fixed: un-clickable remove button
https://github.com/EverythingMe/gaia/commit/724f9fedd2fa459d66bf73db1e5567419bf06b86

Comment 18

[Amir Nissim (:amirn)]

fixed: flickering on drop to re-arrange
https://github.com/EverythingMe/gaia/commit/1082c23fcbb1094e9997439a8f17fcd11527bed4

Comment 19

[Amir Nissim (:amirn)]

(In reply to Ran Ben Aharon (Everything.me) from comment #10)
> Visual bug - the dragged (pseudo) icon's text spreads to one line. Should
> look like the original icon.

This is how it looks when dragging a homescreen app.

Comment 20

[Amir Nissim (:amirn)]

fixed: icons do not pulsate after stop() is called
https://github.com/EverythingMe/gaia/commit/5dc578283e3211de25315bf5998568fc2de89178

Comment 21

[Amir Nissim (:amirn)]

(In reply to Ran Ben Aharon (Everything.me) from comment #9)
> Hovering over an icon didn't move it.

fixed: https://github.com/EverythingMe/gaia/commit/96706c403ff5d20d918285c4f8e5a1526004fcc8

Comment 22

[Amir Nissim (:amirn)]

fixed: weird bounds behavior
https://github.com/EverythingMe/gaia/commit/da09bcc30e4f09df6786ada134c12c82654d0108

Comment 23

[Amir Nissim (:amirn)]

updated PR

Commit: https://github.com/EverythingMe/gaia/commit/12b4a5eb4e38457c07b4e633f4f001977398d233

Comment 24

[Amir Nissim (:amirn)]

fixed: multiple setTimeouts caused laggy behavior
https://github.com/EverythingMe/gaia/commit/ae5bcc87b3de29f7a602734fdeef1eb3f15668d4

Comment 25

[Amir Nissim (:amirn)]

fixed: animate draggable to new position on drop
https://github.com/EverythingMe/gaia/commit/6af75f48ffc3fb310cd834914f9f950fce706d86

Comment 26

[Amir Nissim (:amirn)]

landed: https://github.com/mozilla-b2g/gaia/commit/3e30728

Comment 27

[Cristian Rodriguez (:crdlc)]

I would like to know when evme features will start to create unit tests, any update about it?

Comment 28

[Ran Ben Aharon [:ranbena] EverythingMe]

Our first batch of unit tests will be merged soon in Bug 945184

Comment 29

[Cristian Rodriguez (:crdlc)]

Cool