New UI merge in progress

5 files changed, 357 insertions, 95 deletions

diff --git a/templates/repo/bare.tmpl b/templates/repo/bare.tmpl
new file mode 100644
index 0000000000..241fea8519
--- /dev/null
+++ b/templates/repo/bare.tmpl
@@ -0,0 +1,50 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper" class="repo-bare">
+    <div id="repo-header" class="clear">
+        <div class="container clear">
+            <h1 id="repo-header-name" class="left public">
+                <i class="mega-octicon octicon-{{if .Repository.IsPrivate}}lock{{else}}repo{{end}}"></i>
+                <a class="author" href="/{{.Repository.Owner.Name}}">{{.Repository.Owner.Name}}</a>
+                <span class="divider">/</span>
+                <a class="repo text-bold" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+            </h1>
+        </div>
+    </div>
+    <div id="repo-content" class="clear container">
+        <div id="repo-bare">
+            <div id="repo-bare-start" class="panel panel-radius">
+                <p class="panel-header"><strong>Quick Start</strong></p>
+                <div class="panel-content">
+                    <div id="repo-clone" class="clear text-center">
+                        <h2>Clone this repository</h2>
+                        <button id="repo-clone-ssh" class="btn btn-blue current left btn-left-radius">SSH</button>
+                        <button id="repo-clone-https" class="btn btn-gray left">HTTPS</button>
+                        <input id="repo-clone-url" type="text" class="ipt ipt-disabled left" value="{{.CloneLink.SSH}}" />
+                        <button id="repo-clone-copy" class="btn btn-black left btn-right-radius">Copy</button>
+                        <p class="text-center" id="repo-clone-help">Need help cloning? Visit <a href="#">Help</a>!</p>
+                        <hr/>
+                    </div>
+                    <div id="repo-bare-cmd" class="text-center">
+                        <h2>Create a new repository on the command line</h2>
+                        <pre class="text-left radius"><code>touch README.md
+git init
+git add README.md
+git commit -m "first commit"
+git remote add origin <span class="clone-url">{{.CloneLink.SSH}}</span>
+git push -u origin master</code></pre>
+                        <br/>
+                        <hr/>
+                    </div>
+                    <div id="repo-bare-remote" class="text-center">
+                        <h2>Push an existing repository from the command line</h2>
+                        <pre class="text-left radius"><code>git remote add origin <span class="clone-url">{{.CloneLink.SSH}}</span>
+git push -u origin master</code></pre>
+                        <br/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index ed01d9772b..6ec713f664 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -1,105 +1,81 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div class="container" id="body">
-    <form action="/repo/create" method="post" class="form-horizontal card" id="repo-create">
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    <form id="repo-create-form" class="form form-align panel panel-radius" action="/repo/create" method="post">
         {{.CsrfTokenHtml}}
-        <h3>Create New Repository</h3>
-        {{template "base/alert" .}}
-        <div class="form-group">
-            <label class="col-md-2 control-label">Owner<strong class="text-danger">*</strong></label>
-            <div class="col-md-8">
-                <div class="btn-group" id="repo-owner-switch">
-                    <button type="button" class="btn btn-default" id="repo-owner-current">
-                        <img src="{{.ContextUser.AvatarLink}}?s=28" alt="user-avatar" title="username" id="repo-owner-avatar">
-                        <span id="repo-owner-name">{{.ContextUser.Name}}</span>
-                    </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 no-propagation">
-                        <ul id="dashboard-switch-menu" class="list-unstyled">
-                            {{range .AllUsers}}
-                            <li data-uid="{{.Id}}"{{if eq .Id $.ContextUser.Id}}class="checked"{{end}}>
-                                <a>
-                                    <i class="fa fa-check"></i>
-                                    <img src="{{.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                                    {{.Name}}
-                                </a>
-                            </li>
-                            {{end}}
-                        </ul>
-                    </div>
+        <div class="panel-header"><h2>{{.i18n.Tr "new_repo"}}</h2></div>
+        <div class="panel-content">
+            {{template "ng/base/alert" .}}
+            <div class="field">
+                <label for="owner" class="req">{{.i18n.Tr "repo.owner"}}</label>
+                <input id="owner" type="hidden" name="uid" value="{{.ContextUser.Id}}" />
+                <div class="inline-block drop">
+                    <a href="#" class="drop-bottom">
+                        <img class="avatar" src="{{.ContextUser.AvatarLink}}" alt="user-avatar">
+                        <strong>{{.ContextUser.Name}}</strong>
+                    </a>
+                    <ul class="drop-down menu menu-vertical menu-radius switching-list" id="repo-create-owner-list">
+                        <li {{if eq $.ContextUser.Id .SignedUser.Id}}class="checked"{{end}}>
+                            <a href="#">
+                                <i class="octicon octicon-check"></i>
+                                <img class="avatar" src="{{.SignedUser.AvatarLink}}" alt="user-avatar">
+                                <strong>{{.SignedUser.Name}}</strong>
+                            </a>
+                        </li>
+                        {{range .Orgs}}
+                        <li {{if eq $.ContextUser.Id .Id}}class="checked"{{end}}>
+                            <a href="#">
+                                <i class="octicon octicon-check"></i>
+                                <img class="avatar" src="{{.AvatarLink}}" alt="user-avatar">
+                                <strong>{{.Name}}</strong>
+                            </a>
+                        </li>
+                        {{end}}
+                    </ul>
                 </div>
             </div>
