mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases 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
pull/26942/head^2
wxiaoguang 1 year ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      templates/repo/settings/deploy_keys.tmpl
  2. 30
      templates/user/settings/keys_gpg.tmpl
  3. 30
      templates/user/settings/keys_ssh.tmpl
  4. 6
      web_src/css/shared/flex-list.css

4
templates/repo/settings/deploy_keys.tmpl
Unescape View File

@ -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">

30
templates/user/settings/keys_gpg.tmpl
Unescape View File

@ -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>
<div class="content">
<p>{{.locale.Tr "settings.gpg_key_deletion_desc"}}</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>
<div class="content">
<p>{{.locale.Tr "settings.gpg_key_deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/modal_actions_confirm" .}}
</div>

30
templates/user/settings/keys_ssh.tmpl
Unescape View File

@ -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>
<div class="content">
<p>{{.locale.Tr "settings.ssh_key_deletion_desc"}}</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>
<div class="content">
<p>{{.locale.Tr "settings.ssh_key_deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/modal_actions_confirm" .}}
</div>

6
web_src/css/shared/flex-list.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save