Improve image view

[SimonBrandner]

This PR improves the image view according to the design. For more details try out the live preview.

• Fixes #12933
• Fixes #16586
• Fixes #3323
• Fixes #3638
• Fixes #3159
• Fixes #282
• Fixes #11163
• Fixes #16676

Features:

• Bunch of useful buttons
• Zooming
• Rotating
• Panning

[turt2live]

This is looking pretty great - thank you for working on it! It's a big PR, so might need a couple rounds of review before we iron out all the pieces.

I noticed a couple bugs while giving this a quick test:

1. Redacting the image from context menu just leaves a broken image tag in the middle of the screen. @niquewoodhouse is there some sort of "you deleted this image" state we can show instead? (noting that the user won't ever be able to get to it without that context menu)
2. Clicking the rotate icons to go a full 360 causes the 4th click to spin wildly in the opposite direction. As a user, I'd expect that it smoothly rotates like it did for the other 3 clicks.

[turt2live]

if we're hardcoding it then it's not worth it, just add a comment like // same on all themes to the end

[SimonBrandner]

Thanks for the review!

1. The ImageView should now close itself when the image gets redacted, but @niquewoodhouse might have some better ideas
2. Fixed

[niquewoodhouse]

The ImageView should now close itself when the image gets redacted, but @niquewoodhouse might have some better ideas

Sounds great to me, will see how it feels in reality a few times and raise a follow up issue if amends needed. @turt2live thank you for testing and noting that

[turt2live]

This is getting there 😃 The code is looking fine, now it's just functional bits.

New round of bugs:

1. Removing the image briefly causes a flash of the image UI after the viewer goes away. This is quite distracting - it would be good to go from the delete dialog straight to the timeline without a flash of the viewer.
2. The download button on unencrypted images opens in the same tab when it should be a new tab (target="_blank").

Visually, it'd be good to have the image viewer stay underneath the dialogs a user can spawn, I think. In practice I think this means making the image viewer a static dialog so the other dialogs show up on top, but I'm not sure how the backdrops will interact. This could also fix issue 1 in this comment because it wouldn't be flashing around. @niquewoodhouse does that suggestion work for you? (and @SimonBrandner if it ends up being too difficult, feel free to punt it and we'll take a look elsewhere)

[SimonBrandner]

This is how it looks with the dialog static (personally, I like it much better than the previous solution):

I've fixed the delay when deleting by moving some stuff around

[niquewoodhouse]

Visually, it'd be good to have the image viewer stay underneath the dialogs a user can spawn, I think.

That's how it currently is in the netlify, right? That's how I think it worked when I previously reviewed* Dialogs appear on top of the image. Or am I misunderstanding - because I think the suggestion is already there, and I think it works better than current, where image the vanishes. @turt2live please let me know if I've not understood but I'm happy with how it works now, eg #5521 (comment))

*Turns out it didn't, I'm just an idiot. I agree with the suggestion, 100%

[SimonBrandner]

@niquewoodhouse, it wasn't there but it is there now. I've added it this morning :D

[niquewoodhouse]

@niquewoodhouse, it wasn't there but it is there now. I've added it this morning :D

Oh really, wow, I'm a moron. Thanks @turt2live for the suggestion, very pleased with it

[turt2live]

let's see what happens :D

[jackkinsey]

It looks like right clicking also triggers zoom, which was surprising to me.

[SimonBrandner]

@jackkinsey, I've created #16961