-            <input type="hidden" value="{{.ContextUser.Id}}" name="uid" id="repo-owner-id"/>
-        </div>
-
-        <div class="form-group {{if .Err_RepoName}}has-error has-feedback{{end}}">
-            <label class="col-md-2 control-label">Repository<strong class="text-danger">*</strong></label>
-            <div class="col-md-8">
-                <input name="repo" type="text" class="form-control" placeholder="Type your repository name" value="{{.repo}}" required="required">
-                <span class="help-block">Great repository names are short and memorable. </span>
+            <div class="field">
+                <label class="req" for="repo-name">{{.i18n.Tr "repo.repo_name"}}</label>
+                <input class="ipt ipt-radius" id="repo-name" name="repo_name" type="text" value="{{.repo_name}}" required />
+                <span class="form-label"></span>
+                <span class="help">{{.i18n.Tr "repo.repo_name_helper" | Str2html}}</span>
             </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-2 control-label">Visibility</label>
-            <div class="col-md-8">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" name="private" {{if .private}}checked{{end}}>
-                        <strong>This repository is private</strong>
-                    </label>
-                </div>
+            <p class="field">
+                <label for="visibility">{{.i18n.Tr "repo.visibility"}}</label>
+                <input class="ipt-chk" id="visibility" name="private" type="checkbox" {{if .private}}checked{{end}} />
+                <span>{{.i18n.Tr "repo.visiblity_helper" | Str2html}}</span>
+            </p>
+            <div class="field clear">
+                <label class="left" for="desc">{{.i18n.Tr "repo.repo_desc"}}</label>
+                <textarea class="ipt ipt-radius" id="desc" name="desc">{{.desc}}</textarea>
             </div>
-        </div>
-
-        <div class="form-group {{if .Err_Description}}has-error has-feedback{{end}}">
-            <label class="col-md-2 control-label">Description</label>
-            <div class="col-md-8">
-                <textarea name="desc" class="form-control" placeholder="Type your repository description">{{.desc}}</textarea>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-2 control-label">Language</label>
-            <div class="col-md-8">
-                <select class="form-control" name="language">
-                    <option value="">Select a language</option>
-                    {{range .LanguageIgns}}<option value="{{.}}">{{.}}</option>{{end}}
+            <p class="field">
+                <label for="lang">{{.i18n.Tr "repo.repo_lang"}}</label>
+                <select id="lang" name="gitignore">
+                    <option>{{.i18n.Tr "repo.repo_lang_helper"}}</option>
+                    {{range .Gitignores}}
+                    <option value="{{.}}" {{if eq . $.gitignore}}selected{{end}}>{{.}}</option>
+                    {{end}}
                 </select>
