mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Simplify settings pages with item list (#1389) 

* Remove point column on ssh key setting page

* Remove un-used css

* Some cleaning

* Use octicon-key
This commit is contained in:
Antoine GIRARD 2017-03-30 03:02:37 +02:00 committed by Lunny Xiao
parent 129b0d6a4b
commit 912b340d0d
9 changed files with 130 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
public/css/index.css
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;
} }

32
public/less/_repository.less
View File

@ -1362,29 +1362,33 @@
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 {
.green {
color: #21BA45 !important;
}
&:not(:first-child) {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
padding:1rem;
margin: 15px -1rem -1rem -1rem;
min-height: 60px;
} }
.ssh-key-state-indicator { > .mega-octicon {
float: left; display: table-cell;
color: gray; }
padding-left: 10px; > .mega-octicon + .content {
padding-top: 10px; display: table-cell;
&.active { padding: 0 0 0 .5em;
color: #6cc644; vertical-align: top;
} }
} }
&.key{
.meta { .meta {
padding-top: 5px; padding-top: 5px;
}
.print {
color: #767676;
}
.activity {
color: #666; color: #666;
} }
} }
}
.hook.list { .hook.list {
> .item:not(:first-child) { > .item:not(:first-child) {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;

17
public/less/_user.less
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 {

21
templates/repo/settings/deploy_keys.tmpl
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}}">
{{$.i18n.Tr "settings.delete_key"}}
</button>
</div> </div>
<div class="one wide column"> <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>
<i class="mega-octicon octicon-key left"></i> <div class="content">
</div>
<div class="eleven wide column">
<strong>{{.Name}}</strong> <strong>{{.Name}}</strong>
<div class="print meta"> <div class="print meta">
{{.Fingerprint}} {{.Fingerprint}}
</div> </div>
<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_key"}}
</button>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>

10
templates/user/settings/account_link.tmpl
View File

@ -13,15 +13,15 @@
</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>
<div class="content">
<strong>{{$provider}}</strong>
{{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
</div> </div>
</div> </div>
{{end}} {{end}}

23
templates/user/settings/applications.tmpl
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>
</div>
<div class="one wide column">
<i class="fa fa-send fa-2x left"></i>
</div>
<div class="eleven wide column">
<strong>{{.Name}}</strong>
<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}}"> <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "settings.delete_token"}} {{$.i18n.Tr "settings.delete_token"}}
</button> </button>
</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="content">
<strong>{{.Name}}</strong>
<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>
{{end}} {{end}}
</div> </div>

12
templates/user/settings/email.tmpl
View File

@ -12,18 +12,15 @@
{{.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">
@ -33,6 +30,9 @@
</div> </div>
{{end}} {{end}}
{{end}} {{end}}
<div class="content">
<strong>{{.Email}}</strong>
{{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
</div> </div>
</div> </div>
{{end}} {{end}}

10
templates/user/settings/openid.tmpl
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,6 +36,8 @@
</button> </button>
</form> </form>
</div> </div>
<div class="content">
<strong>{{.URI}}</strong>
</div> </div>
</div> </div>
{{end}} {{end}}

21
templates/user/settings/sshkeys.tmpl
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}}">
{{$.i18n.Tr "settings.delete_key"}}
</button>
</div> </div>
<div class="one wide column"> <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>
<i class="mega-octicon octicon-key left"></i> <div class="content">
</div>
<div class="eleven wide column">
<strong>{{.Name}}</strong> <strong>{{.Name}}</strong>
<div class="print meta"> <div class="print meta">
{{.Fingerprint}} {{.Fingerprint}}
</div> </div>
<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_key"}}
</button>
</div>
</div> </div>
{{end}} {{end}}
</div> </div>