third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify settings pages with item list (#1389)

Browse Source 
* Remove point column on ssh key setting page

* Remove un-used css

* Some cleaning

* Use octicon-key
tokarchuk/v1.17
Antoine GIRARD 8 years ago committed by Lunny Xiao
parent 129b0d6a4b
commit 912b340d0d
9 changed files with 130 additions and 170 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. 82
      public/css/index.css
  2. 42
      public/less/_repository.less
  3. 17
      public/less/_user.less
  4. 35
      templates/repo/settings/deploy_keys.tmpl
  5. 12
      templates/user/settings/account_link.tmpl
  6. 29
      templates/user/settings/applications.tmpl
  7. 34
      templates/user/settings/email.tmpl
  8. 14
      templates/user/settings/openid.tmpl
  9. 35
      templates/user/settings/sshkeys.tmpl

82
public/css/index.css
Unescape View File

@ -820,7 +820,7 @@ footer .ui.language .menu {
border: solid 1px #ccc; border: solid 1px #ccc;
border-bottom-color: #bbb; border-bottom-color: #bbb;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbbbbb; box-shadow: inset 0 -1px 0 #bbb;
} }
.markdown:not(code) input[type="checkbox"] { .markdown:not(code) input[type="checkbox"] {
vertical-align: middle !important; vertical-align: middle !important;
@ -896,7 +896,7 @@ footer .ui.language .menu {
} }
.install form label { .install form label {
text-align: right; text-align: right;
width: 320px; width: 320px !important;
} }
.install form input { .install form input {
width: 35% !important; width: 35% !important;
@ -905,7 +905,7 @@ footer .ui.language .menu {
text-align: left; text-align: left;
} }
.install form .field .help { .install form .field .help {
margin-left: 335px; margin-left: 335px !important;
} }
.install form .field.optional .title { .install form .field.optional .title {
margin-left: 38%; margin-left: 38%;
@ -940,18 +940,18 @@ footer .ui.language .menu {
text-align: center; text-align: center;
} }
#create-page-form form .header { #create-page-form form .header {
padding-left: 280px; padding-left: 280px !important;
} }
#create-page-form form .inline.field > label { #create-page-form form .inline.field > label {
text-align: right; text-align: right;
width: 250px; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
#create-page-form form .help { #create-page-form form .help {
margin-left: 265px; margin-left: 265px !important;
} }
#create-page-form form .optional .title { #create-page-form form .optional .title {
margin-left: 250px; margin-left: 250px !important;
} }
#create-page-form form input, #create-page-form form input,
#create-page-form form textarea { #create-page-form form textarea {
@ -994,7 +994,7 @@ footer .ui.language .menu {
.user.reset.password form .header, .user.reset.password form .header,
.user.signin form .header, .user.signin form .header,
.user.signup form .header { .user.signup form .header {
padding-left: 280px; padding-left: 280px !important;
} }
.user.activate form .inline.field > label, .user.activate form .inline.field > label,
.user.forgot.password form .inline.field > label, .user.forgot.password form .inline.field > label,
@ -1002,7 +1002,7 @@ footer .ui.language .menu {
.user.signin form .inline.field > label, .user.signin form .inline.field > label,
.user.signup form .inline.field > label { .user.signup form .inline.field > label {
text-align: right; text-align: right;
width: 250px; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.user.activate form .help, .user.activate form .help,
@ -1010,14 +1010,14 @@ footer .ui.language .menu {
.user.reset.password form .help, .user.reset.password form .help,
.user.signin form .help, .user.signin form .help,
.user.signup form .help { .user.signup form .help {
margin-left: 265px; margin-left: 265px !important;
} }
.user.activate form .optional .title, .user.activate form .optional .title,
.user.forgot.password form .optional .title, .user.forgot.password form .optional .title,
.user.reset.password form .optional .title, .user.reset.password form .optional .title,
.user.signin form .optional .title, .user.signin form .optional .title,
.user.signup form .optional .title { .user.signup form .optional .title {
margin-left: 250px; margin-left: 250px !important;
} }
.user.activate form input, .user.activate form input,
.user.forgot.password form input, .user.forgot.password form input,
@ -1051,7 +1051,7 @@ footer .ui.language .menu {
.user.reset.password form .inline.field > label, .user.reset.password form .inline.field > label,
.user.signin form .inline.field > label, .user.signin form .inline.field > label,
.user.signup form .inline.field > label { .user.signup form .inline.field > label {
width: 200px; width: 200px !important;
} }
.repository.new.repo form, .repository.new.repo form,
.repository.new.migrate form, .repository.new.migrate form,
@ -1067,24 +1067,24 @@ footer .ui.language .menu {
.repository.new.repo form .header, .repository.new.repo form .header,
.repository.new.migrate form .header, .repository.new.migrate form .header,
.repository.new.fork form .header { .repository.new.fork form .header {
padding-left: 280px; padding-left: 280px !important;
} }
.repository.new.repo form .inline.field > label, .repository.new.repo form .inline.field > label,
.repository.new.migrate form .inline.field > label, .repository.new.migrate form .inline.field > label,
.repository.new.fork form .inline.field > label { .repository.new.fork form .inline.field > label {
text-align: right; text-align: right;
width: 250px; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.repository.new.repo form .help, .repository.new.repo form .help,
.repository.new.migrate form .help, .repository.new.migrate form .help,
.repository.new.fork form .help { .repository.new.fork form .help {
margin-left: 265px; margin-left: 265px !important;
} }
.repository.new.repo form .optional .title, .repository.new.repo form .optional .title,
.repository.new.migrate form .optional .title, .repository.new.migrate form .optional .title,
.repository.new.fork form .optional .title { .repository.new.fork form .optional .title {
margin-left: 250px; margin-left: 250px !important;
} }
.repository.new.repo form input, .repository.new.repo form input,
.repository.new.migrate form input, .repository.new.migrate form input,
@ -1119,7 +1119,7 @@ footer .ui.language .menu {
width: 50%!important; width: 50%!important;
} }
.repository.new.repo .ui.form #auto-init { .repository.new.repo .ui.form #auto-init {
margin-left: 265px; margin-left: 265px !important;
} }
.new.webhook form .help { .new.webhook form .help {
margin-left: 25px; margin-left: 25px;
@ -2374,25 +2374,25 @@ footer .ui.language .menu {
.settings .content .segment { .settings .content .segment {
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
} }
.settings .key.list .item:not(:first-child) { .settings .list .item .green {
color: #21BA45 !important;
}
.settings .list .item:not(:first-child) {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
padding: 1rem;
margin: 15px -1rem -1rem -1rem;
min-height: 60px;
} }
.settings .key.list .ssh-key-state-indicator { .settings .list .item > .mega-octicon {
float: left; display: table-cell;
color: gray;
padding-left: 10px;
padding-top: 10px;
} }
.settings .key.list .ssh-key-state-indicator.active { .settings .list .item > .mega-octicon + .content {
color: #6cc644; display: table-cell;
padding: 0 0 0 .5em;
vertical-align: top;
} }
.settings .key.list .meta { .settings .list.key .meta {
padding-top: 5px; padding-top: 5px;
}
.settings .key.list .print {
color: #767676;
}
.settings .key.list .activity {
color: #666; color: #666;
} }
.settings .hook.list > .item:not(:first-child) { .settings .hook.list > .item:not(:first-child) {
@ -2625,18 +2625,18 @@ footer .ui.language .menu {
text-align: center; text-align: center;
} }
.organization.new.org form .header { .organization.new.org form .header {
padding-left: 280px; padding-left: 280px !important;
} }
.organization.new.org form .inline.field > label { .organization.new.org form .inline.field > label {
text-align: right; text-align: right;
width: 250px; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.organization.new.org form .help { .organization.new.org form .help {
margin-left: 265px; margin-left: 265px !important;
} }
.organization.new.org form .optional .title { .organization.new.org form .optional .title {
margin-left: 250px; margin-left: 250px !important;
} }
.organization.new.org form input, .organization.new.org form input,
.organization.new.org form textarea { .organization.new.org form textarea {
@ -2738,18 +2738,6 @@ footer .ui.language .menu {
padding-top: 15px; padding-top: 15px;
padding-bottom: 80px; padding-bottom: 80px;
} }
.user.settings .list .item.ui.grid {
margin-top: 15px;
}
.user.settings .email.list .item:not(:first-child),
.user.settings .openid.list .item:not(:first-child) {
border-top: 1px solid #eaeaea;
height: 50px;
}
.user.settings .email.list .item:not(:first-child) .button,
.user.settings .openid.list .item:not(:first-child) .button {
margin-top: -10px;
}
.user.profile .ui.card .username { .user.profile .ui.card .username {
display: block; display: block;
} }

42
public/less/_repository.less
Unescape View File

@ -1362,27 +1362,31 @@
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
} }
} }
.key.list { .list {
.item:not(:first-child) { .item {
border-top: 1px solid #eaeaea; .green {
} color: #21BA45 !important;
.ssh-key-state-indicator { }
float: left; &:not(:first-child) {
color: gray; border-top: 1px solid #eaeaea;
padding-left: 10px; padding:1rem;
padding-top: 10px; margin: 15px -1rem -1rem -1rem;
&.active { min-height: 60px;
color: #6cc644; }
> .mega-octicon {
display: table-cell;
}
> .mega-octicon + .content {
display: table-cell;
padding: 0 0 0 .5em;
vertical-align: top;
} }
} }
.meta { &.key{
padding-top: 5px; .meta {
} padding-top: 5px;
.print { color: #666;
color: #767676; }
}
.activity {
color: #666;
} }
} }
.hook.list { .hook.list {

17
public/less/_user.less
Unescape View File

@ -4,23 +4,6 @@
padding-bottom: @footer-margin * 2; padding-bottom: @footer-margin * 2;
} }
&.settings {
.list {
.item.ui.grid {
margin-top: 15px;
}
}
.email.list, .openid.list {
.item:not(:first-child) {
border-top: 1px solid #eaeaea;
height: 50px;
.button {
margin-top: -10px;
}
}
}
}
&.profile { &.profile {
.ui.card { .ui.card {
.username { .username {

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

@ -14,27 +14,22 @@
{{if .Deploykeys}} {{if .Deploykeys}}
<div class="ui key list"> <div class="ui key list">
{{range .Deploykeys}} {{range .Deploykeys}}
<div class="item ui grid"> <div class="item">
<div class="one wide column"> <div class="right floated content">
<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i> <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
</div> {{$.i18n.Tr "settings.delete_key"}}
<div class="one wide column"> </button>
<i class="mega-octicon octicon-key left"></i> </div>
</div> <i class="mega-octicon octicon-key {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted"{{end}}></i>
<div class="eleven wide column"> <div class="content">
<strong>{{.Name}}</strong> <strong>{{.Name}}</strong>
<div class="print meta"> <div class="print meta">
{{.Fingerprint}} {{.Fingerprint}}
</div>
<div class="activity meta">
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div> </div>
<div class="activity meta">
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
<div class="two wide column">
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "settings.delete_key"}}
</button>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

12
templates/user/settings/account_link.tmpl
Unescape View File

@ -13,16 +13,16 @@
</div> </div>
{{if .AccountLinks}} {{if .AccountLinks}}
{{range $loginSource, $provider := .AccountLinks}} {{range $loginSource, $provider := .AccountLinks}}
<div class="item ui grid"> <div class="item">
<div class="column"> <div class="right floated content">
<strong>{{$provider}}</strong>
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
<div class="ui right">
<button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}"> <button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
{{$.i18n.Tr "settings.delete_key"}} {{$.i18n.Tr "settings.delete_key"}}
</button> </button>
</div>
<div class="content">
<strong>{{$provider}}</strong>
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
</div> </div>
</div>
</div> </div>
{{end}} {{end}}
{{end}} {{end}}

29
templates/user/settings/applications.tmpl
Unescape View File

@ -15,24 +15,19 @@
{{.i18n.Tr "settings.tokens_desc"}} {{.i18n.Tr "settings.tokens_desc"}}
</div> </div>
{{range .Tokens}} {{range .Tokens}}
<div class="item ui grid"> <div class="item">
<div class="one wide column"> <div class="right floated content">
<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i> <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
</div> {{$.i18n.Tr "settings.delete_token"}}
<div class="one wide column"> </button>
<i class="fa fa-send fa-2x left"></i> </div>
</div> <i class="big send icon {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.token_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
<div class="eleven wide column"> <div class="content">
<strong>{{.Name}}</strong> <strong>{{.Name}}</strong>
<div class="activity meta"> <div class="activity meta">
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i> <i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div> </div>
</div>
<div class="two wide column">
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "settings.delete_token"}}
</button>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

34
templates/user/settings/email.tmpl
Unescape View File

@ -12,28 +12,28 @@
{{.i18n.Tr "settings.email_desc"}} {{.i18n.Tr "settings.email_desc"}}
</div> </div>
{{range .Emails}} {{range .Emails}}
<div class="item ui grid"> <div class="item">
<div class="column">
<strong>{{.Email}}</strong>
{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
{{if not .IsPrimary}} {{if not .IsPrimary}}
<div class="ui right"> <div class="right floated content">
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "settings.delete_key"}} {{$.i18n.Tr "settings.delete_key"}}
</button> </button>
</div> </div>
{{if .IsActivated}} {{if .IsActivated}}
<div class="ui right"> <div class="right floated content">
<form action="{{$.Link}}" method="post"> <form action="{{$.Link}}" method="post">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<input name="_method" type="hidden" value="PRIMARY"> <input name="_method" type="hidden" value="PRIMARY">
<input name="id" type="hidden" value="{{.ID}}"> <input name="id" type="hidden" value="{{.ID}}">
<button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button> <button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
</form> </form>
</div> </div>
{{end}} {{end}}
{{end}} {{end}}
</div> <div class="content">
<strong>{{.Email}}</strong>
{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

14
templates/user/settings/openid.tmpl
Unescape View File

@ -12,15 +12,13 @@
{{.i18n.Tr "settings.openid_desc"}} {{.i18n.Tr "settings.openid_desc"}}
</div> </div>
{{range .OpenIDs}} {{range .OpenIDs}}
<div class="item ui grid"> <div class="item">
<div class="column"> <div class="right floated content">
<strong>{{.URI}}</strong>
<div class="ui right">
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"> <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "settings.delete_key"}} {{$.i18n.Tr "settings.delete_key"}}
</button> </button>
</div> </div>
<div class="ui right"> <div class="right floated content">
<form action="{{$.Link}}/toggle_visibility" method="post"> <form action="{{$.Link}}/toggle_visibility" method="post">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<input name="id" type="hidden" value="{{.ID}}"> <input name="id" type="hidden" value="{{.ID}}">
@ -38,7 +36,9 @@
</button> </button>
</form> </form>
</div> </div>
</div> <div class="content">
<strong>{{.URI}}</strong>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

35
templates/user/settings/sshkeys.tmpl
Unescape View File

@ -15,27 +15,22 @@
{{.i18n.Tr "settings.ssh_desc"}} {{.i18n.Tr "settings.ssh_desc"}}
</div> </div>
{{range .Keys}} {{range .Keys}}
<div class="item ui grid"> <div class="item">
<div class="one wide column"> <div class="right floated content">
<i class="ssh-key-state-indicator fa fa-circle{{if .HasRecentActivity}} active invert poping up{{else}}-o{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i> <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
</div> {{$.i18n.Tr "settings.delete_key"}}
<div class="one wide column"> </button>
<i class="mega-octicon octicon-key left"></i> </div>
</div> <i class="mega-octicon octicon-key {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.i18n.Tr "settings.key_state_desc"}}" data-variation="inverted tiny"{{end}}></i>
<div class="eleven wide column"> <div class="content">
<strong>{{.Name}}</strong> <strong>{{.Name}}</strong>
<div class="print meta"> <div class="print meta">
{{.Fingerprint}} {{.Fingerprint}}
</div>
<div class="activity meta">
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div> </div>
<div class="activity meta">
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{DateFmtShort .Created}}</span> — <i class="octicon octicon-info"></i> {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span>{{DateFmtShort .Updated}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
<div class="two wide column">
<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "settings.delete_key"}}
</button>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

Write Preview
Loading…
Cancel
Save