From 67db6b697636221e09536e89ac8600a47f79b5cb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 11 May 2023 00:27:02 +0200
Subject: [PATCH] RSS icon fixes (#24476)

Fix regression from https://github.com/go-gitea/gitea/pull/24471 where
CSS rules for `.icon.grey` were removed which were in use by the RSS
icons.

Gave them their own class instead, removed a wrapper and also fixed
vertical alignment on them. Additionally, did a few related fixes on the
org header for alignment.

Fixes: https://github.com/go-gitea/gitea/issues/24584

<img width="196" alt="Screenshot 2023-05-01 at 22 39 40"
src="https://user-images.githubusercontent.com/115237/235528228-959e2385-c1d2-4d5c-baec-e3784d459653.png">
<img width="216" alt="Screenshot 2023-05-01 at 22 44 20"
src="https://user-images.githubusercontent.com/115237/235528231-95cbff86-5672-48eb-b214-8bdcefa1612c.png">
<img width="120" alt="Screenshot 2023-05-01 at 22 56 36"
src="https://user-images.githubusercontent.com/115237/235529844-b94ab554-3259-4d0c-b040-82aed7d1a111.png">


<img width="372" alt="Screenshot 2023-05-01 at 22 54 25"
src="https://user-images.githubusercontent.com/115237/235529744-1a9c201b-5692-4122-9765-2f201a322a9e.png">
<img width="477" alt="Screenshot 2023-05-01 at 22 55 28"
src="https://user-images.githubusercontent.com/115237/235529748-62188554-9927-42ef-bc94-7052bce266e2.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/org/home.tmpl                       | 12 ++++-----
 templates/repo/header.tmpl                    |  6 ++---
 templates/repo/release/list.tmpl              |  9 +------
 templates/repo/release_tag_header.tmpl        | 27 +++++++++++++++++++
 templates/repo/sub_menu_release_tag.tmpl      | 17 ------------
 templates/repo/tag/list.tmpl                  |  8 +-----
 web_src/css/base.css                          |  6 +++++
 web_src/css/organization.css                  |  5 ----
 .../js/components/RepoBranchTagSelector.vue   |  2 +-
 9 files changed, 45 insertions(+), 47 deletions(-)
 create mode 100644 templates/repo/release_tag_header.tmpl
 delete mode 100644 templates/repo/sub_menu_release_tag.tmpl

diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index afd7d61ca9f8..27f0df0b385e 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -3,15 +3,15 @@
 	<div class="ui container gt-df">
 		{{avatar $.Context .Org 140 "org-avatar"}}
 		<div id="org-info">
-			<div class="ui header">
+			<div class="ui header gt-df gt-fw">
 				{{.Org.DisplayName}}
-				{{if .EnableFeed}}
-					<a href="{{.Org.HomeLink}}.rss"><i class="ui grey icon gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 36}}</i></a>
-				{{end}}
 				<span class="org-visibility">
-					{{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
-					{{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
+					{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
+					{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
 				</span>
+				{{if .EnableFeed}}
+					<a class="muted" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 24}}</a>
+				{{end}}
 			</div>
 			{{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}}
 			<div class="text grey meta">
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index b36d1d8f6ac3..b2fd0710afb0 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -13,9 +13,6 @@
 					<a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
 					<div class="gt-mx-2">/</div>
 					<a href="{{$.RepoLink}}">{{.Name}}</a>
-					{{if $.EnableFeed}}
-						<a href="{{$.RepoLink}}.rss"><i class="ui grey icon gt-ml-3" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
-					{{end}}
 					<div class="labels gt-df gt-ac gt-fw">
 						{{if .IsTemplate}}
 							{{if .IsPrivate}}
@@ -38,6 +35,9 @@
 							<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
 						{{end}}
 					</div>
+					{{if $.EnableFeed}}
+						<a class="muted gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
+					{{end}}
 				</div>
 				{{if $.IsPullMirror}}
 					{{$address := MirrorRemoteAddress $.Context . $.Mirror.GetRemoteName false}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 2dcb012412ff..fb8534f10280 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -3,14 +3,7 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		{{template "repo/sub_menu_release_tag" .}}
-
-		{{if .CanCreateRelease}}
-			<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
-				{{.locale.Tr "repo.release.new_release"}}
-			</a>
-		{{end}}
-
+		{{template "repo/release_tag_header" .}}
 		<ul id="release-list">
 			{{range $idx, $release := .Releases}}
 				<li class="ui grid">
diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl
new file mode 100644
index 000000000000..6d022eebccac
--- /dev/null
+++ b/templates/repo/release_tag_header.tmpl
@@ -0,0 +1,27 @@
+{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
+{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
+
+{{if $canReadReleases}}
+	<div class="gt-df">
+		<div class="gt-f1">
+			<h2 class="ui compact small menu header small-menu-items">
+				<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
+				{{if $canReadCode}}
+					<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>
+				{{end}}
+			</h2>
+			{{if .EnableFeed}}
+				<a class="muted gt-mx-3" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
+			{{end}}
+		</div>
+		{{if and (not .PageIsTagList) .CanCreateRelease}}
+			<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
+				{{.locale.Tr "repo.release.new_release"}}
+			</a>
+		{{end}}
+	</div>
+	<div class="ui divider"></div>
+{{else if $canReadCode}}
+	{{/* if the "repo.releases" unit is disabled, only show the "commits / branches / tags" sub menu */}}
+	{{template "repo/sub_menu" .}}
+{{end}}
diff --git a/templates/repo/sub_menu_release_tag.tmpl b/templates/repo/sub_menu_release_tag.tmpl
deleted file mode 100644
index c700893ee670..000000000000
--- a/templates/repo/sub_menu_release_tag.tmpl
+++ /dev/null
@@ -1,17 +0,0 @@
-{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
-{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
-
-{{if $canReadReleases}}
-	<h2 class="ui compact small menu header small-menu-items">
-		<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
-		{{if $canReadCode}}
-			<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>
-		{{end}}
-	</h2>
-
-	{{if .EnableFeed}}
-		<a href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss"><i class="ui grey icon gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
-	{{end}}
-{{else if $canReadCode}}
-	{{template "repo/sub_menu" .}}
-{{end}}
diff --git a/templates/repo/tag/list.tmpl b/templates/repo/tag/list.tmpl
index 6f9e1e8d7aed..8651bfe2ec94 100644
--- a/templates/repo/tag/list.tmpl
+++ b/templates/repo/tag/list.tmpl
@@ -1,21 +1,15 @@
 {{template "base/head" .}}
-
 <div role="main" aria-label="{{.Title}}" class="page-content repository tags">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		{{template "repo/sub_menu_release_tag" .}}
-
-		<div class="ui divider"></div>
-
+		{{template "repo/release_tag_header" .}}
 		<h4 class="ui top attached header">
 			<div class="five wide column gt-df gt-ac">
 				{{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.release.tags"}}
 			</div>
 		</h4>
-
 		{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
-
 		<div class="ui attached table segment">
 			<table class="ui very basic striped fixed table single line" id="tags-table">
 				<tbody class="tag-list">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c33acbe9c4e1..aa86d140fe4b 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -364,6 +364,12 @@ a.label,
   text-decoration: none !important;
 }
 
+/* for most cases, we only use our svg icon as inline icon, so we need to make them inline-block and vertical-align: middle */
+svg.svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .ui.red.labels .label,
 .ui.ui.ui.red.label,
 .ui.red.button,
diff --git a/web_src/css/organization.css b/web_src/css/organization.css
index 25d4940fe53e..1b10ba157e3d 100644
--- a/web_src/css/organization.css
+++ b/web_src/css/organization.css
@@ -112,11 +112,6 @@
   margin-bottom: 0;
 }
 
-.organization.profile #org-info .ui.header .org-visibility .label {
-  margin-left: 5px;
-  margin-top: 2px;
-}
-
 .organization.profile #org-info .desc {
   font-size: 16px;
   margin-bottom: 10px;
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 38a375aa85da..f02918da9aa7 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -39,7 +39,7 @@
       <div class="scrolling menu" ref="scrollContainer">
         <div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
           {{ item.name }}
-          <a v-if="enableFeed && mode === 'branches'" role="button" class="ui compact muted right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
+          <a v-if="enableFeed && mode === 'branches'" role="button" class="ui compact right muted" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
             <svg-icon name="octicon-rss" :size="14"/>
           </a>
         </div>