From 8d1fcdaf2cb647edd1bbc031b601afa99a1f8989 Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Fri, 14 Mar 2014 14:17:29 +0800
Subject: [PATCH] repo page ui

---
 public/css/gogs.css         | 63 +++++++++++++++++++++++++++++++++++++
 templates/repo/nav.tmpl     | 11 +++++++
 templates/repo/single.tmpl  | 59 ++++++++++++++++++++++++++++++++++
 templates/repo/toolbar.tmpl | 60 +++++++++++++++--------------------
 4 files changed, 159 insertions(+), 34 deletions(-)

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 7a05b9abe4..160f561ca2 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -137,6 +137,11 @@ body {
     margin-top: 50px;
 }
 
+#gogs-body .btn-default {
+    background-color: #FFF;
+    background-image: linear-gradient(to bottom, #FFF 0, #FAFAFA 100%);
+}
+
 #gogs-body-nav {
     margin-top: 52px;
     margin-bottom: -50px;
@@ -381,6 +386,7 @@ body {
 }
 
 #gogs-feed-right .repo-panel .list-group-item:hover {
+    background-color: #eafffd;
     background-color: rgba(65, 131, 196, 0.1);
 }
 
@@ -392,6 +398,12 @@ body {
 
 /* gogits repo single page */
 
+#gogs-body-nav.gogs-repo-nav {
+    padding-top: 16px;
+    padding-bottom: 30px;
+    height: auto;
+}
+
 .gogs-repo-nav h3 .fa {
     color: #BBB;
 }
@@ -436,6 +448,7 @@ body {
     border-bottom: 1px solid #BBB;
     background-color: #FFF;
     height: 40px;
+    font-size: 14px;
 }
 
 #gogs-repo-toolbar .navbar-default {
@@ -457,4 +470,54 @@ body {
 
 #gogs-repo-toolbar .navbar-collapse {
     padding: 0;
+}
+
+/* #gogs-source */
+
+#gogs-source-toolbar:after {
+    clear: both;
+}
+
+#gogs-source-toolbar .branch-switch {
+    display: inline-block;
+}
+
+#gogs-source-toolbar .breadcrumb {
+    margin: 0 .5em;
+    font-size: 16px;
+    vertical-align: middle;
+    display: inline-block;
+    background-color: transparent;
+}
+
+#gogs-source-table {
+    margin-top: 1.5em;
+    font-size: 14px;
+}
+
+#gogs-source-table .fa{
+    font-size: 15px;
+    width: 16px;
+    text-align: center;
+    color: #666;
+}
+
+#gogs-source-table .name{
+    width: 160px;
+}
+
+#gogs-source-table .size{
+    width: 80px;
+}
+
+#gogs-source-table .date{
+    width: 120px;
+}
+
+#gogs-source-table .is-dir .name {
+    font-weight: bold;
+}
+
+#gogs-source-table.table-hover > tbody > tr:hover > td {
+    background-color: #FEFEFE;
 }
\ No newline at end of file
diff --git a/templates/repo/nav.tmpl b/templates/repo/nav.tmpl
index 5d60d46107..1a9434e860 100644
--- a/templates/repo/nav.tmpl
+++ b/templates/repo/nav.tmpl
@@ -1,6 +1,17 @@
 <div id="gogs-body-nav" class="gogs-repo-nav">
     <div class="container">
         <div class="gogs-repo-btns pull-right">
+            <div class="btn-group" id="gogs-repo-clone">
+                <button type="button" class="btn btn-default"><i class="fa fa-download"></i>Clone</button>
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    <span class="caret"></span>
+                    <span class="sr-only">Toggle Dropdown</span>
+                </button>
+                <div class="dropdown-menu" role="menu">
+                    <div data-val="down-http">http link</div>
+                    <div data-val="down-git">git link</div>
+                </div>
+            </div>
             <div class="btn-group" id="gogs-repo-watching">
                 <button type="button" class="btn btn-default"><i class="fa fa-eye"></i>Watch {x}</button>
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
diff --git a/templates/repo/single.tmpl b/templates/repo/single.tmpl
index 42e09b9a2f..54d06aed40 100644
--- a/templates/repo/single.tmpl
+++ b/templates/repo/single.tmpl
@@ -3,6 +3,65 @@
 {{template "repo/nav" .}}
 {{template "repo/toolbar" .}}
 <div id="gogs-body" class="container">
