Improve RSS feed icons (#28368)

- The RSS Feed icons were placed in a proper button, so that it does
  not look "inconsistent". This also makes the problem of the button
  being improperly aligned go away.
- The icon that shows on user profiles has not been modified because
  of a lack of better implementation ideas.
- Where applicable, the RSS Feed icon was put directly next to the
  Follow button (right menu), as both functionalities effectively
  share the same purpose.
- Despite the attempt at achieving less inconsistency, a conscious
  decision to not add any text to those buttons was made, opting for
  tooltips instead. "Make it present, but not too annoying."
- A special exception was made for the Releases pages (which contains
  text, not a tooltip), where an RSS feed would be particularly
  beneficial to users.

The fact that the RSS functionality is explicitly optional was taken
into account, and these improvements were made with public-facing
instances (where the feature works best) in mind.
This commit is contained in:
Panagiotis "Ivory" Vasilopoulos 2023-12-06 20:29:26 +00:00 committed by GitHub
parent 1e512b800c
commit 22cb5b0c17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 10 deletions

View File

@ -9,9 +9,6 @@
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}} {{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}} {{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span> </span>
{{if .EnableFeed}}
<a class="rss-icon gt-mx-3" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 24}}</a>
{{end}}
</div> </div>
{{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}} {{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}}
<div class="text grey meta"> <div class="text grey meta">
@ -23,6 +20,11 @@
</div> </div>
</div> </div>
<div class="right menu"> <div class="right menu">
{{if .EnableFeed}}
<button class="link-action ui basic label button gt-mr-0" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}" data-url="{{$.Org.HomeLink}}.rss">
{{svg "octicon-rss" 24}}
</button>
{{end}}
<button class="link-action ui basic button gt-mr-0" data-url="{{.Org.HomeLink}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}"> <button class="link-action ui basic button gt-mr-0" data-url="{{.Org.HomeLink}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}">
{{if $.IsFollowing}} {{if $.IsFollowing}}
{{ctx.Locale.Tr "user.unfollow"}} {{ctx.Locale.Tr "user.unfollow"}}

View File

@ -25,9 +25,6 @@
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span> <span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span>
{{end}} {{end}}
</div> </div>
{{if $.EnableFeed}}
<a class="rss-icon gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div> </div>
{{if $.PullMirror}} {{if $.PullMirror}}
<div class="fork-flag">{{ctx.Locale.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.PullMirror.RemoteAddress}}">{{$.PullMirror.RemoteAddress}}</a></div> <div class="fork-flag">{{ctx.Locale.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.PullMirror.RemoteAddress}}">{{$.PullMirror.RemoteAddress}}</a></div>
@ -55,6 +52,12 @@
</div> </div>
</form> </form>
{{end}} {{end}}
{{if $.EnableFeed}}
{{/* An extra div-element is not necessary here, as this button does not secretly contain two buttons. */}}
<button class="ui compact small basic button" data-url="{{$.RepoLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
{{svg "octicon-rss" 16}}
</button>
{{end}}
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}"> <form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}> <div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>

View File

@ -10,10 +10,12 @@
<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{ctx.Locale.PrettyNumber .NumTags}} {{ctx.Locale.TrN .NumTags "repo.tag" "repo.tags"}}</a> <a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{ctx.Locale.PrettyNumber .NumTags}} {{ctx.Locale.TrN .NumTags "repo.tag" "repo.tags"}}</a>
{{end}} {{end}}
</h2> </h2>
{{if .EnableFeed}}
<a class="rss-icon gt-mx-3" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div> </div>
{{if .EnableFeed}}
<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
{{svg "octicon-rss" 18}} {{ctx.Locale.Tr "rss_feed"}}
</a>
{{end}}
{{if and (not .PageIsTagList) .CanCreateRelease}} {{if and (not .PageIsTagList) .CanCreateRelease}}
<a class="ui small primary button" href="{{$.RepoLink}}/releases/new"> <a class="ui small primary button" href="{{$.RepoLink}}/releases/new">
{{ctx.Locale.Tr "repo.release.new_release"}} {{ctx.Locale.Tr "repo.release.new_release"}}

View File

@ -43,7 +43,9 @@
<a download href="{{$.RawFileLink}}"><span class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.download_file"}}">{{svg "octicon-download"}}</span></a> <a download href="{{$.RawFileLink}}"><span class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.download_file"}}">{{svg "octicon-download"}}</span></a>
<a id="copy-content" class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy" 14}}</a> <a id="copy-content" class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy" 14}}</a>
{{if .EnableFeed}} {{if .EnableFeed}}
<a class="btn-octicon" href="{{$.FeedURL}}/rss/{{$.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{svg "octicon-rss" 14}}</a> <a class="btn-octicon" href="{{$.FeedURL}}/rss/{{$.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
{{svg "octicon-rss" 14}}
</a>
{{end}} {{end}}
{{if .Repository.CanEnableEditor}} {{if .Repository.CanEnableEditor}}
{{if .CanEditFile}} {{if .CanEditFile}}