add thumbnail preview section to issue attachments (#13826)

* add thumbnail preview section to attachments

* dont show thumbnail if the image is already shown inline

* update router to pass the `content` to the attachemnts template

* limit attachment preview height to 150px (same as width)

* remove unused css (referance removed in https://github.com/go-gitea/gitea/pull/11141/files#diff-9faae32445ed9673de2830c9fc35e93f44487f0a0068202988adaf00a5bac850L66 )

* dont show divider after edit if no attachemnts

Co-authored-by: James <inbox.dev@jhodges.co.uk>
Co-authored-by: 6543 <6543@obermui.de>

3 files changed, 47 insertions, 30 deletions

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 355ba0ea29..37628a74e8 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -66,14 +66,9 @@
 						</div>
 						<div id="comment-{{.Issue.ID}}" class="raw-content hide">{{.Issue.Content}}</div>
 						<div class="edit-content-zone hide" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
-					{{if .Issue.Attachments}}
-						<div class="dropzone-attachments">
-							<div class="ui clearing divider"></div>
-							<div class="ui middle aligned padded grid">
-								{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
-							</div>
-						</div>
-					{{end}}
+    					{{if .Issue.Attachments}}
+    						{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments "Content" .Issue.RenderedContent}}
+    					{{end}}
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
diff --git a/templates/repo/issue/view_content/attachments.tmpl b/templates/repo/issue/view_content/attachments.tmpl
index d76c0bbfa2..16d77847d0 100644
--- a/templates/repo/issue/view_content/attachments.tmpl
+++ b/templates/repo/issue/view_content/attachments.tmpl
@@ -1,15 +1,42 @@
-{{- range .Attachments -}}
-<div class="twelve wide column" style="padding: 6px;">
-	<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
-	{{if FilenameIsImage .Name}}
-		<span class="ui image">{{svg "octicon-file"}}</span>
-	{{else}}
-		<span class="ui image">{{svg "octicon-desktop-download"}}</span>
-	{{end}}
-		<span><strong>{{.Name}}</strong></span>
-	</a>
+<div class="dropzone-attachments">
+    {{if .Attachments}}
+        <div class="ui clearing divider"></div>
+    {{end}}
+    <div class="ui middle aligned padded grid">
+        {{$hasThumbnails := false}}
+        {{- range .Attachments -}}
+            <div class="twelve wide column" style="padding: 6px;">
+                <a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
+                    {{if FilenameIsImage .Name}}
+                        {{if not (containGeneric $.Content .UUID)}}
+                            {{$hasThumbnails = true}}
+                        {{end}}
+                        <span class="ui image">{{svg "octicon-file"}}</span>
+                    {{else}}
+                        <span class="ui image">{{svg "octicon-desktop-download"}}</span>
+                    {{end}}
+                    <span><strong>{{.Name}}</strong></span>
+                </a>
+            </div>
+            <div class="four wide column" style="padding: 0px;">
+                <span class="ui text grey right">{{.Size | FileSize}}</span>
+            </div>
+        {{end -}}
+    </div>
+
+    {{if $hasThumbnails}}
+        <div class="ui clearing divider"></div>
+        <div class="ui small images thumbnails">
+            {{- range .Attachments -}}
+                {{if FilenameIsImage .Name}}
+                    {{if not (containGeneric $.Content .UUID)}}
+                    <a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
+                        <img class="ui image" src="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
+                    </a>
+                    {{end}}
+                {{end}}
+            {{end -}}
+        </div>
+    {{end}}
+
 </div>
-<div class="four wide column" style="padding: 0px;">
-	<span class="ui text grey right">{{.Size | FileSize}}</span>
-</div>
-{{end -}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 698e4698d0..2c413b3c46 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -72,14 +72,9 @@
 					</div>
 					<div id="comment-{{.ID}}" class="raw-content hide">{{.Content}}</div>
 					<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
-				{{if .Attachments}}
-					<div class="dropzone-attachments">
-						<div class="ui clearing divider"></div>
-						<div class="ui middle aligned padded grid">
-							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments}}
-						</div>
-					</div>
-				{{end}}
+    				{{if .Attachments}}
+    					{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments "Content" .RenderedContent}}
+    				{{end}}
 				</div>
 				{{$reactions := .Reactions.GroupByType}}
 				{{if $reactions}}