Simplify settings pages with item list (#1389)

* Remove point column on ssh key setting page

* Remove un-used css

* Some cleaning

* Use octicon-key

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

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

diff --git a/public/less/_user.less b/public/less/_user.less
index 51f8c2096766ad4c69976835b19ace8603905372..a3e6852994b7d6aa4f14b7be91e0a5382c1ca870 100644 (file)
--- a/public/less/_user.less
+++ b/public/less/_user.less
@@ -4,23 +4,6 @@
                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 {
                .ui.card {
                        .username {

diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index cd9dea1ddac3a3b06c623b8286d60965a4f333d6..f082fde86b2d0a9e84e9f069bb5f40a34df521a9 100644 (file)
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -14,27 +14,22 @@
                        {{if .Deploykeys}}
                                <div class="ui key list">
                                        {{range .Deploykeys}}
-                                               <div class="item ui grid">
-                                                       <div class="one wide column">
-                                                               <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>
-                                                       </div>
-                                                       <div class="one wide column">
-                                                               <i class="mega-octicon octicon-key left"></i>
-                                                       </div>
-                                                       <div class="eleven wide column">
-                                                               <strong>{{.Name}}</strong>
-                                                               <div class="print meta">
-                                                                       {{.Fingerprint}}
+                                               <div class="item">
+                                                   <div class="right floated content">
+                                                                       <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+                                                                               {{$.i18n.Tr "settings.delete_key"}}
+                                                                       </button>
+                                                   </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="content">
+                                                                       <strong>{{.Name}}</strong>
+                                                                       <div class="print meta">
+                                                                               {{.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 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>
                                        {{end}}
                                </div>

diff --git a/templates/user/settings/account_link.tmpl b/templates/user/settings/account_link.tmpl
index 4b19bea75c45b8b82e748f6fac6aafbabf746846..81ddf626e16e167b49312d7c22bb0dffd6e96476 100644 (file)
--- a/templates/user/settings/account_link.tmpl
+++ b/templates/user/settings/account_link.tmpl
@@ -13,16 +13,16 @@
                                </div>
                                {{if .AccountLinks}}
                                {{range $loginSource, $provider := .AccountLinks}}
-                                       <div class="item ui grid">
-                                               <div class="column">
-                                                       <strong>{{$provider}}</strong>
-                                                       {{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
-                                                       <div class="ui right">
+                                       <div class="item">
+                                           <div class="right floated content">
                                                                <button class="ui red tiny button delete-button" data-url="{{$.Link}}" data-id="{{$loginSource.ID}}">
                                                                        {{$.i18n.Tr "settings.delete_key"}}
                                                                </button>
+                                           </div>
+                                                       <div class="content">
+                                                               <strong>{{$provider}}</strong>
+                                                               {{if $loginSource.IsActived}}<span class="text red">{{$.i18n.Tr "settings.active"}}</span>{{end}}
                                                        </div>
-                                               </div>
                                        </div>
                                {{end}}
                                {{end}}

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index d8ba6d65a74cdef5d6c31b352c17c7571dfe6bec..d4d19dcedf3ab23206ceb969114884f44b2a609b 100644 (file)
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -15,24 +15,19 @@
                                        {{.i18n.Tr "settings.tokens_desc"}}
                                </div>
                                {{range .Tokens}}
-                                       <div class="item ui grid">
-                                               <div class="one wide column">
-                                                       <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 class="item">
+                                           <div class="right floated content">
+                                                               <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+                                                                       {{$.i18n.Tr "settings.delete_token"}}
+                                                               </button>
+                                           </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 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>
                                {{end}}
                        </div>

diff --git a/templates/user/settings/email.tmpl b/templates/user/settings/email.tmpl
index f54a2fc833ad863ace6a6963fe679dd587bcd1b9..88675f0e99fded0845d8b5d2e05e7b6e2a90435e 100644 (file)
--- a/templates/user/settings/email.tmpl
+++ b/templates/user/settings/email.tmpl
@@ -12,28 +12,28 @@
                                        {{.i18n.Tr "settings.email_desc"}}
                                </div>
                                {{range .Emails}}
-                                       <div class="item ui grid">
-                                               <div class="column">
-                                                       <strong>{{.Email}}</strong>
-                                                       {{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
+                                       <div class="item">
                                                        {{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}}">
                                                                                {{$.i18n.Tr "settings.delete_key"}}
                                                                        </button>
-                                                               </div>
-                                                               {{if .IsActivated}}
-                                                                       <div class="ui right">
-                                                                               <form action="{{$.Link}}" method="post">
-                                                                                       {{$.CsrfTokenHtml}}
-                                                                                       <input name="_method" type="hidden" value="PRIMARY">
-                                                                                       <input name="id" type="hidden" value="{{.ID}}">
-                                                                                       <button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
-                                                                               </form>
-                                                                       </div>
-                                                               {{end}}
+                                                   </div>
+                                                                       {{if .IsActivated}}
+                                                                   <div class="right floated content">
+                                                                                       <form action="{{$.Link}}" method="post">
+                                                                                               {{$.CsrfTokenHtml}}
+                                                                                               <input name="_method" type="hidden" value="PRIMARY">
+                                                                                               <input name="id" type="hidden" value="{{.ID}}">
+                                                                                               <button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
+                                                                                       </form>
+                                                                               </div>
+                                                                       {{end}}
                                                        {{end}}
-                                               </div>
+                                                       <div class="content">
+                                                               <strong>{{.Email}}</strong>
+                                                               {{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
+                                                       </div>
                                        </div>
                                {{end}}
                        </div>

diff --git a/templates/user/settings/openid.tmpl b/templates/user/settings/openid.tmpl
index 9da4be427405304ab8b2c50f2f829d0a2c3230b0..1a73bf5545f6e513392d0fa6d4a9b1015080e5ba 100644 (file)
--- a/templates/user/settings/openid.tmpl
+++ b/templates/user/settings/openid.tmpl
@@ -12,15 +12,13 @@
                                        {{.i18n.Tr "settings.openid_desc"}}
                                </div>
                                {{range .OpenIDs}}
-                                       <div class="item ui grid">
-                                               <div class="column">
-                                                       <strong>{{.URI}}</strong>
-                                                       <div class="ui right">
+                                       <div class="item">
+                                           <div class="right floated content">
                                                                <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
                                                                        {{$.i18n.Tr "settings.delete_key"}}
                                                                </button>
-                                                       </div>
-                                                       <div class="ui right">
+                                           </div>
+                                                       <div class="right floated content">
                                                                <form action="{{$.Link}}/toggle_visibility" method="post">
                                                                {{$.CsrfTokenHtml}}
                                                                <input name="id" type="hidden" value="{{.ID}}">
@@ -38,7 +36,9 @@
                                                                </button>
                                                                </form>
                                                        </div>
-                                               </div>
+                                                       <div class="content">
+                                                               <strong>{{.URI}}</strong>
+                                                       </div>
                                        </div>
                                {{end}}
                        </div>

diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl
index bb4a6c6a83a3e1bbfd6ed244aa6eac9a64ddb47f..7942afde41b024510142a3314d416c7c0e3df398 100644 (file)
--- a/templates/user/settings/sshkeys.tmpl
+++ b/templates/user/settings/sshkeys.tmpl
@@ -15,27 +15,22 @@
                                        {{.i18n.Tr "settings.ssh_desc"}}
                                </div>
                                {{range .Keys}}
-                                       <div class="item ui grid">
-                                               <div class="one wide column">
-                                                       <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>
-                                               </div>
-                                               <div class="one wide column">
-                                                       <i class="mega-octicon octicon-key left"></i>
-                                               </div>
-                                               <div class="eleven wide column">
-                                                       <strong>{{.Name}}</strong>
-                                                       <div class="print meta">
-                                                               {{.Fingerprint}}
+                                       <div class="item">
+                                           <div class="right floated content">
+                                                               <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+                                                                       {{$.i18n.Tr "settings.delete_key"}}
+                                                               </button>
+                                           </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="content">
+                                                               <strong>{{.Name}}</strong>
+                                                               <div class="print meta">
+                                                                       {{.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 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>
                                {{end}}
                        </div>