third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add thumbnail preview section to issue attachments (#13826)

Browse Source 
* 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>
tokarchuk/v1.17
bobemoe 4 years ago committed by GitHub
parent 825efa2605
commit b35c1b5784
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 81 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      routers/repo/issue.go
  2. 11
      templates/repo/issue/view_content.tmpl
  3. 55
      templates/repo/issue/view_content/attachments.tmpl
  4. 11
      templates/repo/issue/view_content/comments.tmpl
  5. 7
      web_src/js/index.js
  6. 46
      web_src/less/_repository.less

7
routers/repo/issue.go
Unescape View File

@ -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)

11
templates/repo/issue/view_content.tmpl
Unescape View File

@ -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}}

55
templates/repo/issue/view_content/attachments.tmpl
Unescape View File

@ -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 -}}

11
templates/repo/issue/view_content/comments.tmpl
Unescape View File

@ -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}}

7
web_src/js/index.js
Unescape View File

@ -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');

46
web_src/less/_repository.less
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save