Issue #867 - UI for including screenshot in bug report

[magsout]

Ok, so @miketaylr

[miketaylr]

Whoa, speedy. ⚡ Will play with this in a bit.

[miketaylr]

This looks awesome @magsout. I'm gonna add an image preview via FileReader (if the browser supports it), otherwise it's hard to know if you've selected something. Once that's in place, I think we can land this and I'll extend it to work with the add-on screenshot stuff (and add drag & drop, etc.)

[miketaylr]

(that push was just to rebase against master)

[miketaylr]

We can improve the UX in future issues, a couple ideas:

1. ability to clear out file selection, right now you have to just select a new image
2. remove/modify "Add screenshot image" + icon
3. other stuff...

[miketaylr]

(it can look bad depending on the image, but that's OK I think for now... incremental improvements, etc.):

[magsout]

@miketaylr we can improve UX before merge if you want. Not a big deal.

[miketaylr]

@magsout if you have any suggestions, feel free to hack on them. I don't really have any amazing ideas, hence my "let's do it later". :p

When you get a chance, can you review the JS part?

[miketaylr]

I think I have one idea, let me try to come up with a quick mockup.

[miketaylr]

Here's one idea, stealing from the original design:

Once we have the upload image read and the background-image set, we hide the label w/ icon and show a yellow bar on the bottom with a link "Click here to remove image" (I guess it would technically be a button, but I think styling as a link would be good). Once the user clicks that, we remove the bg-image, clear out the file input, and show the original "Upload screenshot image">

We could re-use that same bottom bar for the add-on use case where a user needs to check the checkbox (something like "[ ] Select to include screenshot image")

What do you think?

[miketaylr]

r? @magsout what do you think?

[magsout]

wooot @miketaylr awesome 👍

[magsout]

I added a small animation and replaced <div> by <button>.

I have one issue when I removed image uploaded:

[miketaylr]

Yay, thanks for cleaning up my markup/CSS ^_^. Let me try to reproduce that error, it's kinda wierd.

[miketaylr]

Ah, the weird view function error is because it's a button -- it's trying to submit or navigate or something. Will sprinkle some JS to fix it, then merge.

[miketaylr]

Will sprinkle some JS to fix it

Or just use regular HTML type=button.

[magsout]

Ah yes, I writed role instead of type. Good catch @miketaylr