add thumbnail preview section to issue attachments

[bobemoe]

Closes #13786

This PR restores the image attachment preview thumbnails that were removed in #6089 but keeps the awesome filename/size list that was added in that PR.

[bobemoe]

I was thinking of hiding the thumbnail if the image was already displayed inline in the content, but couldn't figure out the best way to detect that, so this is what I've got so far

[codecov-io]

Codecov Report

Merging #13826 (4c04611) into master (825efa2) will increase coverage by 0.00%.
The diff coverage is 75.00%.

@@           Coverage Diff           @@
##           master   #13826   +/-   ##
=======================================
  Coverage   42.22%   42.23%           
=======================================
  Files         710      710           
  Lines       77232    77233    +1     
=======================================
+ Hits        32611    32617    +6     
- Misses      39246    39250    +4     
+ Partials     5375     5366    -9     

Impacted Files	Coverage Δ
routers/repo/issue.go	38.10% <75.00%> (+0.03%)	⬆️
modules/indexer/stats/queue.go	52.94% <0.00%> (-11.77%)	⬇️
modules/queue/unique_queue_channel.go	58.06% <0.00%> (-6.46%)	⬇️
modules/charset/charset.go	68.53% <0.00%> (-4.50%)	⬇️
modules/log/event.go	59.90% <0.00%> (-1.89%)	⬇️
services/mailer/mail.go	60.21% <0.00%> (-1.08%)	⬇️
modules/notification/mail/mail.go	39.08% <0.00%> (ø)
models/issue_comment.go	52.71% <0.00%> (+0.45%)	⬆️
models/error.go	39.31% <0.00%> (+0.81%)	⬆️
models/notification.go	67.24% <0.00%> (+0.98%)	⬆️
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 825efa2...4c04611. Read the comment docs.

[6543]

I was thinking of hiding the thumbnail if the image was already displayed inline in the content, but couldn't figure out the best way to detect that, so this is what I've got so far

we potetial could use search the issue/comment content for atatchemnt uuid before disply preview. this uuid strings should be uniqe enouth ...

[lunny]

Thumbnails may should have the same height and width.

[bobemoe]

@lunny agreed, I will look into this.

@6543 I am trying this now. Any idea how I can do a substring search in the template?

[bobemoe]

I written what I think needs doing in psudo code (see commit b700c11) but I cant work out how to actually implement it

[6543]

works sofar only if you edit stuff the view is kind a broken - after reload it works as is should

[bobemoe]

Looks like some js is expecting the old layout... think I've found it, just testing now

[bobemoe]

I had moved some duplicate html (<div class="dropzone-attachments">...) from the issue and comment template into the attachments template because it looked more suited there. This meant that the JS that updates the page after edit needed fixing (also contained the dupe code) so I tided that a little too. I've searched for any more occurrences but cant see any.

Also hidden thumbnails were reappearing during js update so I had to modify the router to use the new template functionality

Think its looking good now :)

Still want to look at limiting image height/width ratio next..

[bobemoe]

So at the moment image thumbnail uses the fomantic-ui .small class to restrict the thumbnail width, but height is not restricted so an tall thin image renders thousands of pixels high!! Unfortunately it seems no .square or fit/scale/crop classes available.

I've ended up using .dropzone-attachments .ui.image{ max-height:150px; } which works well, but where best to add this css?

And is using a hardcoded 150px a good idea, its meant to match fomantic-ui ui.image.small width of 150px but if this changes on different viewports then I may need a different approach?

[6543]

lint failing

[bobemoe]

I think I worked out the best place to put the CSS, please check: acc5ad9

Also I removed a CSS block that I think is no longer used, the bottom class it targets was removed in https://github.com/go-gitea/gitea/pull/11141/files#diff-9faae32445ed9673de2830c9fc35e93f44487f0a0068202988adaf00a5bac850L66, again please check f4a61dd

@6543 will check the lint issue now...

[bobemoe]

When the last attachment is delete and the JS updates the comment, all attachments are removed but there is still a divider line shown. Its not shown after refresh or on view, probably not worth worrying about? I could if it out in the template if you think its worth it?

[lunny]

When the last attachment is delete and the JS updates the comment, all attachments are removed but there is still a divider line shown. Its not shown after refresh or on view, probably not worth worrying about? I could if it out in the template if you think its worth it?

If there is no attachment, just remove the divider.

[bobemoe]

OK, I think I'm happy with this now :)

[bobemoe]

Anything more I need to do for this?

[6543]

Anything more I need to do for this?

no just wait for a second review - and hit "Update branch" some times ...