foster/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-22 08:42:32 -05:00
Code Issues Wiki Activity

Improve SSH Key / GPG Key / Deploy Key UI (#26949)

Browse source 
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
This commit is contained in:
wxiaoguang 2023-09-07 09:13:11 +08:00 committed by GitHub
parent 9860dba566
commit 419003adb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/repo/settings/deploy_keys.tmpl
View file

@ -4,14 +4,14 @@
{{.locale.Tr "repo.settings.deploy_keys"}} {{.locale.Tr "repo.settings.deploy_keys"}}
<div class="ui right"> <div class="ui right">
{{if not .DisableSSH}} {{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}} {{else}}
<button class="ui primary tiny button disabled">{{.locale.Tr "settings.ssh_disabled"}}</button> <button class="ui primary tiny button disabled">{{.locale.Tr "settings.ssh_disabled"}}</button>
{{end}} {{end}}
</div> </div>
</h4> </h4>
<div class="ui attached segment"> <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"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<div class="field"> <div class="field">

30
templates/user/settings/keys_gpg.tmpl
View file

@ -1,11 +1,11 @@
<h4 class="ui top attached header"> <h4 class="ui top attached header">
{{.locale.Tr "settings.manage_gpg_keys"}} {{.locale.Tr "settings.manage_gpg_keys"}}
<div class="ui right"> <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> </div>
</h4> </h4>
<div class="ui attached segment"> <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"> <form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<input type="hidden" name="title" value="none"> <input type="hidden" name="title" value="none">
@ -41,7 +41,10 @@
</div> </div>
<div class="flex-list"> <div class="flex-list">
<div class="flex-item"> <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> </div>
{{range .GPGKeys}} {{range .GPGKeys}}
<div class="flex-item"> <div class="flex-item">
@ -107,17 +110,14 @@
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
</div> <div class="ui g-modal-confirm delete modal" id="delete-gpg">
<br> <div class="header">
<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> {{svg "octicon-trash"}}
{{.locale.Tr "settings.gpg_key_deletion"}}
<div class="ui g-modal-confirm delete modal" id="delete-gpg"> </div>
<div class="header"> <div class="content">
{{svg "octicon-trash"}} <p>{{.locale.Tr "settings.gpg_key_deletion_desc"}}</p>
{{.locale.Tr "settings.gpg_key_deletion"}} </div>
{{template "base/modal_actions_confirm" .}}
</div> </div>
<div class="content">
<p>{{.locale.Tr "settings.gpg_key_deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div> </div>

30
templates/user/settings/keys_ssh.tmpl
View file

@ -1,13 +1,13 @@
<h4 class="ui top attached header"> <h4 class="ui top attached header">
{{.locale.Tr "settings.manage_ssh_keys"}} {{.locale.Tr "settings.manage_ssh_keys"}}
<div class="ui right"> <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"}} {{.locale.Tr "settings.add_key"}}
</button> </button>
</div> </div>
</h4> </h4>
<div class="ui attached segment"> <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"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<div class="field {{if .Err_Title}}error{{end}}"> <div class="field {{if .Err_Title}}error{{end}}">
@ -29,7 +29,10 @@
</div> </div>
<div id="keys-ssh" class="flex-list"> <div id="keys-ssh" class="flex-list">
<div class="flex-item"> <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> </div>
{{if .DisableSSH}} {{if .DisableSSH}}
<div class="flex-item"> <div class="flex-item">
@ -95,17 +98,14 @@
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
</div> <div class="ui g-modal-confirm delete modal" id="delete-ssh">
<br> <div class="header">
<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> {{svg "octicon-trash"}}
{{.locale.Tr "settings.ssh_key_deletion"}}
<div class="ui g-modal-confirm delete modal" id="delete-ssh"> </div>
<div class="header"> <div class="content">
{{svg "octicon-trash"}} <p>{{.locale.Tr "settings.ssh_key_deletion_desc"}}</p>
{{.locale.Tr "settings.ssh_key_deletion"}} </div>
{{template "base/modal_actions_confirm" .}}
</div> </div>
<div class="content">
<p>{{.locale.Tr "settings.ssh_key_deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div> </div>

6
web_src/css/shared/flex-list.css
View file

@ -91,15 +91,15 @@
border-top: 1px solid var(--color-secondary); 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 */ 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, .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; padding-top: 0;
} }
.flex-list.flex-space-fitted > .flex-item:last-child, .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; padding-bottom: 0;
} }