-                <br>
-                <div>Need more .gitignore? Go <a href="http://www.gitignore.io/">gitignore.io</a>.</div>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-2 control-label">License</label>
-            <div class="col-md-8">
-                <select class="form-control" name="license">
-                    <option value="">Select a license</option>
-                    {{range .Licenses}}<option value="{{.}}">{{.}}</option>{{end}}
+                <label for="license">{{.i18n.Tr "repo.license"}}</label>
+                <select id="license" name="license">
+                    <option>{{.i18n.Tr "repo.license_helper"}}</option>
+                    {{range .Licenses}}
+                    <option value="{{.}}" {{if eq . $.license}}selected{{end}}>{{.}}</option>
+                    {{end}}
                 </select>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" name="initReadme" {{if .initReadme}}checked{{end}}>
-                        <strong>Initialize this repository with a README</strong>
-                    </label>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div class="col-md-offset-2 col-md-8">
-                <button type="submit" class="btn btn-lg btn-primary">Create repository</button>
-                <a href="/" class="text-danger">Cancel</a>
-            </div>
+            </p>
+            <p class="field">
+                <label for="init-readme"></label>
+                <input class="ipt-chk" id="init-readme" name="init_readme" type="checkbox" {{if .init_readme}}checked{{end}} />
+                <strong>{{.i18n.Tr "repo.init_readme"}}</strong>
+            </p>
+            <p class="field">
+                <label for="repo-create-submit"></label>
+                <button class="btn btn-large btn-blue btn-radius" id="repo-create-submit">{{.i18n.Tr "repo.create_repo"}}</button>
+                <a class="btn btn-small btn-gray btn-radius" id="repo-create-cancel" href="/"><strong>{{.i18n.Tr "cancel"}}</strong></a>
+            </p>
         </div>
     </form>
 </div>
