Show a modal when dropping a file outside the dropzone

[javierarce]

In this PR @mtias suggested showing a modal when a user drags a file to the editor but outside of the dropzone.

The text of the modal could indicate the type of the file the user is trying to add (image, video, etc.) or we could go with something more generic, like "media". Something else we could do is to show an error modal if the user drags an unrecognized file type.

Initial exploration

Here are a couple of ideas for such a modal: one with a simple list of text options and another one with images.  https://user-images.githubusercontent.com/4933/191232391-d0c2b9e5-026a-41bf-bca2-1ac286fc0c72.mov

Figma file

[jasmussen]

Nice, thanks for including the Figma! Just to remix your work here a bit, what if we reduced to a single needed click? Something like this:

I like the visuals, I wonder if we can make them more like icons and less like illustrations, mostly because a single coherent illustration style hasn't really been that established. Thinking something along the lines of the welcome guide in terms of graphics.

[javierarce]

I like the visuals, I wonder if we can make them more like icons and less like illustrations, mostly because a single coherent illustration style hasn't really been that established.

That's a good point but wouldn't "something along the lines of the welcome guide in terms of graphics" is still a bit opinionated in terms of style? What about something like this, just with icons? (note: I'm aware that the paragraph one could be more descriptive and maybe it's not ideal)

I added a border around all the options so they can be read as buttons and put the main action in the modal's title so we can have shorter labels (which will help keep the labels under three lines in other languages).

[jasmussen]

Nice iteration! I love the reduction and I actually think we can combine the compact headers with the compact actions:

I also reduced the size of the icons, I'm not sure it works, but I'm also not sure the upsized icons used as illustrations works entirely well.

That's a good point but wouldn't "something along the lines of the welcome guide in terms of graphics" is still a bit opinionated in terms of style?

To be clear I like your latest iteration, especially if we can get some good icons. We might need to draw new ones (for example a large version of the Image that maintains the stroke width? 🤔) But just to respond to your question on the welcome guide. The following slide isn't great, but I like that it's an abstracted version of the existing UI, kind of like how skeleton indicators are an abstracted version of a page loading:

[jasmussen]

@javierarce we can probably update the main ticket here with your latest iteration, then swap out the tags and send this over to a dev. What do you think?

[javierarce]

@jasmussen done. I ended up using an icon size of 48px… bigger than your last proposal but not so big as my initial one, but we can explore other styles as the feature gets implemented.

[jasmussen]

Looks great!

[apeatling]

This would be a really nice UX win, would be great to get it in 6.3.