Finish new UI for release page

cmd/web.go

@@ -397,14 +397,17 @@ func runWeb(*cli.Context) {
 		})
 
 		m.Post("/comment/:action", repo.Comment)
-		m.Get("/releases/new", repo.NewRelease)
-		m.Post("/releases/new", bindIgnErr(auth.NewReleaseForm{}), repo.NewReleasePost)
-		m.Get("/releases/edit/:tagname", repo.EditRelease)
-		m.Post("/releases/edit/:tagname", bindIgnErr(auth.EditReleaseForm{}), repo.EditReleasePost)
+
+		m.Group("/releases", func() {
+			m.Get("/new", repo.NewRelease)
+			m.Post("/new", bindIgnErr(auth.NewReleaseForm{}), repo.NewReleasePost)
+			m.Get("/edit/:tagname", repo.EditRelease)
+			m.Post("/edit/:tagname", bindIgnErr(auth.EditReleaseForm{}), repo.EditReleasePost)
+		}, middleware.RepoRef())
 	}, reqSignIn, middleware.RepoAssignment(true))
 
 	m.Group("/:username/:reponame", func() {
-		m.Get("/releases", repo.Releases)
+		m.Get("/releases", middleware.RepoRef(), repo.Releases)
 		m.Get("/issues", repo.Issues)
 		m.Get("/issues/:index", repo.ViewIssue)
 		m.Get("/issues/milestones", repo.Milestones)

conf/locale/locale_en-US.ini

@@ -377,6 +377,30 @@ diff.stats_desc = <strong> %d changed files</strong> with <strong>%d additions</
 diff.bin = BIN
 diff.view_file = View File
 
+release.releases = Releases
+release.new_release = New Release
+release.draft = Draft
+release.prerelease = Pre-Release
+release.stable = Stable
+release.edit = edit
+release.ahead = <strong>%d</strong> commits to %s since this release
+release.source_code = Source Code
+release.tag_name = Tag name
+release.target = Target
+release.tag_helper = Choose an existing tag, or create a new tag on publish.
+release.release_title = Release title
+release.content_with_md = Content with <a href="%s">Markdown</a>
+release.write = Write
+release.preview = Preview
+release.content_placeholder = Write some content
+release.loading = Loading...
+release.prerelease_desc = This is a pre-release
+release.prerelease_helper = We’ll point out that this release is identified as non-production ready.
+release.publish = Publish Release
+release.save_draft = Save Draft
+release.edit_release = Edit Release
+release.tag_name_already_exist = Release with this tag name has already existed.
+
 [org]
 org_name_holder = Organization Name
 org_name_helper = Great organization names are short and memorable.

modules/auth/apiv1/miscellaneous.go

@@ -14,7 +14,7 @@ import (
 )
 
 type MarkdownForm struct {
-	Text    string `form:"text" binding:"Required"`
+	Text    string `form:"text"`
 	Mode    string `form:"mode"`
 	Context string `form:"context"`
 }

modules/auth/repo_form.go

@@ -164,7 +164,6 @@ func (f *NewReleaseForm) Validate(ctx *macaron.Context, errs binding.Errors) bin
 }
 
 type EditReleaseForm struct {
-	Target     string `form:"tag_target" binding:"Required"`
 	Title      string `form:"title" binding:"Required"`
 	Content    string `form:"content" binding:"Required"`
 	Draft      string `form:"draft"`

public/ng/css/gogs.css

@@ -1072,7 +1072,8 @@ The register and sign-in page style
   text-overflow: clip;
 }
 #repo-content {
-  padding: 18px 0;
+  padding-top: 18px;
+  padding-bottom: 18px;
 }
 .repo-wide-wrapper {
   padding: 18px;
@@ -1353,31 +1354,54 @@ The register and sign-in page style
 #repo-create-cancel {
   margin-left: 4em;
 }
+#release-new-target-branch-list,
 #repo-create-owner-list {
   top: 30px;
   left: 0;
   width: auto;
   max-width: 300px;
 }
+#release-new-target-branch-list .octicon,
 #repo-create-owner-list .octicon {
   margin-right: 12px;
   opacity: 0;
 }
+#release-new-target-branch-list .avatar,
 #repo-create-owner-list .avatar {
   width: 20px;
   height: 20px;
 }
+#release-new-target-branch-list li,
 #repo-create-owner-list li {
   white-space: nowrap;
 }
+#release-new-target-branch-list li.checked .octicon,
 #repo-create-owner-list li.checked .octicon {
   opacity: 1;
 }
+#release-new-target-branch-list li a,
 #repo-create-owner-list li a {
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   overflow: hidden;
 }
+#release-new-target-branch-list {
+  margin-top: -1px;
+  min-width: 150px;
+}
+#release-new-title {
+  margin-top: 10px;
+}
+#release-new-content {
+  width: 100%;
+}
+#release-preview-btn .btn {
+  border-left: 0;
+}
+#release-preview.markdown {
+  margin-top: 5px;
+  background-color: transparent;
+}
 .file-name {
   margin-left: 1em;
 }
@@ -1622,6 +1646,87 @@ The register and sign-in page style
   margin-left: 44px;
   margin-top: -15px;
 }
