diff --git a/routers/repo/issue.go b/routers/repo/issue.go
index 6ebc5d6ecb..e350f74de9 100644
--- a/routers/repo/issue.go
+++ b/routers/repo/issue.go
@@ -1649,7 +1649,7 @@ func UpdateIssueContent(ctx *context.Context) {
ctx.JSON(200, map[string]interface{}{
"content": string(markdown.Render([]byte(issue.Content), ctx.Query("context"), ctx.Repo.Repository.ComposeMetas())),
- "attachments": attachmentsHTML(ctx, issue.Attachments),
+ "attachments": attachmentsHTML(ctx, issue.Attachments, issue.Content),
})
}
@@ -2065,7 +2065,7 @@ func UpdateCommentContent(ctx *context.Context) {
ctx.JSON(200, map[string]interface{}{
"content": string(markdown.Render([]byte(comment.Content), ctx.Query("context"), ctx.Repo.Repository.ComposeMetas())),
- "attachments": attachmentsHTML(ctx, comment.Attachments),
+ "attachments": attachmentsHTML(ctx, comment.Attachments, comment.Content),
})
}
@@ -2399,10 +2399,11 @@ func updateAttachments(item interface{}, files []string) error {
return err
}
-func attachmentsHTML(ctx *context.Context, attachments []*models.Attachment) string {
+func attachmentsHTML(ctx *context.Context, attachments []*models.Attachment, content string) string {
attachHTML, err := ctx.HTMLString(string(tplAttachment), map[string]interface{}{
"ctx": ctx.Data,
"Attachments": attachments,
+ "Content": content,
})
if err != nil {
ctx.ServerError("attachmentsHTML.HTMLString", err)
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}}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 55cf08cb61..d4928a01a3 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1048,17 +1048,14 @@ async function initRepository() {
if (data.attachments !== '') {
$content.append(`
<div class="dropzone-attachments">
- <div class="ui clearing divider"></div>
- <div class="ui middle aligned padded grid">
- </div>
</div>
`);
- $content.find('.dropzone-attachments .grid').html(data.attachments);
+ $content.find('.dropzone-attachments').replaceWith(data.attachments);
}
} else if (data.attachments === '') {
$content.find('.dropzone-attachments').remove();
} else {
- $content.find('.dropzone-attachments .grid').html(data.attachments);
+ $content.find('.dropzone-attachments').replaceWith(data.attachments);
}
if (dz) {
dz.emit('submit');
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 8876dcdcb0..b35718c29d 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1016,50 +1016,10 @@
font-style: italic;
}
- > .bottom.segment {
- background: var(--color-box-body);
-
- .ui.images::after {
- clear: both;
- content: ' ';
- display: block;
- }
-
- a {
- display: block;
- float: left;
- margin: 5px;
- padding: 5px;
- height: 150px;
- border: solid 1px var(--color-secondary);
- border-radius: 3px;
- max-width: 150px;
- background-color: var(--color-body);
-
- &::before {
- content: ' ';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
- }
-
- .ui.image {
- max-height: 100%;
- width: auto;
- margin: 0;
- vertical-align: middle;
- }
-
- span.ui.image {
- font-size: 128px;
- color: var(--color-text);
- }
-
- span.ui.image:hover {
- color: var(--color-text);
- }
+ .dropzone-attachments .thumbnails .ui.image {
+ max-height: 150px;
}
+
}
.ui.form {