Improve look of the user email settings page

This commit improves the look of the users email settings page.
It highlights the current menu item, aligns the formatting
of the list with the other pages and introduces sorting
for the email adresses.

The primary address should always be shown first with the others
coming after in lexical sorted order.

models/user.go

@@ -15,6 +15,7 @@ import (
 	"image/jpeg"
 	"os"
 	"path/filepath"
+	"sort"
 	"strings"
 	"time"
 
@@ -106,6 +107,25 @@ type EmailAddress struct {
 	IsPrimary   bool `xorm:"-"`
 }
 
+// ByEmail implements sort.Interface for []*EmailAddress based on
+// the Email field.
+type ByEmail []*EmailAddress
+
+func (e ByEmail) Len() int {
+	return len(e)
+}
+
+func (e ByEmail) Swap(i, j int) {
+	e[i], e[j] = e[j], e[i]
+}
+
+func (e ByEmail) Less(i, j int) bool {
+	if e[i].IsPrimary {
+		return true
+	}
+	return e[i].Email < e[j].Email
+}
+
 // DashboardLink returns the user dashboard page link.
 func (u *User) DashboardLink() string {
 	if u.IsOrganization() {
@@ -629,7 +649,7 @@ func GetUserIdsByNames(names []string) []int64 {
 // Get all email addresses
 func GetEmailAddresses(uid int64) ([]*EmailAddress, error) {
 	emails := make([]*EmailAddress, 0, 5)
-	err := x.Where("uid=?", uid).Find(&emails)
+	err := x.Where("uid=?", uid).Asc("Email").Find(&emails)
 	if err != nil {
 		return nil, err
 	}
@@ -650,11 +670,16 @@ func GetEmailAddresses(uid int64) ([]*EmailAddress, error) {
 		}
 	}
 
-	// We alway want the primary email address displayed, even if it's not in
+	// We always want the primary email address displayed, even if it's not in
-	// the emailaddress table (yet)
+	// the emailaddress table (yet).
 	if !isPrimaryFound {
 		emails = append(emails, &EmailAddress{Email: u.Email, IsActivated: true, IsPrimary: true})
 	}
+
+	// We want the list of email adresses to be sorted with the primary
+	// address always on top.
+	sort.Sort(ByEmail(emails))
+
 	return emails, nil
 }
 

public/ng/css/gogs.css

@@ -1813,6 +1813,7 @@ The register and sign-in page style
 #repo-hooks-history-panel,
 #user-social-panel,
 #user-applications-panel,
+#user-email-panel,
 #user-ssh-panel {
   margin-bottom: 20px;
 }
@@ -1820,6 +1821,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .setting-list,
 #user-social-panel .setting-list,
 #user-applications-panel .setting-list,
+#user-email-panel .setting-list,
 #user-ssh-panel .setting-list {
   background-color: #FFF;
 }
@@ -1827,6 +1829,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .setting-list li,
 #user-social-panel .setting-list li,
 #user-applications-panel .setting-list li,
+#user-email-panel .setting-list li,
 #user-ssh-panel .setting-list li {
   padding: 8px 20px;
   border-bottom: 1px solid #eaeaea;
@@ -1835,6 +1838,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .setting-list li.ssh:hover,
 #user-social-panel .setting-list li.ssh:hover,
 #user-applications-panel .setting-list li.ssh:hover,
+#user-email-panel .setting-list li.ssh:hover,
 #user-ssh-panel .setting-list li.ssh:hover {
   background-color: #ffffEE;
 }
@@ -1842,6 +1846,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .setting-list li i,
 #user-social-panel .setting-list li i,
 #user-applications-panel .setting-list li i,
+#user-email-panel .setting-list li i,
 #user-ssh-panel .setting-list li i {
   padding-right: 5px;
 }
@@ -1849,6 +1854,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .active-icon,
 #user-social-panel .active-icon,
 #user-applications-panel .active-icon,
+#user-email-panel .active-icon,
 #user-ssh-panel .active-icon {
   width: 10px;
   height: 10px;
@@ -1861,6 +1867,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .ssh-content,
 #user-social-panel .ssh-content,
 #user-applications-panel .ssh-content,