+#release h4 {
+  font-size: 18px;
+}
+#release h4 small {
+  font-weight: 400;
+  line-height: 1;
+  color: #999;
+}
+#release #release-head {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #DDD;
+}
+#release #release-head .btn {
+  margin-left: 10px;
+}
+#release .release-item > div {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+#release .release-item .label-green:hover {
+  background-color: #65ad4e;
+}
+#release .release-item .release-meta {
+  position: relative;
+  float: left;
+  padding-right: 15px;
+}
+#release .release-item .tag,
+#release .release-item .commit {
+  display: block;
+  margin-top: 12px;
+  line-height: 20px;
+}
+#release .release-item .release-detail {
+  margin-top: -1px;
+  border-left: 1px solid #DDD;
+  position: relative;
+  float: left;
+  padding-left: 15px;
+}
+#release .release-item .title {
+  line-height: 25px;
+  margin-top: 0;
+}
+#release .release-item p.info {
+  line-height: 20px;
+  color: #666;
+  margin-bottom: 15px;
+}
+#release .release-item p.info > * {
+  margin-right: 10px;
+}
+#release .release-item .author img {
+  margin-top: -3px;
+}
+#release .release-item div.desc {
+  margin-bottom: 25px;
+}
+#release .release-item div.desc.markdown {
+  background-color: transparent;
+}
+#release .release-item .download a {
+  margin-right: 10px;
+}
+#release .release-item .dot {
+  width: 9px;
+  height: 9px;
+  background-color: #ccc;
+  z-index: 999;
+  position: absolute;
+  display: block;
+  left: -6px;
+  top: 27px;
+  border-radius: 6px;
+  border: 1px solid #FFF;
+}
+#release #release-new-form {
+  padding-top: 15px;
+}
 #admin-wrapper,
 #setting-wrapper {
   padding-bottom: 100px;

public/ng/css/ui.css

@@ -379,6 +379,7 @@ dt {
 }
 .btn-large {
   font-size: 14.4px;
+  padding: .4em .9em;
 }
 .btn-green {
   background-color: #65ad4e;

public/ng/js/gogs.js

@@ -403,6 +403,16 @@ function initRepo() {
     $clone_btn.tipsy({
         fade: true
     });
+
+    // Markdown preview.
+    $('.markdown-preview').click(function() {
+        var $this = $(this);
+        $this.toggleAjax(function (resp) {
+            $($this.data("preview")).html(resp);
+        }, function () {
+            $($this.data("preview")).html("no content");
+        })
+    });
 }
 
 // when user changes hook type, hide/show proper divs
@@ -423,6 +433,13 @@ function initHookTypeChange() {
     });
 }
 
+function initRepoRelease() {
+    $('#release-new-target-branch-list li').click(function() {
+        $('#repo-branch-current').text($(this).text());
+        $('#tag-target').val($(this).text());
+    })
+}
+
 function initRepoSetting() {
     // Options.
     // Confirmation of changing repository name.
@@ -753,8 +770,12 @@ $(document).ready(function () {
         initRepoCreate();
     }
     if ($('#repo-header').length) {
+        initTimeSwitch();
         initRepo();
     }
+    if ($('#release').length) {
+        initRepoRelease();
+    }
     if ($('#repo-setting').length) {
         initRepoSetting();
     }
@@ -819,3 +840,7 @@ function homepage() {
         $('#promo-form').attr('action', Gogs.AppSubUrl + '/user/sign_up');
     });
 }
+
+String.prototype.endsWith = function (suffix) {
+    return this.indexOf(suffix, this.length - suffix.length) !== -1;
+};

public/ng/less/gogs/repository.less

@@ -90,7 +90,8 @@
     }
 }
 #repo-content {
-    padding: 18px 0;
+    padding-top: 18px;
+    padding-bottom: 18px;
 }
 .repo-wide-wrapper {
     padding: 18px;
@@ -383,6 +384,7 @@
 #repo-create-cancel {
     margin-left: 4em;
 }
+#release-new-target-branch-list,
 #repo-create-owner-list {
     top: 30px;
     left: 0;
@@ -410,6 +412,23 @@
         }
     }
 }
+#release-new-target-branch-list {
+    margin-top: -1px;
+    min-width: 150px;
+}
+#release-new-title {
+    margin-top: 10px;
+}
+#release-new-content {
+    width: 100%;
+}
+#release-preview-btn .btn {
+    border-left: 0;
+}
+#release-preview.markdown {
+    margin-top: 5px;
+    background-color: transparent;
+}
 .file-name {
     margin-left: 1em;
 }
@@ -666,3 +685,90 @@
     margin-left: 44px;
     margin-top: -15px;
 }
+#release {
+    h4 {
+        font-size: 18px;
+        small {
+            font-weight: 400;
+            line-height: 1;
+            color: #999;
+        }
+    }
+    #release-head {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #DDD;
+        .btn {
+            margin-left: 10px;
+        }
+    }
+    .release-item {
+        &>div {
+            padding-top: 20px;
+            padding-bottom: 20px;
+        }
+        .label-green:hover {
+            background-color: @labelGreenColor;
+        }
+        .release-meta {
+            position: relative;
+            float: left;
+            padding-right: 15px;
+        }
+        .tag, 
+        .commit {
+            display: block;
+            margin-top: 12px;
+            line-height: 20px;
+        }
+        .release-detail {
+            margin-top: -1px;
+            border-left: 1px solid #DDD;
+            position: relative;
+            float: left;
+            padding-left: 15px;
+        }
+        .title {
+            line-height: 25px;
+            margin-top: 0;
+        }
+        p.info {
+            line-height: 20px;
+            color: #666;
+            margin-bottom: 15px;
+            >* {
+                margin-right: 10px;
+            }
+        }
+        .author {
+            img {
+                margin-top: -3px;
+            }
+        }
+        div.desc {
+            margin-bottom: 25px;
+            &.markdown {
+                background-color: transparent;
+            }
+        }
+        .download a {
+            margin-right: 10px;
+        }
+        .dot {
+            width: 9px;
+            height: 9px;
+            background-color: #ccc;
+            z-index: 999;
+            position: absolute;
+            display: block;
+            left: -6px;
+            top: 27px;
+            border-radius: 6px;
+            border: 1px solid #FFF;
+        }
+    }
+    #release-new-form {
+        padding-top: 15px;
+    }
+}

