mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-05 23:34:19 -04:00
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
This commit is contained in:
parent
9860dba566
commit
419003adb2
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user