From 419003adb24495d804b276d2c7d59b170d0a56b7 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 7 Sep 2023 09:13:11 +0800
Subject: [PATCH] Improve SSH Key / GPG Key / Deploy Key UI (#26949)

1. In many cases, the `flex-list` has previous and next `gt-hidden`
siblings, so relax the CSS selector to remove all ".segument .flex-list"
paddings.
2. Make the "Add key" button can toggle
3. Move help message into the related segment(panel). Otherwise users
would misread the message, eg: the SSH help seemed for GPG because they
are so near
4. Move modal element into the segment element, otherwise it affects the
layout
---
 templates/repo/settings/deploy_keys.tmpl |  4 ++--
 templates/user/settings/keys_gpg.tmpl    | 30 ++++++++++++------------
 templates/user/settings/keys_ssh.tmpl    | 30 ++++++++++++------------
 web_src/css/shared/flex-list.css         |  6 ++---
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index a9e540bc65..b776848a56 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -4,14 +4,14 @@
 			{{.locale.Tr "repo.settings.deploy_keys"}}
 			<div class="ui right">
 			{{if not .DisableSSH}}
-				<button class="ui primary tiny show-panel button" data-panel="#add-deploy-key-panel">{{.locale.Tr "repo.settings.add_deploy_key"}}</button>
+				<button class="ui primary tiny show-panel toggle button" data-panel="#add-deploy-key-panel">{{.locale.Tr "repo.settings.add_deploy_key"}}</button>
 			{{else}}
 				<button class="ui primary tiny button disabled">{{.locale.Tr "settings.ssh_disabled"}}</button>
 			{{end}}
 			</div>
 		</h4>
 		<div class="ui attached segment">
-			<div class="{{if not .HasError}}gt-hidden{{end}}" id="add-deploy-key-panel">
+			<div class="{{if not .HasError}}gt-hidden{{end}} gt-mb-4" id="add-deploy-key-panel">
 				<form class="ui form" action="{{.Link}}" method="post">
 					{{.CsrfTokenHtml}}
 					<div class="field">
diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl
index e7a66de23f..2ecebcd7c0 100644
--- a/templates/user/settings/keys_gpg.tmpl
+++ b/templates/user/settings/keys_gpg.tmpl
@@ -1,11 +1,11 @@
 <h4 class="ui top attached header">
 	{{.locale.Tr "settings.manage_gpg_keys"}}
 	<div class="ui right">
-		<button class="ui primary tiny show-panel button" data-panel="#add-gpg-key-panel">{{.locale.Tr "settings.add_key"}}</button>
+		<button class="ui primary tiny show-panel toggle button" data-panel="#add-gpg-key-panel">{{.locale.Tr "settings.add_key"}}</button>
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasGPGError}}gt-hidden{{end}}" id="add-gpg-key-panel">
+	<div class="{{if not .HasGPGError}}gt-hidden{{end}} gt-mb-4" id="add-gpg-key-panel">
 		<form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<input type="hidden" name="title" value="none">
@@ -41,7 +41,10 @@
 	</div>
 	<div class="flex-list">
 		<div class="flex-item">
-			{{.locale.Tr "settings.gpg_desc"}}
+			<p>
+				{{.locale.Tr "settings.gpg_desc"}}<br>
+				{{.locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification" | Str2html}}
+			</p>
 		</div>
 		{{range .GPGKeys}}
 			<div class="flex-item">
@@ -107,17 +110,14 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
-<br>
-<p>{{.locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification" | Str2html}}</p>
-
-<div class="ui g-modal-confirm delete modal" id="delete-gpg">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "settings.gpg_key_deletion"}}
+	<div class="ui g-modal-confirm delete modal" id="delete-gpg">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.gpg_key_deletion"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.gpg_key_deletion_desc"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.gpg_key_deletion_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl
index 30c4133b6e..8419f72ff5 100644
--- a/templates/user/settings/keys_ssh.tmpl
+++ b/templates/user/settings/keys_ssh.tmpl
@@ -1,13 +1,13 @@
 <h4 class="ui top attached header">
 	{{.locale.Tr "settings.manage_ssh_keys"}}
 	<div class="ui right">
-		<button id="add-ssh-button" class="ui primary tiny show-panel button" data-panel="#add-ssh-key-panel">
+		<button id="add-ssh-button" class="ui primary tiny show-panel toggle button" data-panel="#add-ssh-key-panel">
 			{{.locale.Tr "settings.add_key"}}
 		</button>
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasSSHError}}gt-hidden{{end}}" id="add-ssh-key-panel">
+	<div class="{{if not .HasSSHError}}gt-hidden{{end}} gt-mb-4" id="add-ssh-key-panel">
 		<form class="ui form" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field {{if .Err_Title}}error{{end}}">
@@ -29,7 +29,10 @@
 	</div>
 	<div id="keys-ssh" class="flex-list">
 		<div class="flex-item">
-			{{.locale.Tr "settings.ssh_desc"}}
+			<p>
+				{{.locale.Tr "settings.ssh_desc"}}<br>
+				{{.locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh" | Str2html}}
+			</p>
 		</div>
 		{{if .DisableSSH}}
 			<div class="flex-item">
@@ -95,17 +98,14 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
-<br>
-<p>{{.locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh" | Str2html}}</p>
-
-<div class="ui g-modal-confirm delete modal" id="delete-ssh">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "settings.ssh_key_deletion"}}
+	<div class="ui g-modal-confirm delete modal" id="delete-ssh">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.ssh_key_deletion"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.ssh_key_deletion_desc"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.ssh_key_deletion_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 27f9bc2d69..b9c22c4a0b 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -91,15 +91,15 @@
   border-top: 1px solid var(--color-secondary);
 }
 
-/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly.
+/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `gt-hidden` siblings).
 Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */
 .flex-list.flex-space-fitted > .flex-item:first-child,
-.ui.segment > .flex-list:first-child > .flex-item:first-child {
+.ui.segment > .flex-list > .flex-item:first-child {
   padding-top: 0;
 }
 
 .flex-list.flex-space-fitted > .flex-item:last-child,
-.ui.segment > .flex-list:last-child > .flex-item:last-child {
+.ui.segment > .flex-list > .flex-item:last-child {
   padding-bottom: 0;
 }