public/ng/less/ui/form.less

@@ -14,6 +14,7 @@
 }
 .btn-large {
     font-size: 1.2*@baseFontSize;
+    padding: .4em .9em;
 }
 
 .btn-green {

routers/api/v1/miscellaneous.go

@@ -20,6 +20,11 @@ func Markdown(ctx *middleware.Context, form apiv1.MarkdownForm) {
 		return
 	}
 
+	if len(form.Text) == 0 {
+		ctx.Write([]byte(""))
+		return
+	}
+
 	switch form.Mode {
 	case "gfm":
 		ctx.Write(base.RenderMarkdown([]byte(form.Text),

routers/repo/release.go

@@ -19,7 +19,7 @@ const (
 )
 
 func Releases(ctx *middleware.Context) {
-	ctx.Data["Title"] = "Releases"
+	ctx.Data["Title"] = ctx.Tr("repo.release.releases")
 	ctx.Data["IsRepoToolbarReleases"] = true
 	ctx.Data["IsRepoReleaseNew"] = false
 
@@ -35,35 +35,13 @@ func Releases(ctx *middleware.Context) {
 		return
 	}
 
-	// Get default branch.
-	refName := ctx.Repo.Repository.DefaultBranch
-	if !ctx.Repo.GitRepo.IsBranchExist(refName) {
-		brs, err := ctx.Repo.GitRepo.GetBranches()
-		if err != nil {
-			ctx.Handle(500, "GetBranches", err)
-			return
-		}
-		refName = brs[0]
-	}
-	commit, err := ctx.Repo.GitRepo.GetCommitOfBranch(refName)
-	if err != nil {
-		ctx.Handle(500, "GetCommitOfBranch", err)
-		return
-	}
-
-	commitsCount, err := commit.CommitsCount()
-	if err != nil {
-		ctx.Handle(500, "CommitsCount", err)
-		return
-	}
-
 	// Temproray cache commits count of used branches to speed up.
 	countCache := make(map[string]int)
 
 	tags := make([]*models.Release, len(rawTags))
 	for i, rawTag := range rawTags {
-		for _, rel := range rels {
-			if rel.IsDraft && !ctx.Repo.IsOwner {
+		for j, rel := range rels {
+			if rel == nil || (rel.IsDraft && !ctx.Repo.IsOwner) {
 				continue
 			}
 			if rel.TagName == rawTag {
@@ -72,6 +50,7 @@ func Releases(ctx *middleware.Context) {
 					ctx.Handle(500, "GetUserById", err)
 					return
 				}
+				// FIXME: duplicated code.
 				// Get corresponding target if it's not the current branch.
 				if ctx.Repo.BranchName != rel.Target {
 					// Get count if not exists.
@@ -89,11 +68,12 @@ func Releases(ctx *middleware.Context) {
 					}
 					rel.NumCommitsBehind = countCache[ctx.Repo.BranchName] - rel.NumCommits
 				} else {
-					rel.NumCommitsBehind = commitsCount - rel.NumCommits
+					rel.NumCommitsBehind = ctx.Repo.CommitsCount - rel.NumCommits
 				}
 
 				rel.Note = base.RenderMarkdownString(rel.Note, ctx.Repo.RepoLink)
 				tags[i] = rel
+				rels[j] = nil // Mark as used.
 				break
 			}
 		}
@@ -116,8 +96,43 @@ func Releases(ctx *middleware.Context) {
 				ctx.Handle(500, "CommitsCount", err)
 				return
 			}
-			tags[i].NumCommitsBehind = commitsCount - tags[i].NumCommits
+			tags[i].NumCommitsBehind = ctx.Repo.CommitsCount - tags[i].NumCommits
+		}
+	}
+
+	for _, rel := range rels {
+		if rel == nil {
+			continue
+		}
+
+		rel.Publisher, err = models.GetUserById(rel.PublisherId)
+		if err != nil {
+			ctx.Handle(500, "GetUserById", err)
+			return
+		}
+		// FIXME: duplicated code.
+		// Get corresponding target if it's not the current branch.
+		if ctx.Repo.BranchName != rel.Target {
+			// Get count if not exists.
+			if _, ok := countCache[rel.Target]; !ok {
+				commit, err := ctx.Repo.GitRepo.GetCommitOfBranch(ctx.Repo.BranchName)
+				if err != nil {
+					ctx.Handle(500, "GetCommitOfBranch", err)
+					return
+				}
+				countCache[ctx.Repo.BranchName], err = commit.CommitsCount()
+				if err != nil {
+					ctx.Handle(500, "CommitsCount2", err)
+					return
+				}
+			}
+			rel.NumCommitsBehind = countCache[ctx.Repo.BranchName] - rel.NumCommits
+		} else {
+			rel.NumCommitsBehind = ctx.Repo.CommitsCount - rel.NumCommits
 		}
+
+		rel.Note = base.RenderMarkdownString(rel.Note, ctx.Repo.RepoLink)
+		tags = append(tags, rel)
 	}
 	models.SortReleases(tags)
 	ctx.Data["Releases"] = tags
@@ -130,7 +145,8 @@ func NewRelease(ctx *middleware.Context) {
 		return
 	}
 
-	ctx.Data["Title"] = "New Release"
+	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
+	ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
 	ctx.Data["IsRepoToolbarReleases"] = true
 	ctx.Data["IsRepoReleaseNew"] = true
 	ctx.HTML(200, RELEASE_NEW)
@@ -142,7 +158,7 @@ func NewReleasePost(ctx *middleware.Context, form auth.NewReleaseForm) {
 		return
 	}
 
-	ctx.Data["Title"] = "New Release"
+	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["IsRepoToolbarReleases"] = true
 	ctx.Data["IsRepoReleaseNew"] = true
 
@@ -183,9 +199,9 @@ func NewReleasePost(ctx *middleware.Context, form auth.NewReleaseForm) {
 
 	if err = models.CreateRelease(ctx.Repo.GitRepo, rel); err != nil {
 		if err == models.ErrReleaseAlreadyExist {
-			ctx.RenderWithErr("Release with this tag name has already existed", "release/new", &form)
+			ctx.RenderWithErr(ctx.Tr("repo.release.tag_name_already_exist"), RELEASE_NEW, &form)
 		} else {
-			ctx.Handle(500, "release.ReleasesNewPost(IsReleaseExist)", err)
+			ctx.Handle(500, "CreateRelease", err)
 		}
 		return
 	}
@@ -204,15 +220,15 @@ func EditRelease(ctx *middleware.Context) {
 	rel, err := models.GetRelease(ctx.Repo.Repository.Id, tagName)
 	if err != nil {
 		if err == models.ErrReleaseNotExist {
-			ctx.Handle(404, "release.ReleasesEdit(GetRelease)", err)
+			ctx.Handle(404, "GetRelease", err)
 		} else {
-			ctx.Handle(500, "release.ReleasesEdit(GetRelease)", err)
+			ctx.Handle(500, "GetRelease", err)
 		}
 		return
 	}
 	ctx.Data["Release"] = rel
 
-	ctx.Data["Title"] = "Edit Release"
+	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["IsRepoToolbarReleases"] = true
 	ctx.HTML(200, RELEASE_EDIT)
 }
@@ -227,9 +243,9 @@ func EditReleasePost(ctx *middleware.Context, form auth.EditReleaseForm) {
 	rel, err := models.GetRelease(ctx.Repo.Repository.Id, tagName)
 	if err != nil {
 		if err == models.ErrReleaseNotExist {
-			ctx.Handle(404, "release.EditReleasePost(GetRelease)", err)
+			ctx.Handle(404, "GetRelease", err)
 		} else {
-			ctx.Handle(500, "release.EditReleasePost(GetRelease)", err)
+			ctx.Handle(500, "GetRelease", err)
 		}
 		return
 	}
@@ -240,7 +256,7 @@ func EditReleasePost(ctx *middleware.Context, form auth.EditReleaseForm) {
 		return
 	}
 
-	ctx.Data["Title"] = "Edit Release"
+	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["IsRepoToolbarReleases"] = true
 
 	rel.Title = form.Title
@@ -248,7 +264,7 @@ func EditReleasePost(ctx *middleware.Context, form auth.EditReleaseForm) {
 	rel.IsDraft = len(form.Draft) > 0
 	rel.IsPrerelease = form.Prerelease
 	if err = models.UpdateRelease(ctx.Repo.GitRepo, rel); err != nil {
-		ctx.Handle(500, "release.EditReleasePost(UpdateRelease)", err)
+		ctx.Handle(500, "UpdateRelease", err)
 		return
 	}
 	ctx.Redirect(ctx.Repo.RepoLink + "/releases")

templates/repo/home.tmpl

@@ -61,7 +61,7 @@
                 </li>
                 <li id="repo-find-jump" class="repo-jump right">
                     <a href="#">
-                        <button class="btn btn-small btn btn-small btn-gray btn-left-radius"><i class="octicon octicon-list-unordered"></i></button>
+                        <button class="btn btn-small btn-gray btn-left-radius"><i class="octicon octicon-list-unordered"></i></button>
                     </a>
                 </li> -->
             </ul>

templates/repo/release/edit.tmpl

@@ -1,70 +1,59 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
-    <div id="release">
-        <h4 id="release-head">Edit Release</h4>
-        {{template "base/alert" .}}
-        <form id="release-new-form" action="{{.RepoLink}}/releases/edit/{{.Release.TagName}}" method="post" class="form form-inline">
-            {{.CsrfTokenHtml}}
-            <div class="form-group">
-                <b>{{.Release.TagName}}</b>
-                <span class="target-at">@</span>
-                <div class="btn-group" id="release-new-target-select">
-                    <button type="button" class="btn btn-default"><i class="fa fa-code-fork fa-lg fa-m"></i>
-                        <span class="target-text">Target : </span>
-                        <strong id="release-new-target-name"> {{.Release.Target}}</strong>
-                    </button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                        <span class="caret"></span>
-                    </button>
-                    <div class="dropdown-menu clone-group-btn" id="release-new-target-branch-list">
-                        <ul class="list-group">
-                            {{range .Branches}}
-                            <li class="list-group-item">
-                                <a href="#" rel="{{.}}"><i class="fa fa-code-fork"></i>{{.}}</a>
-                            </li>
-                            {{end}}
-                        </ul>
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+    <div id="repo-content" class="clear container">
+        <div id="repo-main" class="left grid-5-6">
+            {{template "ng/base/alert" .}}
+            <div id="release">
+                <h4 id="release-head">{{.i18n.Tr "repo.release.edit_release"}}</h4>
+                <form class="form" id="release-new-form" action="{{.RepoLink}}/releases/edit/{{.Release.TagName}}" method="post">
+                    {{.CsrfTokenHtml}}
+                    <div class="field">
+                        <b>{{.Release.TagName}}</b>
+                        <span class="target-at">@</span>
+                        <strong>{{.Repository.DefaultBranch}}</strong>
                     </div>
-                    <input id="tag-target" type="hidden" name="tag_target" value="{{.Release.Target}}"/>
-                </div>
-                <p class="help-block">Choose an existing tag, or create a new tag on publish</p>
-            </div>
-            <div class="form-group" style="display: block">
-                <input class="form-control input-lg" id="release-new-title" name="title" type="text" placeholder="release title" value="{{.Release.Title}}" />
-            </div>
-            <div class="form-group col-md-8" style="display: block" id="release-new-content-div">
-                <div class="md-help pull-right">
-                    Content with <a href="https://help.github.com/articles/markdown-basics">Markdown</a>
-                </div>
-                <ul class="nav nav-tabs" data-init="tabs">
-                    <li class="release-write active"><a href="#release-textarea" data-toggle="tab">Write</a></li>
-                    <li class="release-preview"><a href="#release-preview" data-toggle="tab" data-ajax="/api/v1/markdown" data-ajax-name="release-preview" data-ajax-context="{{.RepoLink}}" data-ajax-method="post" data-preview="#release-preview">Preview</a></li>
-                </ul>
-                <div class="tab-content">
-                    <div class="tab-pane active" id="release-textarea">
-                        <div class="form-group">
-                            <textarea class="form-control" name="content" id="release-new-content" rows="10" placeholder="Write some content" data-ajax-rel="release-preview" data-ajax-val="val" data-ajax-field="text">{{.Release.Note}}</textarea>
+                    <div class="field">
+                        <input class="ipt ipt-large ipt-radius grid-4-5" id="release-new-title" name="title" placeholder="{{.i18n.Tr "repo.release.release_title"}}" value="{{.Release.Title}}" required>
+                    </div>
+                    <br>
+                    <div class="field grid-4-5">
+                        <div class="md-help pull-right">
+                            {{.i18n.Tr "repo.release.content_with_md" "https://help.github.com/articles/markdown-basics" | Str2html}}
+                        </div>
+                        <div class="clear">
+                            <ul class="tab-nav list-unstyled">
+                                <li class="js-tab-nav js-tab-nav-show left" data-tab-target="#release-textarea">
+                                    <button class="btn btn-medium btn-gray btn-left-radius">{{.i18n.Tr "repo.release.write"}}</button>
+                                </li>
+                                <li class="js-tab-nav left markdown-preview" id="release-preview-btn" data-tab-target="#release-preview" data-ajax="/api/v1/markdown" data-ajax-name="release-preview" data-ajax-context="{{.RepoLink}}" data-ajax-method="post" data-preview="#release-preview">
+                                    <button class="btn btn-medium btn-gray btn-right-radius">{{.i18n.Tr "repo.release.preview"}}</button>
+                                </li>
+                            </ul>
+                        </div>
+                        <div id="release-textarea">
+                            <div class="form-group">
+                                <textarea class="ipt ipt-large ipt-radius" name="content" id="release-new-content" rows="10" placeholder="{{.i18n.Tr "repo.release.content_placeholder"}}" data-ajax-rel="release-preview" data-ajax-val="val" data-ajax-field="text" required>{{.Release.Note}}</textarea>
+                            </div>
+                        </div>
+                        <div class="markdown hide" id="release-preview">{{.i18n.Tr "repo.release.loading"}}...</div>
+                        <br>
+                        <hr>
+                        <div class="text-right">
+                            <input class="ipt-chk" name="prerelease" type="checkbox" {{if .Release.IsPrerelease}}checked{{end}}/>
+                            <span><strong>{{.i18n.Tr "repo.release.prerelease_desc"}}</strong></span>
+                            <p>{{.i18n.Tr "repo.release.prerelease_helper"}}</p>
+                            <button class="btn btn-large btn-green btn-radius">Publish release</button>
+                            {{if .Release.IsDraft}}
+                            <input class="btn btn-large btn-gary btn-radius" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
+                            {{end}}
                         </div>
                     </div>
-                    <div class="tab-pane release-preview-content" id="release-preview">loading...</div>
-                </div>
-            </div>
-            <div class="text-right form-group col-md-8" style="display: block">
-                <hr/>
-                <label for="release-new-pre-release">
-                    <input id="release-new-pre-release" type="checkbox" name="prerelease" {{if .Release.IsPrerelease}}checked{{end}}/>
-                    <strong>This is a pre-release</strong>
-                </label>
-                <p class="help-block">We’ll point out that this release is identified as non-production ready.</p>
-            </div>
-            <div class="text-right form-group col-md-8" style="display: block">
-                <button class="btn-success btn">Publish release</button>
-                <input class="btn btn-default" type="submit" name="draft" value="Save draft"/>
+                </form>
             </div>
-        </form>
+        </div>
+        {{template "repo/sidebar" .}}
     </div>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}

templates/repo/release/list.tmpl

@@ -1,62 +1,71 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
-    <div id="release">
-        <h4 id="release-head">
-            <span class="release"><strong>Releases</strong></span><!--  /
-            <a class="tag" href="{{AppSubUrl}}/{tag_link}">Tags</a> -->
-            <!-- comment : if in tag page, show a.release and span.tag please -->
-        </h4>
-        <ul id="release-list" class="list-unstyled">
-            {{range .Releases}}
-            <li class="release-item clearfix" id="release-{{.Sha1}}">
-                {{if .PublisherId}}
-                <div class="col-md-2 text-right">
-                    {{if .IsDraft}}
-                    <span class="btn btn-primary status pre-release">Draft</span>
-                    {{else if .IsPrerelease}}
-                    <span class="btn btn-warning status pre-release">Pre-Release</span>
-                    {{else}}
-                    <span class="btn btn-success status stable">Stable</span>
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+    <div id="repo-content" class="clear container">
+        <div id="repo-main" class="left grid-5-6">
+            <div id="release">
+                <h4 id="release-head">
+                    <span class="release"><strong>{{.i18n.Tr "repo.release.releases"}}</strong></span><!--  /
+                    <a class="tag" href="{{AppSubUrl}}/{tag_link}">Tags</a> -->
+                    <!-- comment : if in tag page, show a.release and span.tag please -->
+                    <a class="btn" href="{{$.RepoLink}}/releases/new">
+                        <button class="btn btn-medium btn-blue btn-radius">
+                            {{.i18n.Tr "repo.release.new_release"}}
+                        </button>
+                    </a>
+                </h4>
+                <ul id="release-list" class="list-unstyled">
+                    {{range .Releases}}
+                    <li class="release-item clearfix" id="release-{{.Sha1}}">
+                        {{if .PublisherId}}
+                        <div class="grid-1-6 text-right release-meta">
+                            {{if .IsDraft}}
+                            <span class="label label-blue label-radius">{{$.i18n.Tr "repo.release.draft"}}</span>
+                            {{else if .IsPrerelease}}
+                            <span class="label label-orange label-radius">{{$.i18n.Tr "repo.release.prerelease"}}</span>
+                            {{else}}
+                            <span class="label label-green label-radius">{{$.i18n.Tr "repo.release.stable"}}</span>
+                            {{end}}
+                            <a class="tag" href="{{$.RepoLink}}/src/{{.TagName}}" rel="nofollow"><i class="fa fa-tag"></i> {{.TagName}}</a>
+                            <a class="commit" href="{{$.RepoLink}}/src/{{.Sha1}}" rel="nofollow"><i class="fa fa-code"></i> {{ShortSha .Sha1}}</a>
+                        </div>
+                        <div class="grid-9-12 release-detail left">
+                            <h4 class="title"><a href="{{$.RepoLink}}/src/{{.TagName}}">{{.Title}}</a> <small>(<a href="{{$.RepoLink}}/releases/edit/{{.TagName}}" rel="nofollow">{{$.i18n.Tr "repo.release.edit"}}</a>)</small></h4>
+                            <p class="info">
+                                <span class="author"><img class="avatar-20" src="{{.Publisher.AvatarLink}}">&nbsp;&nbsp;
+                                <a href="{{AppSubUrl}}/{{.Publisher.Name}}">{{.Publisher.Name}}</a></span>
+                                {{if .Created}}<span class="time">{{TimeSince .Created $.Lang}}</span>{{end}}
+                                <span class="ahead">{{$.i18n.Tr "repo.release.ahead" .NumCommitsBehind .Target | Str2html}}</span>
+                            </p>
+                            <div class="markdown desc">
+                                {{str2html .Note}}
+                            </div>
+                            <p class="download">
+                                <a class="btn btn-gray btn-large btn-radius" href="{{$.RepoLink}}/archive/{{.TagName}}.zip" rel="nofollow"><i class="fa fa-download"></i> {{$.i18n.Tr "repo.release.source_code"}} (ZIP)</a>
+                                <a class="btn btn-gray btn-large btn-radius" href="{{$.RepoLink}}/archive/{{.TagName}}.tar.gz"><i class="fa fa-download"></i> {{$.i18n.Tr "repo.release.source_code"}} (TAR.GZ)</a>
+                            </p>
+                            <span class="dot">&nbsp;</span>
+                        </div>
+                        {{else}}
+                        <div class="grid-1-6 text-right release-meta">
+                            <a class="commit" href="{{$.RepoLink}}/src/{{.Sha1}}" rel="nofollow"><i class="fa fa-code"></i> {{ShortSha .Sha1}}</a>
+                        </div>
+                        <div class="grid-9-12 release-detail left">
+                            <h5 class="title"><a href="{{$.RepoLink}}/src/{{.TagName}}" rel="nofollow">{{.TagName}}</a> <i class="fa fa-tag"></i></h5>
+                            <p class="download">
+                                <a class="download-link" href="{{$.RepoLink}}/archive/{{.TagName}}.zip" rel="nofollow"><i class="fa fa-download"></i> ZIP</a>
+                                <a class="download-link" href="{{$.RepoLink}}/archive/{{.TagName}}.tar.gz"><i class="fa fa-download"></i> TAR.GZ</a>
+                            </p>
+                            <span class="dot">&nbsp;</span>
+                        </div>
+                        {{end}}
+                    </li>
                     {{end}}
-                    <a class="tag" href="{{$.RepoLink}}/src/{{.TagName}}" rel="nofollow"><i class="fa fa-tag"></i>{{.TagName}}</a>
-                    <a class="commit" href="{{$.RepoLink}}/src/{{.Sha1}}" rel="nofollow"><i class="fa fa-code"></i>{{ShortSha .Sha1}}</a>
-                </div>
-                <div class="col-md-10">
-                    <h4 class="title"><a href="{{$.RepoLink}}/src/{{.TagName}}">{{.Title}}</a> <small>(<a href="{{$.RepoLink}}/releases/edit/{{.TagName}}" rel="nofollow">edit</a>)</small></h4>
-                    <p class="info">
-                        <span class="author"><img class="avatar" src="{{.Publisher.AvatarLink}}" alt="" width="20">&nbsp;&nbsp;
-                        <a href="{{AppSubUrl}}/{{.Publisher.Name}}">{{.Publisher.Name}}</a></span>
-                        {{if .Created}}<span class="time">{{TimeSince .Created $.Lang}}</span>{{end}}
-                        <span class="ahead"><strong>{{.NumCommitsBehind}}</strong> commits to {{.Target}} since this release</span>
-                    </p>
-                    <div class="markdown desc">
-                        {{str2html .Note}}
-                    </div>
-                    <p class="download">
-                        <a class="btn btn-default" href="{{$.RepoLink}}/archive/{{.TagName}}.zip" rel="nofollow"><i class="fa fa-download"></i>Source Code (ZIP)</a>
-                        <a class="btn btn-default" href="{{$.RepoLink}}/archive/{{.TagName}}.tar.gz"><i class="fa fa-download"></i>Source Code (TAR.GZ)</a>
-                    </p>
-                    <span class="dot">&nbsp;</span>
-                </div>
-                {{else}}
-                <div class="col-md-2 text-right">
-                    <a class="commit" href="{{$.RepoLink}}/src/{{.Sha1}}" rel="nofollow"><i class="fa fa-code"></i>{{ShortSha .Sha1}}</a>
-                </div>
-                <div class="col-md-10">
-                    <h5 class="title"><a href="{{$.RepoLink}}/src/{{.TagName}}" rel="nofollow">{{.TagName}}</a><i class="fa fa-tag"></i></h5>
-                    <p class="download">
-                        <a class="download-link" href="{{$.RepoLink}}/archive/{{.TagName}}.zip" rel="nofollow"><i class="fa fa-download"></i>zip</a>
-                        <a class="download-link" href="{{$.RepoLink}}/archive/{{.TagName}}.tar.gz"><i class="fa fa-download"></i>tar.gz</a>
-                    </p>
-                    <span class="dot">&nbsp;</span>
-                </div>
-                {{end}}
-            </li>
-            {{end}}
-        </ul>
+                </ul>
+            </div>
+        </div>
+        {{template "repo/sidebar" .}}
     </div>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}

templates/repo/release/new.tmpl

@@ -1,70 +1,68 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
-    <div id="release">
-        <h4 id="release-head">New Release</h4>
-        {{template "base/alert" .}}
-        <form id="release-new-form" action="{{.RepoLink}}/releases/new" method="post" class="form form-inline">
-            {{.CsrfTokenHtml}}
-            <div class="form-group">
-                <input id="tag-name" name="tag_name" type="text" class="form-control" placeholder="tag name" value="{{.tag_name}}" />
-                <span class="target-at">@</span>
-                <div class="btn-group" id="release-new-target-select">
-                    <button type="button" class="btn btn-default"><i class="fa fa-code-fork fa-lg fa-m"></i>
-                        <span class="target-text">Target : </span>
-                        <strong id="release-new-target-name"> {{.Repository.DefaultBranch}}</strong>
-                    </button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                        <span class="caret"></span>
-                    </button>
-                    <div class="dropdown-menu clone-group-btn" id="release-new-target-branch-list">
-                        <ul class="list-group">
-                            {{range .Branches}}
-                            <li class="list-group-item">
-                                <a href="#" rel="{{.}}"><i class="fa fa-code-fork"></i>{{.}}</a>
-                            </li>
-                            {{end}}
-                        </ul>
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+    <div id="repo-content" class="clear container">
+        <div id="repo-main" class="left grid-5-6">
+            {{template "ng/base/alert" .}}
+            <div id="release">
+                <h4 id="release-head">{{.i18n.Tr "repo.release.new_release"}}</h4>
+                <form class="form" id="release-new-form" action="{{.RepoLink}}/releases/new" method="post">
+                    {{.CsrfTokenHtml}}
+                    <div class="field">
+                        <input class="ipt ipt-large ipt-radius" name="tag_name" value="{{.tag_name}}" placeholder="{{.i18n.Tr "repo.release.tag_name"}}" required>
+                        <span class="target-at">@</span>
+                        <div class="inline-block drop">
+                            <button class="btn btn-gray btn-medium btn-radius drop-bottom">
+                                <i class="octicon octicon-git-branch"></i> {{.i18n.Tr "repo.release.target"}} :
+                                <strong id="repo-branch-current">{{.Repository.DefaultBranch}}</strong>
+                            </button>
+                            <ul class="drop-down menu menu-vertical menu-radius switching-list" id="release-new-target-branch-list">
+                                {{range .Branches}}
+                                <li {{if eq . $.tag_target}}class="checked"{{end}}><a><i class="octicon octicon-check"></i>{{.}}</a></li>
+                                {{end}}
+                            </ul>
+                        </div>
+                        <input id="tag-target" type="hidden" name="tag_target" value="{{.tag_target}}"/>
                     </div>
-                    <input id="tag-target" type="hidden" name="tag_target" value="{{.Repository.DefaultBranch}}"/>
-                </div>
-                <p class="help-block">Choose an existing tag, or create a new tag on publish</p>
-            </div>
-            <div class="form-group" style="display: block">
-                <input class="form-control input-lg" id="release-new-title" name="title" type="text" placeholder="release title" value="{{.title}}" />
-            </div>
-            <div class="form-group col-md-8" style="display: block" id="release-new-content-div">
-                <div class="md-help pull-right">
-                    Content with <a href="https://help.github.com/articles/markdown-basics">Markdown</a>
-                </div>
-                <ul class="nav nav-tabs" data-init="tabs">
-                    <li class="release-write active"><a href="#release-textarea" data-toggle="tab">Write</a></li>
-                    <li class="release-preview"><a href="#release-preview" data-toggle="tab" data-ajax="/api/v1/markdown" data-ajax-name="release-preview" data-ajax-context="{{.RepoLink}}" data-ajax-method="post" data-preview="#release-preview">Preview</a></li>
-                </ul>
-                <div class="tab-content">
-                    <div class="tab-pane active" id="release-textarea">
-                        <div class="form-group">
-                            <textarea class="form-control" name="content" id="release-new-content" rows="10" placeholder="Write some content" data-ajax-rel="release-preview" data-ajax-val="val" data-ajax-field="text">{{.content}}</textarea>
+                    <p class="help">{{.i18n.Tr "repo.release.tag_helper"}}</p>
+                    <div class="field">
+                        <input class="ipt ipt-large ipt-radius grid-4-5" id="release-new-title" name="title" placeholder="{{.i18n.Tr "repo.release.release_title"}}" value="{{.title}}" required>
+                    </div>
+                    <br>
+                    <div class="field grid-4-5">
+                        <div class="md-help pull-right">
+                            {{.i18n.Tr "repo.release.content_with_md" "https://help.github.com/articles/markdown-basics" | Str2html}}
+                        </div>
+                        <div class="clear">
+                            <ul class="tab-nav list-unstyled">
+                                <li class="js-tab-nav js-tab-nav-show left" data-tab-target="#release-textarea">
+                                    <button class="btn btn-medium btn-gray btn-left-radius">{{.i18n.Tr "repo.release.write"}}</button>
+                                </li>
+                                <li class="js-tab-nav left markdown-preview" id="release-preview-btn" data-tab-target="#release-preview" data-ajax="/api/v1/markdown" data-ajax-name="release-preview" data-ajax-context="{{.RepoLink}}" data-ajax-method="post" data-preview="#release-preview">
+                                    <button class="btn btn-medium btn-gray btn-right-radius">{{.i18n.Tr "repo.release.preview"}}</button>
+                                </li>
+                            </ul>
+                        </div>
+                        <div id="release-textarea">
+                            <div class="form-group">
+                                <textarea class="ipt ipt-large ipt-radius" name="content" id="release-new-content" rows="10" placeholder="{{.i18n.Tr "repo.release.content_placeholder"}}" data-ajax-rel="release-preview" data-ajax-val="val" data-ajax-field="text" required>{{.content}}</textarea>
+                            </div>
+                        </div>
+                        <div class="markdown hide" id="release-preview">{{.i18n.Tr "repo.release.loading"}}...</div>
+                        <hr>
+                        <div class="text-right">
+                            <input class="ipt-chk" name="prerelease" type="checkbox" {{if .prerelease}}checked{{end}}/>
+                            <span><strong>{{.i18n.Tr "repo.release.prerelease_desc"}}</strong></span>
+                            <p>{{.i18n.Tr "repo.release.prerelease_helper"}}</p>
+                            <button class="btn btn-large btn-green btn-radius">{{.i18n.Tr "repo.release.publish"}}</button>
+                            <input class="btn btn-large btn-gary btn-radius" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
                         </div>
                     </div>
-                    <div class="tab-pane release-preview-content" id="release-preview">loading...</div>
-                </div>
-            </div>
-            <div class="text-right form-group col-md-8" style="display: block">
-                <hr/>
-                <label for="release-new-pre-release">
-                    <input id="release-new-pre-release" type="checkbox" name="prerelease" {{if .prerelease}}checked{{end}}/>
-                    <strong>This is a pre-release</strong>
-                </label>
-                <p class="help-block">We’ll point out that this release is identified as non-production ready.</p>
-            </div>
-            <div class="text-right form-group col-md-8" style="display: block">
-                <button class="btn-success btn">Publish release</button>
-                <input class="btn btn-default" type="submit" name="draft" value="Save draft"/>
+                </form>
             </div>
-        </form>
+        </div>
+        {{template "repo/sidebar" .}}
     </div>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}