Skip to content

Commit b35c1b5

Browse files
bobemoeJames6543
authored
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 <[email protected]> Co-authored-by: 6543 <[email protected]>
1 parent 825efa2 commit b35c1b5

File tree

6 files changed

+56
-81
lines changed

6 files changed

+56
-81
lines changed

‎routers/repo/issue.go

+4-3
Original file line numberDiff line numberDiff line change
@@ -1649,7 +1649,7 @@ func UpdateIssueContent(ctx *context.Context) {
16491649

16501650
ctx.JSON(200, map[string]interface{}{
16511651
"content": string(markdown.Render([]byte(issue.Content), ctx.Query("context"), ctx.Repo.Repository.ComposeMetas())),
1652-
"attachments": attachmentsHTML(ctx, issue.Attachments),
1652+
"attachments": attachmentsHTML(ctx, issue.Attachments, issue.Content),
16531653
})
16541654
}
16551655

@@ -2065,7 +2065,7 @@ func UpdateCommentContent(ctx *context.Context) {
20652065

20662066
ctx.JSON(200, map[string]interface{}{
20672067
"content": string(markdown.Render([]byte(comment.Content), ctx.Query("context"), ctx.Repo.Repository.ComposeMetas())),
2068-
"attachments": attachmentsHTML(ctx, comment.Attachments),
2068+
"attachments": attachmentsHTML(ctx, comment.Attachments, comment.Content),
20692069
})
20702070
}
20712071

@@ -2399,10 +2399,11 @@ func updateAttachments(item interface{}, files []string) error {
23992399
return err
24002400
}
24012401

2402-
func attachmentsHTML(ctx *context.Context, attachments []*models.Attachment) string {
2402+
func attachmentsHTML(ctx *context.Context, attachments []*models.Attachment, content string) string {
24032403
attachHTML, err := ctx.HTMLString(string(tplAttachment), map[string]interface{}{
24042404
"ctx": ctx.Data,
24052405
"Attachments": attachments,
2406+
"Content": content,
24062407
})
24072408
if err != nil {
24082409
ctx.ServerError("attachmentsHTML.HTMLString", err)

‎templates/repo/issue/view_content.tmpl

+3-8
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,9 @@
6666
</div>
6767
<div id="comment-{{.Issue.ID}}" class="raw-content hide">{{.Issue.Content}}</div>
6868
<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>
69-
{{if .Issue.Attachments}}
70-
<div class="dropzone-attachments">
71-
<div class="ui clearing divider"></div>
72-
<div class="ui middle aligned padded grid">
73-
{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments}}
74-
</div>
75-
</div>
76-
{{end}}
69+
{{if .Issue.Attachments}}
70+
{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments "Content" .Issue.RenderedContent}}
71+
{{end}}
7772
</div>
7873
{{$reactions := .Issue.Reactions.GroupByType}}
7974
{{if $reactions}}

‎templates/repo/issue/view_content/attachments.tmpl

+41-14
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,42 @@
1-
{{- range .Attachments -}}
2-
<div class="twelve wide column" style="padding: 6px;">
3-
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
4-
{{if FilenameIsImage .Name}}
5-
<span class="ui image">{{svg "octicon-file"}}</span>
6-
{{else}}
7-
<span class="ui image">{{svg "octicon-desktop-download"}}</span>
8-
{{end}}
9-
<span><strong>{{.Name}}</strong></span>
10-
</a>
1+
<div class="dropzone-attachments">
2+
{{if .Attachments}}
3+
<div class="ui clearing divider"></div>
4+
{{end}}
5+
<div class="ui middle aligned padded grid">
6+
{{$hasThumbnails := false}}
7+
{{- range .Attachments -}}
8+
<div class="twelve wide column" style="padding: 6px;">
9+
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
10+
{{if FilenameIsImage .Name}}
11+
{{if not (containGeneric $.Content .UUID)}}
12+
{{$hasThumbnails = true}}
13+
{{end}}
14+
<span class="ui image">{{svg "octicon-file"}}</span>
15+
{{else}}
16+
<span class="ui image">{{svg "octicon-desktop-download"}}</span>
17+
{{end}}
18+
<span><strong>{{.Name}}</strong></span>
19+
</a>
20+
</div>
21+
<div class="four wide column" style="padding: 0px;">
22+
<span class="ui text grey right">{{.Size | FileSize}}</span>
23+
</div>
24+
{{end -}}
25+
</div>
26+
27+
{{if $hasThumbnails}}
28+
<div class="ui clearing divider"></div>
29+
<div class="ui small images thumbnails">
30+
{{- range .Attachments -}}
31+
{{if FilenameIsImage .Name}}
32+
{{if not (containGeneric $.Content .UUID)}}
33+
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}">
34+
<img class="ui image" src="{{.DownloadURL}}" title='{{$.ctx.i18n.Tr "repo.issues.attachment.open_tab" .Name}}'>
35+
</a>
36+
{{end}}
37+
{{end}}
38+
{{end -}}
39+
</div>
40+
{{end}}
41+
1142
</div>
12-
<div class="four wide column" style="padding: 0px;">
13-
<span class="ui text grey right">{{.Size | FileSize}}</span>
14-
</div>
15-
{{end -}}