+#user-email-panel .ssh-content,
 #user-ssh-panel .ssh-content {
   margin-left: 24px;
 }
@@ -1868,6 +1875,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .ssh-content .octicon,
 #user-social-panel .ssh-content .octicon,
 #user-applications-panel .ssh-content .octicon,
+#user-email-panel .ssh-content .octicon,
 #user-ssh-panel .ssh-content .octicon {
   margin-right: 4px;
 }
@@ -1875,16 +1883,19 @@ The register and sign-in page style
 #repo-hooks-history-panel .ssh-content .print,
 #user-social-panel .ssh-content .print,
 #user-applications-panel .ssh-content .print,
+#user-email-panel .ssh-content .print,
 #user-ssh-panel .ssh-content .print,
 #repo-hooks-panel .ssh-content .access,
 #repo-hooks-history-panel .ssh-content .access,
 #user-social-panel .ssh-content .access,
 #user-applications-panel .ssh-content .access,
+#user-email-panel .ssh-content .access,
 #user-ssh-panel .ssh-content .access,
 #repo-hooks-panel .ssh-content .activity,
 #repo-hooks-history-panel .ssh-content .activity,
 #user-social-panel .ssh-content .activity,
 #user-applications-panel .ssh-content .activity,
+#user-email-panel .ssh-content .activity,
 #user-ssh-panel .ssh-content .activity {
   color: #888;
 }
@@ -1892,6 +1903,7 @@ The register and sign-in page style
 #repo-hooks-history-panel .ssh-content .access,
 #user-social-panel .ssh-content .access,
 #user-applications-panel .ssh-content .access,
+#user-email-panel .ssh-content .access,
 #user-ssh-panel .ssh-content .access {
   max-width: 500px;
 }
@@ -1899,9 +1911,14 @@ The register and sign-in page style
 #repo-hooks-history-panel .ssh-btn,
 #user-social-panel .ssh-btn,
 #user-applications-panel .ssh-btn,
+#user-email-panel .ssh-btn,
 #user-ssh-panel .ssh-btn {
   margin-top: 6px;
 }
+#user-email-panel .setting-list .field {
+  padding: 8px 20px;
+  border-bottom: 1px solid #eaeaea;
+}
 .form-settings-add .panel-body {
   background-color: #FFF;
   padding: 30px 0;

routers/user/setting.go

@@ -131,7 +131,7 @@ func SettingsAvatar(ctx *middleware.Context, form auth.UploadAvatarForm) {
 func SettingsEmails(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("settings")
 	ctx.Data["PageIsUserSettings"] = true
-	ctx.Data["PageIsSettingsEmails"] = true
+	ctx.Data["PageIsSettingsEmail"] = true
 
 	var err error
 	ctx.Data["Emails"], err = models.GetEmailAddresses(ctx.User.Id)
@@ -147,7 +147,7 @@ func SettingsEmails(ctx *middleware.Context) {
 func SettingsEmailPost(ctx *middleware.Context, form auth.AddEmailForm) {
 	ctx.Data["Title"] = ctx.Tr("settings")
 	ctx.Data["PageIsUserSettings"] = true
-	ctx.Data["PageIsSettingsEmails"] = true
+	ctx.Data["PageIsSettingsEmail"] = true
 
 	var err error
 	ctx.Data["Emails"], err = models.GetEmailAddresses(ctx.User.Id)

templates/user/settings/email.tmpl

@@ -41,11 +41,8 @@
 							<p class="panel-header"><strong>{{.i18n.Tr "settings.add_new_email"}}</strong></p>
 							<p class="field">
                                 <label class="req" for="email">{{.i18n.Tr "email"}}</label>
-                                <input class="ipt ipt-radius" id="email" name="email" type="text" required />
+                                <input class="ipt ipt-radius" id="email" size="40" name="email" type="text" required />
-                            </p>
+                                <button class="right btn btn-green btn-radius" id="email-add-btn">{{.i18n.Tr "settings.add_email"}}</button>
-                            <p class="field">
-                                <label></label>
-                                <button class="btn btn-green btn-radius" id="email-add-btn">{{.i18n.Tr "settings.add_email"}}</button>
                             </p>
 							</form>
                         </ul>