[FEAT] Visual separation between types of attachments

- Add a visual (but still semantic way) separation between Forgejo's
generated attachments and the user's uploaded ones.
- The styling was first done by `ul` element, but is moved to the
individual list items to have better control over them.
- Add tooltip explaining the attachment was generated by Forgejo.
- Remove the tooltip of the other attachments and 'simplify' them into a text.
- Resolves #2893

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
Gusted 2024-03-30 12:15:39 +01:00
parent 68e900822b
commit 20a3597220
No known key found for this signature in database
GPG key ID: FD821B732837125F
4 changed files with 31 additions and 16 deletions

View file

@ -2632,11 +2632,12 @@ release.tag_name_invalid = The tag name is not valid.
release.tag_name_protected = The tag name is protected.
release.tag_already_exist = This tag name already exists.
release.downloads = Downloads
release.download_count = Downloads: %s
release.download_count = %s downloads
release.add_tag_msg = Use the title and content of release as tag message.
release.add_tag = Create Tag Only
release.releases_for = Releases for %s
release.tags_for = Tags for %s
release.system_generated = This attachment is automatically generated.
branch.name = Branch name
branch.already_exists = A branch named "%s" already exists.

View file

@ -67,13 +67,21 @@
{{ctx.Locale.Tr "repo.release.downloads"}}
</summary>
<ul class="list">
{{$hasReleaseAttachment := gt (len $release.Attachments) 0}}
{{if and (not $.DisableDownloadSourceArchives) (not $release.IsDraft) ($.Permission.CanRead $.UnitTypeCode)}}
<li>
<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (ZIP)</strong></a>
<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.system_generated"}}">
{{svg "octicon-info"}}
</span>
</li>
<li>
<li class="{{if $hasReleaseAttachment}}start-gap{{end}}">
<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.system_generated"}}">
{{svg "octicon-info"}}
</span>
</li>
{{if $hasReleaseAttachment}}<hr>{{end}}
{{end}}
{{range $release.Attachments}}
<li>
@ -81,10 +89,7 @@
<strong>{{svg "octicon-package" 16 "tw-mr-1"}}{{.Name}}</strong>
</a>
<div>
<span class="text grey">{{.Size | ctx.Locale.TrSize}}</span>
<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}}">
{{svg "octicon-info"}}
</span>
<span class="text grey">{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}} · {{.Size | ctx.Locale.TrSize}}</span>
</div>
</li>
{{end}}

View file

@ -64,10 +64,7 @@
<div class="flex-text-inline tw-flex-1">
<input name="attachment-edit-{{.UUID}}" class="attachment_edit" required value="{{.Name}}">
<input name="attachment-del-{{.UUID}}" type="hidden" value="false">
<span class="ui text grey tw-whitespace-nowrap">{{.Size | ctx.Locale.TrSize}}</span>
<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}}">
{{svg "octicon-info"}}
</span>
<span class="ui text grey tw-whitespace-nowrap">{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}} · {{.Size | ctx.Locale.TrSize}}</span>
</div>
<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
{{ctx.Locale.Tr "remove"}}

View file

@ -33,20 +33,32 @@
.repository.releases #release-list > li .detail .download .list {
padding-left: 0;
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
background: var(--color-light);
}
.repository.releases #release-list > li .detail .download .list li {
background: var(--color-light);
border: 1px solid var(--color-secondary);
border-top: none;
display: flex;
justify-content: space-between;
padding: 8px;
border-bottom: 1px solid var(--color-secondary);
}
.repository.releases #release-list > li .detail .download .list li:last-child {
border-bottom: none;
.repository.releases #release-list > li .detail .download .list :is(li:first-child, .start-gap + hr + li) {
border-top: 1px solid var(--color-secondary);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.repository.releases #release-list > li .detail .download .list :is(li:last-child, .start-gap) {
border-bottom: 1px solid var(--color-secondary);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.repository.releases #release-list > li .detail .download .list hr {
height: 8px;
margin: 0;
}
.repository.releases #release-list > li .detail .dot {