893796 - Remove drag handle on stage track events

Status: VERIFIED FIXED

(Webmaker Graveyard :: Popcorn Maker, defect)

Description

[Scott [:thecount] Downe]

Right now we have pretty terrible drag handles for track events in the stage.

If we remove this, we need a way to drag them.

If we allow the whole element to be draggable, we need a way to interact with the content.

We can handle this with single and double clicks, but I forget the logic. Going to ping Kate about that.

Comment 1

[inactivate account for kate]

Demo is here http://k88hudson.github.io/bestdraggable/

Comment 2

[Scott [:thecount] Downe]

Cool thanks! Just what I needed.

This ticket is going to implement this: http://k88hudson.github.io/bestdraggable/#dblclick-container

Comment 3

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/popcorn.webmaker.org/pull/153

Comment 4

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

First step is make it work like this http://k88hudson.github.io/bestdraggable/#dblclick-container

Then we can do http://k88hudson.github.io/bestdraggable/#images-tab-container

Comment 5

[Matthew Schranz [:mjschranz]]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Remove https://github.com/ScottDowne/popcorn.webmaker.org/blob/d7f46dd7b2651117007f31c00c44813e245345f2/public/templates/assets/css/jquery-ui/jquery.ui.butter.less#L27-L34 since it's not being used now.

There's some comments in file, but I honestly can't find much wrong with this.

Comment 6

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Updated.

Can we remove font awesome in another ticket?

I'm not a fan of changes just because I'm in this code.

Comment 7

[Matthew Schranz [:mjschranz]]

You removed the code that uses what I am asking you to remove. Seems to make sense to remove this now.

Comment 8

[David Humphrey (:humph)]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Bouncing this one to Kate.

Comment 9

[Scott [:thecount] Downe]

@Matt, ah cool, I was not aware.

That's legit, I'll remove it.

Comment 10

[inactivate account for kate]

Can you remove the circle (it is problematic for single lines of text in particular) for now?

You could try replacing it with a tooltip that says "Double click to edit"  http://dl.dropbox.com/u/29163874/Screenshots/ku.png

Comment 11

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

ugh, our tooltip code was a bit of a rabit hole.

Anyway, I made a tooltip, and removed the green circle.

I had to make the tooltip not default to a top value, because the value it defaults to is static and not very useful.

Not setting it is more useful. Does what it is trying to do anyway, and is dynamic.

I also made the tooltip go away per track event if a double click to edit happens.

I considered a more global hide of tooltips for all track events if even one is double clicked to edit, but I didn't think it was worth it. This is better than nothing. Let's land this before it gets even bigger.

Last review was not a fail, but, putting it back on you anyway. r?

Comment 12

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Another update here. r?

Comment 13

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Moving this to Matt as I fixed some of his review comment concerns.

Comment 14

[Matthew Schranz [:mjschranz]]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Some questions, but also a request.

Also, these tooltips are bringing back an old bug we had with being able to drag things out of the parent containers bounds in Chrome. https://dl.dropboxusercontent.com/u/8586348/new_Drags.png

Comment 15

[Scott [:thecount] Downe]

Woah, that's a nasty bug. I don't remember that. What are the STRs to get that screen so I can debug what I broke?

Comment 16

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

I think I found a solution to all your issues :D

Comment 17

[Matthew Schranz [:mjschranz]]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Would still like to see the option of no tooltip for Wikipedia as it has no edit case at all.

Also, I still managed to get the dragging bug to occur.

Comment 18

[Scott [:thecount] Downe]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Updated with a solution to the show stopper bug.

Going to try to walk through what happened.

You can see it in master if you try to drag a handle that's not yet selected.

Master (popcorn.mofostaging.net) STRs:

1. create a teaxt event.
2. deselect it.
3. try to drag it.

Now, my new draggable patch changes this:

It all started on these click changes: https://github.com/mozilla/popcorn.webmaker.org/pull/153/files#L6L102

This is a needed change, but it exposes the above steps on master, to happen all the time.

So what ends up happening when you try to move an event is this:

1. mousedown happens.
2. this deselects everything (to later reselect the single clicked on event)
3. closes the editor.
4. reselect the clicked on event.
5. open it in the editor.
6. creates all new editor inputs, including a new colour picker.
7. colour picker sets up callbacks for when it changes, so it can fire trackevent updates with the new values.
8. then sets the current track event colour value.
9. fires callback...
10 track event update.
11. new draggable elements are created.
12. we boned. the container we were dragging is now gone.

So the fix here is to setup the colour picker default value before we create a callback, thus a track event update doesn't happen when the editor is opened.

Whew.

Comment 19

[Matthew Schranz [:mjschranz]]

Ah, good old mystery disappearing drag/resize handles.

Comment 20

[Matthew Schranz [:mjschranz]]

Comment on attachment 785241 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/153

Looks good!

Comment 21

[Brett Gaylor [:brett]]

Epic troubleshooting

Comment 22

[Scott [:thecount] Downe]

Staged: https://github.com/mozilla/popcorn.webmaker.org/commit/8655f046ae04ec3a9d54ac68aef0d1a0235de413

Needs verification.