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