UI: issues - finish basic frame

.gopmfile

@@ -4,7 +4,7 @@ path = github.com/gogits/gogs
 [deps]
 github.com/bradfitz/gomemcache = commit:72a68649ba
 github.com/Unknwon/cae = commit:2e70a1351b
-github.com/Unknwon/com = commit:188d690b1a
+github.com/Unknwon/com = 
 github.com/Unknwon/i18n = commit:7457d88830
 github.com/Unknwon/macaron = commit:93de4f3fad
 github.com/codegangsta/cli = commit:2bcd11f863

README.md

@@ -71,6 +71,8 @@ According to [Semantic UI](https://github.com/Semantic-Org/Semantic-UI/tree/1.x)
 
 Browser prefixes are present for Internet Explorer 9, but the browser is not officially supported.
 
+The official support minimal size  is 1024*768, UI may still looks right in smaller size but no promises and fixes.
+
 ## Installation
 
 Make sure you install the [prerequisites](http://gogs.io/docs/installation/) first.

README_ZH.md

@@ -58,6 +58,8 @@ Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自
 
 尽管已经使用了 Internet Explorer 9 的浏览器前缀，但该版本的浏览器被没有被正式支持。
 
+官方支持的最小 UI 尺寸为 1024*768，UI 不一定会在更小尺寸的设备上被破坏，但我们无法保证且不会修复。
+
 ## 安装部署
 
 在安装 Gogs 之前，您需要先安装 [基本环境](http://gogs.io/docs/installation/)。

conf/locale/locale_en-US.ini

@@ -316,6 +316,8 @@ migrate_repo = Migrate Repository
 migrate.clone_address = Clone Address
 migrate.invalid_local_path = Invalid local path, it does not exist or not a directory.
 
+forked_from = forked from
+fork_from_self = You cannot fork repository you already owned!
 copy_link = Copy
 click_to_copy = Copy to clipboard
 copied = Copied OK
@@ -338,6 +340,8 @@ branch_and_tags = Branches & Tags
 branches = Branches
 tags = Tags
 issues = Issues
+labels = Labels
+milestones = Milestones
 commits = Commits
 releases = Releases
 file_raw = Raw
@@ -353,6 +357,19 @@ commits.date = Date
 commits.older = Older
 commits.newer = Newer
 
+issues.new = New Issue
+issues.open_tab = %d Open
+issues.close_tab = %d Closed
+issues.filter_label = Label
+issues.filter_milestone = Milestone
+issues.filter_assignee = Assignee
+issues.filter_type = Type
+issues.filter_type.all_issues = All issues
+issues.filter_type.assigned_to_you = Assigned to you
+issues.filter_type.created_by_you = Created by you
+issues.filter_type.mentioning_you = Mentioning you
+issues.opened_by = opened %s by <a href="/%[2]s">%[2]s</a>
+
 settings = Settings
 settings.options = Options
 settings.collaboration = Collaboration

gogs.go

@@ -17,7 +17,7 @@ import (
 	"github.com/gogits/gogs/modules/setting"
 )
 
-const APP_VER = "0.6.1.0719 Beta"
+const APP_VER = "0.6.1.0724 Beta"
 
 func init() {
 	runtime.GOMAXPROCS(runtime.NumCPU())

public/js/gogs.js

@@ -35,6 +35,9 @@ function initInstall() {
 $(document).ready(function () {
     // Semantic UI modules.
     $('.dropdown').dropdown();
+    $('.link.dropdown').dropdown({
+        action: 'hide'
+    });
     $('.slide.up.dropdown').dropdown({
         transition: 'slide up'
     });

public/less/_base.less

@@ -2,7 +2,10 @@
  
 body {
 	font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif,'微软雅黑';
-	background-color: #FFFFFF;
+	background-color: #FAFAFA;
+}
+img {
+	border-radius: 3px;
 }
 .full.height {
 	padding: 0;
@@ -15,10 +18,13 @@ body {
 	width: 100%;
 	padding: 0.7em 0;
 	&.light {
-		background-color: #FFFFFF;
+		background-color: white;
 		border-bottom: 1px solid #DDDDDD;
 		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
 	}
+	.ui.secondary.menu {
+		height: 30px;
+	}
 	.column .menu {
 		margin-top: 0;
 	}
@@ -26,12 +32,36 @@ body {
 		float: left;
 		margin-right: 5px;
 	}
+	.head.link.item {
+		padding-right: 0!important;
+		.dropdown.icon,
+		.menu .octicon {
+			margin-right: 5px;
+		}
+	}
+	.user.avatar {
+		padding: 0;
+		margin-top: 1px;
+	}
 	.searchbox {
   	background-color: rgb(244, 244, 244)!important;
   	&:focus {
   		background-color: rgb(233, 233, 233)!important;
   	}
 	}
+	.octicon {
+    width: 16px;
+    opacity: 1!important;
+    text-align: center;
+  }
+}
+.ui {
+	&.left {
+		float: left;
+	}
+	&.right {
+		float: right;
+	}
 }
 footer {
 	margin-top: @footer-margin!important;
@@ -40,14 +70,6 @@ footer {
 	clear: both;
 	width: 100%;
 	color: #888888;
-	.ui {
-		&.left {
-			float: left;
-		}
-		&.right {
-			float: right;
-		}
-	}
 	.fa {
 		width: 16px;
   	text-align: center;

public/less/_repository.less

@@ -0,0 +1,78 @@
+.repository {
+	@mega-octicon-width: 30px;
+
+	padding-top: 15px;
+	padding-bottom: @footer-margin * 3;
+	.head {
+		height: 75px;
+		padding-top: 20px;
+		background-color: #FCFCFC;
+		.mega-octicon {
+			width: @mega-octicon-width;
+		}
+		a,
+		.fork-flag {
+			font-weight: 300;
+		}
+		.ui.label {
+			margin-top: 5px;
+			vertical-align: top;
+		}
+		.fork-flag {
+			margin-left: @mega-octicon-width + 8px;
+			display: block;
+			font-size: 11px;
+			line-height: 10px;
+			white-space: nowrap;
+		}
+		.button {
+			margin-left: 10px;
+			i {
+				margin-right: 5px;
+			}
+		}
+		.num {
+			font-weight: bold;
+		}
+		.octicon {
+			height: 5px;
+		}
+	}
+	.navbar {
+		height: 60px;
+		padding-top: 20px;
+	}
+	.filter.menu .label.color {
+		padding: 0 8px;
+	}
+	.type.item .menu {
+		  right: 0!important;
+  		left: auto!important;
+	}
+	.issue.list {
+		list-style: none;
+		font-size: 13px;
+		padding-top: 60px;
+		.item {
+			padding-bottom: 10px;
+			border-bottom: 1px dashed #AAA;
+			.title {
+				color: #444;
+				font-size: 15px;
+				font-weight: bold;
+				margin: 0 6px;
+				&:hover {
+					color: #000;
+				}
+			}
+			.comment {
+				padding-right: 10px;
+				color: #666;
+			}
+			.desc {
+				padding-top: 5px;
+				color: #999;
+			}
+		}
+	}
+}

public/less/gogs.less

@@ -3,3 +3,4 @@
 @import "_home";
 @import "_install";
 @import "_form";
+@import "_repository";

routers/repo/issue.go

@@ -41,7 +41,8 @@ var (
 )
 
 func Issues(ctx *middleware.Context) {
-	ctx.Data["Title"] = "Issues"
+	ctx.Data["Title"] = ctx.Tr("repo.issues")
+	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["IsRepoToolbarIssues"] = true
 	ctx.Data["IsRepoToolbarIssuesList"] = true
 

routers/repo/repo.go

@@ -374,7 +374,13 @@ func Action(ctx *middleware.Context) {
 		})
 		return
 	}
-	ctx.Redirect(ctx.Repo.RepoLink)
+
+	redirectTo := ctx.Query("redirect_to")
+	if len(redirectTo) == 0 {
+		redirectTo = ctx.Repo.RepoLink
+	}
+	ctx.Redirect(redirectTo)
+
 	return
 	ctx.JSON(200, map[string]interface{}{
 		"ok": true,

templates/.VERSION

@@ -1 +1 @@
-0.6.1.0719 Beta
+0.6.1.0724 Beta

templates/base/head.tmpl

@@ -38,12 +38,37 @@
 		<div class="following bar light">
 		  <div class="ui page grid">
 		    <div class="column">
+	      	{{if .IsSigned}}
+		      <div class="ui right floated secondary menu">
+		      	<a class="view-ui item user avatar poping up" href="{{AppSubUrl}}/{{.SignedUser.Name}}" data-content="{{.SignedUser.Name}}" data-variation="inverted">
+		      		<img class="img-15" src="{{.SignedUser.AvatarLink}}"/>
+		      		<span class="sr-only">{{.SignedUser.Name}}</span>
+		      	</a>
+						<div class="ui pointing dropdown head link item">
+							<span class="text">
+								<i class="octicon octicon-plus"></i>
+								<i class="dropdown icon"></i>
+							</span>
+			        <div class="menu">
+			          <a class="item" href="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
+			          <a class="item" href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i> {{.i18n.Tr "new_migrate"}}</a>
+			          <a class="item" href="{{AppSubUrl}}/org/create"><i class="octicon octicon-organization"></i> {{.i18n.Tr "new_org"}}</a>
+							</div>
+						</div>
+						{{if .IsAdmin}}
+						<a class="view-ui item poping up {{if .PageIsAdmin}}active{{end}}" href="{{AppSubUrl}}/admin" data-content="{{.i18n.Tr "admin_panel"}}" data-variation="inverted"><i class="octicon icon settings"></i><span class="sr-only">{{.i18n.Tr "admin_panel"}}</span></a>
+						{{end}}
+						<a class="view-ui item poping up {{if .PageIsSettings}}active{{end}}" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "account_settings"}}" data-variation="inverted"><i class="octicon octicon-settings"></i><span class="sr-only">{{.i18n.Tr "account_settings"}}</span></a>
+						<a class="view-ui item poping up" href="{{AppSubUrl}}/user/logout" data-content="{{.i18n.Tr "sign_out"}}" data-variation="inverted"><i class="octicon octicon-sign-out"></i><span class="sr-only">{{.i18n.Tr "sign_out"}}</span></a>
+		      </div>
+	      	{{else}}
 		      <div class="ui right floated secondary menu">
 		      	{{if .ShowRegistrationButton}}
 		      	<a class="view-ui item {{if .PageIsSignUp}}active{{end}}" href="{{AppSubUrl}}/user/sign_up"><i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}</a>
 		      	{{end}}
 		      	<a class="view-ui item {{if .PageIsSignIn}}active{{end}}" href="{{AppSubUrl}}/user/login"><i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}</a>
 		      </div>
+		      {{end}}
 		      <div class="ui secondary menu">
 		      	<img class="img-15 ui image brand" src="{{AppSubUrl}}/img/favicon.png">
 		      	<a class="view-ui item {{if .PageIsHome}}active{{end}}" href="{{AppSubUrl}}/">{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}</a>

templates/install.tmpl

@@ -2,8 +2,6 @@
 <div class="install">
 	<div class="ui middle very relaxed page grid">
 		<div class="sixteen wide center aligned centered column">
-      
-
 			<h3 class="ui top attached header">
 			  {{.i18n.Tr "install.title"}}
 			</h3>

templates/repo/commits.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div class="container clear">
   		{{template "repo/commits_table" .}}
   	</div>

templates/repo/diff.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div class="container clear" id="diff-page">
         {{if .IsDiffCompare }}
         <div class="panel panel-info panel-radius compare-head-box">

templates/repo/header.tmpl

@@ -1,63 +1,29 @@
 {{with .Repository}}
-<div id="repo-header" class="clear">
+<div class="ui middle page head grid">
-    <div class="container clear">
+	<h2 class="ui left">
-        <h1 id="repo-header-name" class="left public">
+		<div class="ui breadcrumb">
 		<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
-            <a class="author" href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
+	  <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
-            <span class="divider">/</span>
+	  <div class="divider"> / </div>
-            <a class="repo text-bold" href="{{$.RepoLink}}">{{.Name}}</a>
+	  <a href="{{$.RepoLink}}">{{.Name}}</a>
-            {{if .IsMirror}}<span class="label label-gray">{{$.i18n.Tr "mirror"}}</span>{{end}}
+	  {{if .IsMirror}}<div class="ui label">{{$.i18n.Tr "mirror"}}</div>{{end}}
-            {{if .IsFork}}<span class="fork-flag">forked from <a href="{{.ForkRepo.RepoLink}}">{{SubStr .ForkRepo.RepoLink 1 -1}}</a></span>{{end}}
+	  {{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.ForkRepo.RepoLink}}">{{SubStr .ForkRepo.RepoLink 1 -1}}</a></div>{{end}}
-        </h1>
+		</div>
-        <ul id="repo-header-meta" class="right menu menu-line">
+	</h2>
-            <li id="repo-header-download" class="drop">
+	<div class="ui right floated secondary menu">
-                <a id="repo-header-download-btn" href="#">
+		<a class="ui black basic button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
-                    <button class="btn btn-black text-bold btn-radius">
+		  <i class="fa fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>
-                        <i class="octicon octicon-cloud-download"></i>
+		  {{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}} <span class="num">{{.NumWatches}}</span>
-                    </button>
 		</a>
-                <div id="repo-header-download-drop" class="drop-down">
+		<a class="ui black basic button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
-                    <div id="repo-clone" class="clear">
+		  <i class="fa fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>
-                        {{if not $.DisableSSH}}
+		  {{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}} <span class="num">{{.NumStars}}</span>
-                        <button class="btn btn-blue left btn-left-radius" id="repo-clone-ssh" data-link="{{$.CloneLink.SSH}}">SSH</button>
+		</a>
-                        {{end}}
+		<a class="ui black basic button {{if $.IsRepositoryOwner}}poping up{{end}}" {{if not $.IsRepositoryOwner}}href="{{AppSubUrl}}/repo/fork?fork_id={{.Id}}"{{end}} {{if $.IsRepositoryOwner}}data-content="{{$.i18n.Tr "repo.fork_from_self"}}"{{end}}>
-                        <button class="btn {{if $.DisableSSH}}btn-blue{{else}}btn-gray{{end}} left" id="repo-clone-https" data-link="{{$.CloneLink.HTTPS}}">HTTPS</button>
+		  <i class="octicon octicon-repo-forked"></i>
-                        <input id="repo-clone-url" class="ipt ipt-disabled left" value="{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}" onclick="this.select();" readonly />
+		  {{$.i18n.Tr "repo.fork"}} <span class="num">{{.NumForks}}</span>
-                        <button id="repo-clone-copy" class="btn btn-black left btn-right-radius" data-copy-val="val" data-copy-from="#repo-clone-url" original-title="{{$.i18n.Tr "repo.click_to_copy"}}" data-original-title="{{$.i18n.Tr "repo.click_to_copy"}}" data-after-title="{{$.i18n.Tr "repo.copied"}}">{{$.i18n.Tr "repo.copy_link"}}</button>
+		</a>
-                        <p class="text-center" id="repo-clone-help">{{$.i18n.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</p>
+	</div>
-                        <hr/>
+</div>
-                        <div class="text-center" id="repo-clone-zip">
+<div class="ui divider"></div>
-                            <a class="btn btn-green btn-radius" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.zip"><i class="octicon octicon-file-zip"></i>ZIP</a>
-                            <a class="btn btn-green btn-radius" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i>TAR.GZ</a>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li id="repo-header-watch">
-                <a id="repo-header-watch-btn" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch">
-                    <button class="btn btn-gray text-bold btn-radius">
-                        <i class="octicon octicon-eye-watch"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}<span class="num">{{.NumWatches}}</span>
-                    </button>
-                </a>
-            </li>
-            <li id="repo-header-star">
-                <a id="repo-header-star-btn" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star">
-                    <button class="btn btn-gray text-bold btn-radius">
-                        <i class="octicon octicon-star"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
-                        <span class="num">{{.NumStars}}</span>
-                    </button>
-                </a>
-            </li>
-            <li id="repo-header-fork">
-                <a id="repo-header-fork-btn" {{if or (not $.IsRepositoryAdmin) $.Owner.IsOrganization}}href="{{AppSubUrl}}/repo/fork?fork_id={{.Id}}"{{end}}>
-                    <button class="btn btn-gray text-bold btn-radius">
-                        <i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
-                        <span class="num">{{.NumForks}}</span>
-                    </button>
-                </a>
-            
-            </li>
-        </ul>
-    </div>
-</div>
 {{end}}

templates/repo/header_old.tmpl

@@ -0,0 +1,63 @@
+{{with .Repository}}
+<div id="repo-header" class="clear">
+    <div class="container clear">
+        <h1 id="repo-header-name" class="left public">
+            <i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
+            <a class="author" href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
+            <span class="divider">/</span>
+            <a class="repo text-bold" href="{{$.RepoLink}}">{{.Name}}</a>
+            {{if .IsMirror}}<span class="label label-gray">{{$.i18n.Tr "mirror"}}</span>{{end}}
+            {{if .IsFork}}<span class="fork-flag">forked from <a href="{{.ForkRepo.RepoLink}}">{{SubStr .ForkRepo.RepoLink 1 -1}}</a></span>{{end}}
+        </h1>
+        <ul id="repo-header-meta" class="right menu menu-line">
+            <li id="repo-header-download" class="drop">
+                <a id="repo-header-download-btn" href="#">
+                    <button class="btn btn-black text-bold btn-radius">
+                        <i class="octicon octicon-cloud-download"></i>
+                    </button>
+                </a>
+                <div id="repo-header-download-drop" class="drop-down">
+                    <div id="repo-clone" class="clear">
+                        {{if not $.DisableSSH}}
+                        <button class="btn btn-blue left btn-left-radius" id="repo-clone-ssh" data-link="{{$.CloneLink.SSH}}">SSH</button>
+                        {{end}}
+                        <button class="btn {{if $.DisableSSH}}btn-blue{{else}}btn-gray{{end}} left" id="repo-clone-https" data-link="{{$.CloneLink.HTTPS}}">HTTPS</button>
+                        <input id="repo-clone-url" class="ipt ipt-disabled left" value="{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}" onclick="this.select();" readonly />
+                        <button id="repo-clone-copy" class="btn btn-black left btn-right-radius" data-copy-val="val" data-copy-from="#repo-clone-url" original-title="{{$.i18n.Tr "repo.click_to_copy"}}" data-original-title="{{$.i18n.Tr "repo.click_to_copy"}}" data-after-title="{{$.i18n.Tr "repo.copied"}}">{{$.i18n.Tr "repo.copy_link"}}</button>
+                        <p class="text-center" id="repo-clone-help">{{$.i18n.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</p>
+                        <hr/>
+                        <div class="text-center" id="repo-clone-zip">
+                            <a class="btn btn-green btn-radius" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.zip"><i class="octicon octicon-file-zip"></i>ZIP</a>
+                            <a class="btn btn-green btn-radius" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i>TAR.GZ</a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li id="repo-header-watch">
+                <a id="repo-header-watch-btn" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch">
+                    <button class="btn btn-gray text-bold btn-radius">
+                        <i class="octicon octicon-eye-watch"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}<span class="num">{{.NumWatches}}</span>
+                    </button>
+                </a>
+            </li>
+            <li id="repo-header-star">
+                <a id="repo-header-star-btn" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star">
+                    <button class="btn btn-gray text-bold btn-radius">
+                        <i class="octicon octicon-star"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
+                        <span class="num">{{.NumStars}}</span>
+                    </button>
+                </a>
+            </li>
+            <li id="repo-header-fork">
+                <a id="repo-header-fork-btn" {{if or (not $.IsRepositoryAdmin) $.Owner.IsOrganization}}href="{{AppSubUrl}}/repo/fork?fork_id={{.Id}}"{{end}}>
+                    <button class="btn btn-gray text-bold btn-radius">
+                        <i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
+                        <span class="num">{{.NumForks}}</span>
+                    </button>
+                </a>
+            
+            </li>
+        </ul>
+    </div>
+</div>
+{{end}}

templates/repo/home.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div id="repo-content" class="clear container">
         <div id="repo-main" class="left grid-5-6">
             <p id="repo-desc">

templates/repo/issue/list.tmpl

@@ -1,120 +1,85 @@
-{{template "base/head_old" .}}
+{{template "base/head" .}}
-{{template "base/navbar" .}}
+<div class="repository">
-{{template "repo/nav" .}}
+	{{template "repo/header" .}}
-{{template "repo/toolbar" .}}
+	<div class="ui middle page grid body">
-<div id="body" class="container">
+		<div class="navbar">
-    <div id="issue">
+			{{template "repo/issue/navbar" .}}
-        <div class="col-md-3 filters">
+			<div class="ui right floated secondary menu">
-            <div class="filter-list">
+				<a class="ui green button" href="{{$.RepoLink}}/issues/new">{{.i18n.Tr "repo.issues.new"}}</a>
-                <ul class="list-unstyled">
-                    <li><a href="{{.RepoLink}}/issues?state={{.State}}"{{if eq .ViewType "all"}} class="active"{{end}}>All Issues <strong class="pull-right">{{.IssueStats.AllCount}}</strong></a></li>
-                    <li><a href="{{.RepoLink}}/issues?type=assigned&state={{.State}}"{{if eq .ViewType "assigned"}} class="active"{{end}}>Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
-                    <li><a href="{{.RepoLink}}/issues?type=created_by&state={{.State}}"{{if eq .ViewType "created_by"}} class="active"{{end}}>Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
-                    <li><a href="{{.RepoLink}}/issues?type=mentioned&state={{.State}}"{{if eq .ViewType "mentioned"}} class="active"{{end}}>Mentioning you <strong class="pull-right">{{.IssueStats.MentionCount}}</strong></a></li>
-                </ul>
 			</div>
-            <div class="label-filter">
+		</div>
-                <h4>Label</h4>
+		<div class="ui divider"></div>
-                <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
+		<div class="ui left">
-                    {{range .Labels}}
+			<div class="ui tiny buttons">
-                    <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
+			  <a class="ui green basic button {{if not .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">
-                        <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
+			  	<i class="octicon octicon-issue-opened"></i>
-                            <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
+			  	{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-                            <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
+			  </a>
-                            <span class="name">{{.Name}}</span>
+			  <a class="ui red basic button {{if .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">
+			  	<i class="octicon octicon-issue-closed"></i>
+			  	{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
 			  </a>
-                        <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
-                    </li>
-                    {{end}}
-                    {{if or .IsRepositoryOwner .IsAdmin}}
-                    <li class="label-change-li" style="display: none">
-                        <form id="label-change-form" action="{{$.RepoLink}}/issues/labels/edit" method="post">
-                            {{.CsrfTokenHtml}}
-                            <div class="input-group label-change-color-picker form-group" style="margin-bottom: 2px">
-                                <input type="text" class="form-control" name="title" required="required" id="label-name-change-ipt"/>
-                                <input type="hidden" name="color" id="label-color-change-ipt" value="#444444"/>
-                                <span class="input-group-addon"><i></i></span>
-                                <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
-                            </div>
-                            <div class="form-group text-right">
-                                <input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
-                                <button class="btn btn-default btn-sm">Save</button>
-                            </div>
-                        </form>
-                    </li>
-                    {{end}}
-                </ul>
-                {{if or .IsRepositoryOwner .IsAdmin}}
-                <button class="btn btn-default btn-block label-button" id="label-manage-btn">Manage Labels</button>
-                <hr/>
-                <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
-                    {{.CsrfTokenHtml}}
-                    <h5><strong>New Label</strong></h5>
-                    <div class="input-group label-color-picker form-group">
-                        <input type="text" class="form-control" name="title" required="required" id="label-name-ipt"/>
-                        <input type="hidden" name="color" id="label-color-ipt" value="#444444"/>
-                        <span class="input-group-addon"><i></i></span>
-                    </div>
-                    <div class="form-group text-right">
-                        <input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
-                        <button class="btn btn-default btn-sm">Create</button>
-                    </div>
-                </form>
-                {{end}}
 			</div>
 		</div>
-        <div class="col-md-9">
+		<div class="ui right floated secondary filter menu">
-            {{template "base/alert" .}}
+			<div class="ui {{if not .Labels}}disabled{{end}} pointing dropdown item">
-            <div class="filter-option">
+				<span class="text">
-                <div class="btn-group">
+					{{.i18n.Tr "repo.issues.filter_label"}}
-                    <a class="btn btn-default issue-open{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">{{.IssueStats.OpenCount}} Open</a>
+					<i class="dropdown icon"></i>
-                    <a class="btn btn-default issue-close{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">{{.IssueStats.ClosedCount}} Closed</a>
-                </div>
-            </div>
-            <div class="issues list-group">
-                {{range .Issues}}{{if .Poster}}
-                <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
-                    <span class="number pull-right">#{{.Index}}</span>
-                    <h5 class="title">
-                        <a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
-                        <span class="labels">
-                            {{range .Labels}}
-                            <span class="label" style="background-color: {{.Color}}">{{.Name}}</span>
-                            {{end}}
 				</span>
-                    </h5>
+        <div class="menu">
-                    <p class="info">
+        	{{range .Labels}}
-                        <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
+        	<a class="item" href="{{$.RepoLink}}/issues?type={{$.ViewType}}&state={{$.State}}&labels={{.Id}}"><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
-                        <a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
+          {{end}}
-                        <span class="time">{{TimeSince .Created $.Lang}}</span>
-                        <span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
-                    </p>
 				</div>
-                {{end}}{{end}}
+			</div>
+			<div class="ui {{if not .Milestones}}disabled{{end}} pointing dropdown item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_milestone"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	{{range .Milestones}}
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.Name}}</a>
+          {{end}}
+				</div>
+			</div>
+			<div class="ui {{if not .Assignees}}disabled{{end}} pointing dropdown item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_assignee"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	{{range .Assignees}}
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.Name}}</a>
+          {{end}}
+				</div>
+			</div>
+			<div class="ui pointing dropdown type item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_type"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.all_issues"}}</a>
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.assigned_to_you"}}</a>
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.created_by_you"}}</a>
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.mentioning_you"}}</a>
 				</div>
 			</div>
 		</div>
+
+		<div class="issue list">
+			{{range .Issues}}
+			{{ $timeStr:= TimeSince .Created $.Lang }}
+      <li class="item">
+      	<div class="ui black label">#{{.Id}}</div>
+      	<a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
+        <p class="desc">{{$.i18n.Tr "repo.issues.opened_by" $timeStr .Poster.Name|Str2html}}</p>
+      	{{if .NumComments}}<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>{{end}}
+      </li>
+      {{end}}
 		</div>
 	</div>
-<script src="{{AppSubUrl}}/js/bootstrap-colorpicker.min.js"></script>
+</div>
-<script>
+{{template "base/footer" .}}
-    $(function(){
-        $('.label-color-picker').colorpicker({
-            input: $('#label-color-ipt')
-        }).on('changeColor', function (ev) {
-            var $ipt = $('#label-color-ipt2');
-            if ($ipt.val().length != 4) {
-                $ipt.val(ev.color.toHex());
-            }
-        });
-        $('.label-change-color-picker').colorpicker({
-            input:$('#label-color-change-ipt')
-        }).on('changeColor', function (ev) {
-            var $ipt = $('#label-color-change-ipt2');
-            if ($ipt.val().length != 4) {
-                $ipt.val(ev.color.toHex());
-            }
-        });
-    });
-</script>
-{{template "base/footer_old" .}}

templates/repo/issue/list_old.tmpl

@@ -0,0 +1,120 @@
+{{template "base/head_old" .}}
+{{template "base/navbar" .}}
+{{template "repo/nav" .}}
+{{template "repo/toolbar" .}}
+<div id="body" class="container">
+    <div id="issue">
+        <div class="col-md-3 filters">
+            <div class="filter-list">
+                <ul class="list-unstyled">
+                    <li><a href="{{.RepoLink}}/issues?state={{.State}}"{{if eq .ViewType "all"}} class="active"{{end}}>All Issues <strong class="pull-right">{{.IssueStats.AllCount}}</strong></a></li>
+                    <li><a href="{{.RepoLink}}/issues?type=assigned&state={{.State}}"{{if eq .ViewType "assigned"}} class="active"{{end}}>Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
+                    <li><a href="{{.RepoLink}}/issues?type=created_by&state={{.State}}"{{if eq .ViewType "created_by"}} class="active"{{end}}>Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
+                    <li><a href="{{.RepoLink}}/issues?type=mentioned&state={{.State}}"{{if eq .ViewType "mentioned"}} class="active"{{end}}>Mentioning you <strong class="pull-right">{{.IssueStats.MentionCount}}</strong></a></li>
+                </ul>
+            </div>
+            <div class="label-filter">
+                <h4>Label</h4>
+                <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
+                    {{range .Labels}}
+                    <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
+                        <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
+                            <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
+                            <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
+                            <span class="name">{{.Name}}</span>
+                        </a>
+                        <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
+                    </li>
+                    {{end}}
+                    {{if or .IsRepositoryOwner .IsAdmin}}
+                    <li class="label-change-li" style="display: none">
+                        <form id="label-change-form" action="{{$.RepoLink}}/issues/labels/edit" method="post">
+                            {{.CsrfTokenHtml}}
+                            <div class="input-group label-change-color-picker form-group" style="margin-bottom: 2px">
+                                <input type="text" class="form-control" name="title" required="required" id="label-name-change-ipt"/>
+                                <input type="hidden" name="color" id="label-color-change-ipt" value="#444444"/>
+                                <span class="input-group-addon"><i></i></span>
+                                <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
+                            </div>
+                            <div class="form-group text-right">
+                                <input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
+                                <button class="btn btn-default btn-sm">Save</button>
+                            </div>
+                        </form>
+                    </li>
+                    {{end}}
+                </ul>
+                {{if or .IsRepositoryOwner .IsAdmin}}
+                <button class="btn btn-default btn-block label-button" id="label-manage-btn">Manage Labels</button>
+                <hr/>
+                <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
+                    {{.CsrfTokenHtml}}
+                    <h5><strong>New Label</strong></h5>
+                    <div class="input-group label-color-picker form-group">
+                        <input type="text" class="form-control" name="title" required="required" id="label-name-ipt"/>
+                        <input type="hidden" name="color" id="label-color-ipt" value="#444444"/>
+                        <span class="input-group-addon"><i></i></span>
+                    </div>
+                    <div class="form-group text-right">
+                        <input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
+                        <button class="btn btn-default btn-sm">Create</button>
+                    </div>
+                </form>
+                {{end}}
+            </div>
+        </div>
+        <div class="col-md-9">
+            {{template "base/alert" .}}
+            <div class="filter-option">
+                <div class="btn-group">
+                    <a class="btn btn-default issue-open{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">{{.IssueStats.OpenCount}} Open</a>
+                    <a class="btn btn-default issue-close{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">{{.IssueStats.ClosedCount}} Closed</a>
+                </div>
+            </div>
+            <div class="issues list-group">
+                {{range .Issues}}{{if .Poster}}
+                <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
+                    <span class="number pull-right">#{{.Index}}</span>
+                    <h5 class="title">
+                        <a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
+                        <span class="labels">
+                            {{range .Labels}}
+                            <span class="label" style="background-color: {{.Color}}">{{.Name}}</span>
+                            {{end}}
+                        </span>
+                    </h5>
+                    <p class="info">
+                        <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
+                        <a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
+                        <span class="time">{{TimeSince .Created $.Lang}}</span>
+                        <span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
+                    </p>
+                </div>
+                {{end}}{{end}}
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="{{AppSubUrl}}/js/bootstrap-colorpicker.min.js"></script>
+<script>
+    $(function(){
+        $('.label-color-picker').colorpicker({
+            input: $('#label-color-ipt')
+        }).on('changeColor', function (ev) {
+            var $ipt = $('#label-color-ipt2');
+            if ($ipt.val().length != 4) {
+                $ipt.val(ev.color.toHex());
+            }
+        });
+        $('.label-change-color-picker').colorpicker({
+            input:$('#label-color-change-ipt')
+        }).on('changeColor', function (ev) {
+            var $ipt = $('#label-color-change-ipt2');
+            if ($ipt.val().length != 4) {
+                $ipt.val(ev.color.toHex());
+            }
+        });
+    });
+</script>
+{{template "base/footer_old" .}}

templates/repo/issue/navbar.tmpl

@@ -0,0 +1,7 @@
+<div class="ui left">
+	<div class="ui compact menu">
+	  <a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">{{.i18n.Tr "repo.issues"}}</a>
+	  <a class="item" href="{{.RepoLink}}/labels">{{.i18n.Tr "repo.labels"}}</a>
+	  <a class="item" href="{{.RepoLink}}/milestones">{{.i18n.Tr "repo.milestones"}}</a>
+	</div>
+</div>

templates/repo/issue2/labels.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div class="issue-main container repo-wide-wrapper">
         <ul id="issue-list-nav" class="menu menu-line">
             <li><a href="#">Issue</a></li>

templates/repo/issue2/list.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div class="issue-main container repo-wide-wrapper">
         <ul id="issue-list-nav" class="menu menu-line">
             <li class="current"><a href="#">Issue</a></li>

templates/repo/milestone2/list.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div class="issue-main container repo-wide-wrapper">
         <ul id="issue-list-nav" class="menu menu-line">
             <li><a href="#">Issue</a></li>

templates/repo/pr2/list.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div class="issue-main container repo-wide-wrapper">
         <ul id="issue-list-nav" class="menu menu-line">
             <li><a href="#">Issue</a></li>

templates/repo/pulls.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div class="clear container repo-wide-wrapper repo-pr">
         <div class="pr-main">
             <div class="pr-title clear">

templates/repo/release/edit.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div id="repo-content" class="clear container">
         <div id="repo-main" class="left grid-5-6">
             {{template "ng/base/alert" .}}

templates/repo/release/list.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div id="repo-content" class="clear container">
         <div id="repo-main" class="left grid-5-6">
             <div id="release">

templates/repo/release/new.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
     <div id="repo-content" class="clear container">
         <div id="repo-main" class="left grid-5-6">
             {{template "ng/base/alert" .}}

templates/repo/settings/collaboration.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div id="setting-wrapper" class="main-wrapper">
 	    <div id="repo-setting" class="container clear">
 	        {{template "repo/settings/nav" .}}

templates/repo/settings/githook_edit.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div id="setting-wrapper" class="main-wrapper">
 	    <div id="repo-setting" class="container clear">
 	        {{template "repo/settings/nav" .}}

templates/repo/settings/githooks.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div id="setting-wrapper" class="main-wrapper">
 	    <div id="repo-setting" class="container clear">
 	        {{template "repo/settings/nav" .}}

templates/repo/settings/hook_new.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div id="setting-wrapper" class="main-wrapper">
 	    <div id="repo-setting" class="container clear">
 	        {{template "repo/settings/nav" .}}

templates/repo/settings/hooks.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div id="setting-wrapper" class="main-wrapper">
 	    <div id="repo-setting" class="container clear">
 	        {{template "repo/settings/nav" .}}

templates/repo/settings/options.tmpl

@@ -1,7 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    {{template "repo/header" .}}
+    {{template "repo/header_old" .}}
 	<div id="setting-wrapper" class="main-wrapper">
 	    <div id="repo-setting" class="container clear">
 	        {{template "repo/settings/nav" .}}