-{{template "base/footer" .}}
\ No newline at end of file
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
new file mode 100644
index 0000000000..1958c40998
--- /dev/null
+++ b/templates/repo/home.tmpl
@@ -0,0 +1,161 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    <div id="repo-header" class="clear">
+        <div class="container clear">
+            <h1 id="repo-header-name" class="left public">
+                <i class="mega-octicon octicon-{{if .Repository.IsPrivate}}lock{{else}}repo{{end}}"></i>
+                <a class="author" href="/{{.Owner.Name}}">{{.Owner.Name}}</a>
+                <span class="divider">/</span>
+                <a class="repo text-bold" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+            </h1>
+            <ul id="repo-header-meta" class="right menu menu-line">
+                <li id="repo-header-download" class="inline-block down 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">
+                            <button id="repo-clone-ssh" class="btn btn-blue current left left btn-left-radius">SSH</button>
+                            <button id="repo-clone-https" class="btn btn-gray left">HTTPS</button>
+                            <input id="repo-clone-url" type="text" class="ipt ipt-disabled left" value="{{.CloneLink.SSH}}" />
+                            <button id="repo-clone-copy" class="btn btn-black left btn-right-radius">Copy</button>
+                            <p class="text-center" id="repo-clone-help">Need help cloning? Visit <a href="#">Help</a>!</p>
+                            <hr/>
+                            <div class="text-center" id="repo-clone-zip">
+                                <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.zip"><i class="octicon octicon-file-zip"></i>ZIP</a>
+                                <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.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="#">
+                        <button class="btn btn-gray text-bold btn-radius">
+                            <i class="octicon octicon-eye-watch"></i>{{if .IsWatchingRepo}}Unwatch{{else}}Watch{{end}}
+                            <span class="num">{{.Repository.NumWatches}}</span>
+                        </button>
+                    </a>
+                </li>
+                <li id="repo-header-star">
+                    <a id="repo-header-star-btn" href="#">
+                        <button class="btn btn-gray text-bold btn-radius">
+                            <i class="octicon octicon-star"></i>Star
+                            <span class="num">{{.Repository.NumStars}}</span>
+                        </button>
+                    </a>
+                </li>
+                <li id="repo-header-fork">
+                    <a id="repo-header-fork-btn" href="#">
+                        <button class="btn btn-gray text-bold btn-radius">
+                            <i class="octicon octicon-repo-forked"></i>Fork
+                            <span class="num">{{.Repository.NumForks}}</span>
+                        </button>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div id="repo-content" class="clear container">
+        <div id="repo-main" class="left grid-4-5">
+            <p id="repo-desc">
+                <span class="description">{{.Repository.DescriptionHtml}}</span>
+                <a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
+            </p>
+            <ul id="repo-file-nav" class="clear menu menu-line">
+                <li>
+                    <a href="#">
+                        <button class="btn btn-green btn-small btn-radius" id="repo-compare-btn"><i class="octicon octicon-git-compare"></i></button>
+                    </a>
+                </li>
+                <li id="repo-branch-switch" class="down drop">
+                    <a href="#">
+                        <button class="btn btn-gray btn-small btn-radius">
+                            <i class="octicon octicon-git-branch"></i> Branch :
+                            <strong id="repo-branch-current">{{.BranchName}}</strong>
+                        </button>
+                    </a>
+                    <div class="drop-down panel">
+                        <p class="panel-header text-bold">Branches & Tags</p>
+                        <input id="repo-branch-filter-ipt" class="ipt ipt-large" type="text" placeholder="find branches / tags"/>
+                        <div id="repo-branch-tag">
+                            <ul class="menu menu-line tab-nav clear" id="repo-branch-tab-nav">
+                                <li class="js-tab-nav js-tab-nav-show left" data-tab-target="#repo-branch-list"><a href="#">Branches</a></li>
+                                <li class="js-tab-nav left" data-tab-target="#repo-tag-list"><a href="#">Tags</a></li>
+                            </ul>
+                            <ul class="menu menu-vertical switching-list" id="repo-branch-list">
+                                {{range .Branches}}
+                                <li {{if eq . $.BranchName}}class="checked"{{end}}><a href="{{$.RepoLink}}/src/{{.}}"><i class="octicon octicon-check"></i>master</a></li>
+                                {{end}}
+                            </ul>
+                            <ul class="menu menu-vertical switching-list" id="repo-tag-list">
+                                <li><a href="#"><i class="octicon octicon-check"></i>0.3.3</a></li>
+                                <li><a href="#"><i class="octicon octicon-check"></i>0.4.4</a></li>
+                                <li class="checked"><a href="#"><i class="octicon octicon-check"></i>0.1</a></li>
+                                <li><a href="#"><i class="octicon octicon-check"></i>0.1 beta</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+                <li id="repo-bread" class="breads">
+                    <a class="title bread" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+                    {{ $n := len .Treenames}}
+                    {{ $l := Subtract $n 1}}
+                    {{range $i, $v := .Treenames}}
+                        {{if eq $i $l}}
+                        <span class="bread">{{$v}}</span>
+                        {{else}}
+                        <span class="bread"><a href="{{$.BranchLink}}/{{index $.Paths $i}}">{{$v}}</a></span>
+                        {{end}}
+                    {{end}}
+                </li>
+                <li id="repo-commits-jump" class="repo-jump right">
+                    <a href="#">
+                        <button class="btn btn-small btn-gray btn-radius"><i class="octicon octicon-git-commit"></i></button>
+                    </a>
+                </li>
+                <li id="repo-find-jump" class="repo-jump right">
+                    <a href="#">
+                        <button class="btn btn-small btn-gray btn-radius"><i class="octicon octicon-list-unordered"></i></button>
+                    </a>
+                </li>
+            </ul>
+            {{if .IsFile}}
+                {{template "repo/view_file" .}}
+            {{else}}
+                {{template "repo/view_list" .}}
+            {{end}}
+        </div>
+        <div id="repo-sidebar" class="right grid-1-5">
+            <ul class="menu menu-vertical" id="repo-sidebar-nav">
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/issues"><i class="octicon octicon-issue-opened"></i>Issues<span class="num right label label-blue label-radius">{{.Repository.NumOpenIssues}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/pulls"><i class="octicon octicon-git-pull-request"></i>Pull Requests<span class="num right label label-blue label-radius">{{.Repository.NumOpenPulls}}</span></a>
+                </li>
+                <li class="border-bottom"></li>
+                <li class="head">{{.BranchName}}</li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/commits/{{.BranchName}}"><i class="octicon octicon-history"></i>Commits <span class="num right label label-gray label-radius">{{.CommitsCount}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/branches"><i class="octicon octicon-git-branch"></i>Branches<span class="num right label label-gray label-radius">{{.BrancheCount}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/releases"><i class="octicon octicon-tag"></i>Releases <span class="num right label label-gray label-radius">{{.Repository.NumTags}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="#"><i class="octicon octicon-organization"></i>contributors <span class="num right label label-gray label-radius">43</span></a>
+                </li>
+                <li class="border-bottom"></li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/settings"><i class="octicon octicon-tools"></i>settings</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
new file mode 100644
index 0000000000..be54419404
--- /dev/null
+++ b/templates/repo/view_file.tmpl
@@ -0,0 +1,29 @@
+<div class="panel panel-radius" id="repo-readme">
+    <p class="panel-header">
+        {{if .ReadmeExist}}
+            <i class="icon fa fa-book fa-lg"></i>
+	        {{if .ReadmeInHome}}
+	        <strong class="file-name">{{.FileName}}</strong>
+	        {{else}}
+	        <strong>{{.FileName}}</strong><span class="file-size">{{FileSize .FileSize}}</span>
+	        {{end}}
+	    {{else}}
+        <i class="icon fa fa-file-text-o"></i>
+        <strong class="file-name">{{.FileName}}</strong><span class="file-size">{{FileSize .FileSize}}</span>
+	    {{end}}
+    </p>
+    <div class="{{if .ReadmeExist}}panel-content markdown{{end}} code-view">
+    	{{if .ReadmeExist}}
+    	{{.FileContent | Str2html}}
+    	{{else if .FileSize}}
+        <table>
+            <tbody>
+                <tr>
+                    <td class="lines-num"></td>
+                    <td class="lines-code"><pre class="prettyprint linenums {{if .FileExt}}lang-{{.FileExt}}{{end}}"><code>{{.FileContent}}</code></pre></td>
+                </tr>
+            </tbody>
+        </table>
+    	{{end}}
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
new file mode 100644
index 0000000000..26e7dd4597
--- /dev/null
+++ b/templates/repo/view_list.tmpl
@@ -0,0 +1,46 @@
+<table id="repo-files-table" class="table-border table-block table-radius">
+    <thead>
+    <tr>
+        <th colspan="4" class="clear">
+            <span class="author left">
+                <img class="avatar-24 radius" src="{{AvatarLink .LastCommit.Author.Email}}" />
+                <a href="/user/email2user?email={{Md5 .LastCommit.Author.Email}}"><strong>{{.LastCommit.Author.Name}}</strong>:</a>
+            </span>
+            <span class="last-commit"><a href="{{.RepoLink}}/commit/{{.LastCommit.Id}}" rel="nofollow">
+                <strong>{{ShortSha .LastCommit.Id.String}}</strong></a>
+                <span class="text-truncate">{{.LastCommit.Summary}}</span>
+            </span>
+            <span class="age right">{{TimeSince .LastCommit.Author.When .i18n.Lang}}</span>
+        </th>
+    </tr>
+    </thead>
+    <tbody>
+        {{if .HasParentPath}}
+        <tr class="has-parent">
+            <td class="icon"></td>
+            <td class="name"><a href="{{.BranchLink}}{{.ParentPath}}">..</a></td>
+            <td class="msg"></td>
+            <td class="age"></td>
+        </tr>
+        {{end}}
+        {{range $item := .Files}}
+            {{$entry := index $item 0}}
+            {{$commit := index $item 1}}
+            <tr>
+                <td class="icon">
+                    <span class="octicon octicon-file-{{if $entry.IsDir}}directory{{else}}text{{end}}"></span>
+                </td>
+                <td class="name">
+                    <a href="{{$.BranchLink}}/{{$.TreePath}}{{$entry.Name}}" class="text-truncate">{{$entry.Name}}</a>
+                </td>
+                <td class="msg">
+                    <a class="text-truncate" href="/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.Id}}" rel="nofollow">{{$commit.Summary}}</a>
+                </td>
+                <td class="age">{{TimeSince $commit.Committer.When $.i18n.Lang}}</td>
+            </tr>
+        {{end}}
+    </tbody>
+</table>
+{{if .ReadmeExist}}
+    {{template "repo/view_file" .}}
+{{end}}
\ No newline at end of file