+    <div id="gogs-source">
+        <div id="gogs-source-toolbar">
+            <button class="btn btn-default pull-right"><i class="fa fa-plus-square"></i>Add File</button>
+            <div class="dropdown branch-switch">
+                <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><i class="fa fa-chain"></i>master&nbsp;&nbsp;
+                    <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                    <li><a class="current" href="/{{.RepositoryLink}}/branch/master">master</a></li>
+                    <li><a href="//{{.RepositoryLink}}/branch/develop">develop</a></li>
+                </ul>
+            </div>
+            <ol class="breadcrumb">
+                <li class="root dir">{{.Repository.Name}}</li>
+                <li class="dir">Dir</li>
+            </ol>
+        </div>
+        <table id="gogs-source-table" class="table table-hover">
+            <thead class="hidden">
+            <tr>
+                <th class="name">Filename</th>
+                <th class="size">Size</th>
+                <th class="date">Date modified</th>
+                <th class="text">Message</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr class="is-dir">
+                <td class="name" colspan="3"><i class="fa fa-folder"></i><a href="#">dir-1</a></td>
+                <td class="message">commit message</td>
+            </tr>
+            <tr class="is-dir">
+                <td class="name" colspan="3"><i class="fa fa-folder"></i><a href="#">dir-2</a></td>
+                <td class="message"> commit message</td>
+            </tr>
+            <tr class="is-dir">
+                <td class="name" colspan="3"><i class="fa fa-folder"></i><a href="#">dir-3</a></td>
+                <td class="message">commit message</td>
+            </tr>
+            <tr>
+                <td class="name"><i class="fa fa-file"></i><a href="#">file-1.txt</a></td>
+                <td class="size">177 B</td>
+                <td class="date"><time datetime="2011-10-20T06:51:01+08:00" data-title="true" title="20 October 2011 06:51">3 years ago</time></td>
+                <td class="text">commit message</td>
+            </tr>
+            <tr>
+                <td class="name"><i class="fa fa-file"></i><a href="#">file-2.txt</a></td>
+                <td class="size">177 B</td>
+                <td class="date"><time datetime="2011-10-20T06:51:01+08:00" data-title="true" title="20 October 2011 06:51">3 years ago</time></td>
+                <td class="text">commit message</td>
+            </tr><tr>
+                <td class="name"><i class="fa fa-file"></i><a href="#">file-3.txt</a></td>
+                <td class="size">177 B</td>
+                <td class="date"><time datetime="2011-10-20T06:51:01+08:00" data-title="true" title="20 October 2011 06:51">3 years ago</time></td>
+                <td class="text">commit message</td>
+            </tr>
+
+            </tbody>
+        </table>
+    </div>
     <h4>Source Files:</h4>
     <ul>
     {{range .Files}}
diff --git a/templates/repo/toolbar.tmpl b/templates/repo/toolbar.tmpl
index a409fcbea7..4a0b60adad 100644
--- a/templates/repo/toolbar.tmpl
+++ b/templates/repo/toolbar.tmpl
@@ -1,40 +1,32 @@
 <div id="gogs-repo-toolbar">
     <div class="container">
         <nav class="navbar navbar-toolbar navbar-default" role="navigation">
-            <div class="container-fluid">
-                <div class="collapse navbar-collapse">
-                    <ul class="nav navbar-nav">
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Branches <b class="caret"></b></a>
-                            <ul class="dropdown-menu">
-                                <li><a href="#">master</a></li>
-                                <li><a href="#">develop</a></li>
-                            </ul>
-                        </li>
-                        <li class="{{if .IsRepoToolbarSource}}active{{end}}"><a href="/{{.RepositoryLink}}">Source</a></li>
-                        <li><a href="#">Commits</a></li>
-                        <li><a href="#">Issues <span class="badge">42</span></a></li>
-                        <li><a href="#">Pull Requests</a></li>
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
-                            <ul class="dropdown-menu">
-                                <li><a href="#">Release</a></li>
-                                <li><a href="#">Wiki</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                    <ul class="nav navbar-nav navbar-right">
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Statistic <b class="caret"></b></a>
-                            <ul class="dropdown-menu">
-                                <li><a href="#">Graphic</a></li>
-                                <li><a href="#">Pulse</a></li>
-                                <li><a href="#">Network</a></li>
-                            </ul>
-                        </li>{{if .IsRepositoryOwner}}
-                        <li class="{{if .IsRepoToolbarSetting}}active{{end}}"><a href="/{{.RepositoryLink}}/settings">Settings</a></li>{{end}}
-                    </ul>
-                </div>
+            <div class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                    <li class="{{if .IsRepoToolbarSource}}active{{end}}"><a href="/{{.RepositoryLink}}">Source</a></li>
+                    <li><a href="/{{.RepositoryLink}}/commits">Commits</a></li>
+                    <li><a href="/{{.RepositoryLink}}/issues">Issues <!--<span class="badge">42</span>--></a></li>
+                    <li><a href="/{{.RepositoryLink}}/pulls">Pull Requests</a></li>
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="/{{.RepositoryLink}}/release">Release</a></li>
+                            <li><a href="//{{.RepositoryLink}}/wiki">Wiki</a></li>
+                        </ul>
+                    </li>
+                </ul>
+                <ul class="nav navbar-nav navbar-right">
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Statistic <b class="caret"></b></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="#">Graphic</a></li>
+                            <li><a href="#">Pulse</a></li>
+                            <li><a href="#">Network</a></li>
+                        </ul>
+                    </li>{{if .IsRepositoryOwner}}
+                    <li class="{{if .IsRepoToolbarSetting}}active{{end}}"><a href="/{{.RepositoryLink}}/settings">Settings</a>
+                    </li>{{end}}
+                </ul>
             </div>
         </nav>
     </div>