‎templates/repo/issue/view_content/comments.tmpl

+3-8
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,9 @@
7272
</div>
7373
<div id="comment-{{.ID}}" class="raw-content hide">{{.Content}}</div>
7474
<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>
75-
{{if .Attachments}}
76-
<div class="dropzone-attachments">
77-
<div class="ui clearing divider"></div>
78-
<div class="ui middle aligned padded grid">
79-
{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments}}
80-
</div>
81-
</div>
82-
{{end}}
75+
{{if .Attachments}}
76+
{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments "Content" .RenderedContent}}
77+
{{end}}
8378
</div>
8479
{{$reactions := .Reactions.GroupByType}}
8580
{{if $reactions}}

‎web_src/js/index.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -1048,17 +1048,14 @@ async function initRepository() {
10481048
if (data.attachments !== '') {
10491049
$content.append(`
10501050
<div class="dropzone-attachments">
1051-
<div class="ui clearing divider"></div>
1052-
<div class="ui middle aligned padded grid">
1053-
</div>
10541051
</div>
10551052
`);
1056-
$content.find('.dropzone-attachments .grid').html(data.attachments);
1053+
$content.find('.dropzone-attachments').replaceWith(data.attachments);
10571054
}
10581055
} else if (data.attachments === '') {
10591056
$content.find('.dropzone-attachments').remove();
10601057
} else {
1061-
$content.find('.dropzone-attachments .grid').html(data.attachments);
1058+
$content.find('.dropzone-attachments').replaceWith(data.attachments);
10621059
}
10631060
if (dz) {
10641061
dz.emit('submit');

‎web_src/less/_repository.less

+3-43
Original file line numberDiff line numberDiff line change
@@ -1016,50 +1016,10 @@
10161016
font-style: italic;
10171017
}
10181018

1019-
> .bottom.segment {
1020-
background: var(--color-box-body);
1021-
1022-
.ui.images::after {
1023-
clear: both;
1024-
content: ' ';
1025-
display: block;
1026-
}
1027-
1028-
a {
1029-
display: block;
1030-
float: left;
1031-
margin: 5px;
1032-
padding: 5px;
1033-
height: 150px;
1034-
border: solid 1px var(--color-secondary);
1035-
border-radius: 3px;
1036-
max-width: 150px;
1037-
background-color: var(--color-body);
1038-
1039-
&::before {
1040-
content: ' ';
1041-
display: inline-block;
1042-
height: 100%;
1043-
vertical-align: middle;
1044-
}
1045-
}
1046-
1047-
.ui.image {
1048-
max-height: 100%;
1049-
width: auto;
1050-
margin: 0;
1051-
vertical-align: middle;
1052-
}
1053-
1054-
span.ui.image {
1055-
font-size: 128px;
1056-
color: var(--color-text);
1057-
}
1058-
1059-
span.ui.image:hover {
1060-
color: var(--color-text);
1061-
}
1019+
.dropzone-attachments .thumbnails .ui.image {
1020+
max-height: 150px;
10621021
}
1022+
10631023
}
10641024

10651025
.ui.form {

0 commit comments

Comments
 (0)