add pull-request and labels page design

cmd/web.go

@@ -387,6 +387,8 @@ func runWeb(*cli.Context) {
 		m.Get("/branches", repo.Branches)
 		m.Get("/archive/*", repo.Download)
 		m.Get("/issues2/", repo.Issues2)
+		m.Get("/pulls2/", repo.PullRequest2)
+		m.Get("/labels2/",repo.Labels2)
 
 		m.Group("", func() {
 			m.Get("/src/*", repo.Home)

public/ng/css/gogs.css

@@ -2002,16 +2002,18 @@ textarea#issue-add-content {
   height: 120px;
   resize: vertical;
 }
+#issue-list-nav {
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 12px;
+}
 #issue-list-nav li > a {
   font-size: 13px;
   font-weight: bold;
-  padding: .4em .9em;
+  padding: .2em .8em;
-  border-radius: .3em;
 }
 #issue-list-nav li.current > a {
   background-color: #0079bc;
   color: #FAFAFA;
-  border-radius: .3em;
 }
 #issue-list-nav li.right {
   margin-left: 4px;
@@ -2020,7 +2022,7 @@ textarea#issue-add-content {
   padding: 0 !important;
 }
 #issue-new > a button {
-  height: 34px;
+  height: 29px;
 }
 #issue-list-menu {
   padding: 16px 0 12px 0;
@@ -2043,38 +2045,86 @@ textarea#issue-add-content {
 #issue-list-menu > .right .mark {
   margin-left: 12px;
 }
-#issue-list .item {
+#issue-list .item,
+#pull-list .item {
   position: relative;
   padding-bottom: 12px;
   margin-bottom: 12px;
   border-bottom: 1px dashed #AAA;
 }
-#issue-list .item .title > .title-text {
+#issue-list .item .title > .title-text,
+#pull-list .item .title > .title-text {
   color: #444;
   font-size: 15px;
   margin: 0 6px;
 }
-#issue-list .comment {
+#issue-list .item .index-num,
+#pull-list .item .index-num {
+  padding: .25em .6em;
+}
+#issue-list .comment,
+#pull-list .comment {
   color: #666;
   position: absolute;
   top: 6px;
   right: 0;
 }
-#issue-list .issue-label a {
+#issue-list .issue-label,
+#pull-list .issue-label {
+  padding: .25em .6em;
+}
+#issue-list .issue-label a,
+#pull-list .issue-label a {
   color: #FFF;
 }
-#issue-list .desc {
+#issue-list .desc,
+#pull-list .desc {
   color: #999;
 }
-#issue-list .desc a {
+#issue-list .desc a,
+#pull-list .desc a {
   color: #999;
 }
-#issue-list .desc a:hover {
+#issue-list .desc a:hover,
+#pull-list .desc a:hover {
   color: #03a2ef;
 }
 #issue-list-pager {
   margin: 18px 0 24px 0;
   font-size: 14px;
+  line-height: 24px;
+}
+#labels-num {
+  margin-right: 1em;
+}
+#label-list .right {
+  margin-left: 1em;
+  color: #999;
+  line-height: 30px;
+}
+#label-list .right i {
+  margin-right: 3px;
+}
+#label-list .right:hover {
+  color: #444444;
+}
+#label-list .num {
+  margin-right: 3px;
+}
+#label-list .issue-num {
+  margin-right: 4em;
+}
+#label-list .label:hover {
+  color: #FFF;
+}
+#label-list .label i {
+  margin-right: 6px;
+}
+#label-list .item {
+  height: 30px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px dashed #AAA;
 }
 .org-header-alert .alert {
   margin-top: 10px;

public/ng/css/ui.css

@@ -735,7 +735,7 @@ ul.menu-radius > li:last-child > a {
   border-color: #F0C36D;
 }
 .label {
-  padding: 2px 6px;
+  padding: .3em .6em .2em .6em;
   color: #ffffff;
 }
 .label-red {
@@ -882,8 +882,8 @@ table td {
   border-bottom-right-radius: .3em;
 }
 .pager .page {
-  padding: 2px 6px;
+  padding: .3em .5em .2em .5em;
-  margin: 0 3px;
+  margin: 0 .3em;
   background-color: #cccccc;
   color: #444444;
 }
@@ -894,8 +894,8 @@ table td {
 }
 .pager .prev,
 .pager .next {
-  padding: 2px 8px;
+  padding: .4em .6em;
-  margin: 0 4px;
+  margin: 0 .3em;
   background-color: #505050;
   color: #fafafa;
 }

public/ng/less/gogs/issue.less

@@ -223,19 +223,19 @@ textarea#issue-add-content {
 }
 // #issue list navigator
 #issue-list-nav {
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 12px;
   li {
     > a {
       font-size: 13px;
       font-weight: bold;
-      padding: .4em .9em;
+      padding: .2em .8em;
-      border-radius: .3em;
     }
   }
   li.current {
     > a {
       background-color: #0079bc;
       color: #FAFAFA;
-      border-radius: .3em;
     }
   }
   li.right {
@@ -247,7 +247,7 @@ textarea#issue-add-content {
   > a {
     padding: 0 !important;
     button {
-      height: 34px;
+      height: 29px;
     }
   }
 }
@@ -282,7 +282,8 @@ textarea#issue-add-content {
   }
 }
 // each issue list item
-#issue-list {
+#issue-list,
+#pull-list {
   .item {
     position: relative;
     padding-bottom: 12px;
@@ -293,6 +294,9 @@ textarea#issue-add-content {
       font-size: 15px;
       margin: 0 6px;
     }
+    .index-num {
+      padding: .25em .6em;
+    }
   }
   .comment {
     color: #666;
@@ -301,6 +305,7 @@ textarea#issue-add-content {
     right: 0;
   }
   .issue-label {
+    padding: .25em .6em;
     a {
       color: #FFF;
     }
@@ -319,4 +324,43 @@ textarea#issue-add-content {
 #issue-list-pager {
   margin: 18px 0 24px 0;
   font-size: 14px;
+  line-height: 24px;
+}
+// labels numbers
+#labels-num {
+  margin-right: 1em;
+}
+// labels list
+#label-list {
+  .right {
+    margin-left: 1em;
+    color: #999;
+    i {
+      margin-right: 3px;
+    }
+    line-height: 30px;
+    &:hover {
+      color: #444444;
+    }
+  }
+  .num {
+    margin-right: 3px;
+  }
+  .issue-num {
+    margin-right: 4em;
+  }
+  .label {
+    &:hover {
+      color: #FFF;
+    }
+    i {
+      margin-right: 6px;
+    }
+  }
+  .item {
+    height: 30px;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px dashed #AAA;
+  }
 }

public/ng/less/ui/label.less

@@ -1,7 +1,7 @@
 @import "var";
 
 .label {
-    padding: 2px 6px;
+    padding: .3em .6em .2em .6em;
     color: @labelFontColor;
 }
 

public/ng/less/ui/pager.less

@@ -2,8 +2,8 @@
 
 .pager{
   .page{
-    padding: 2px 6px;
+    padding: .3em .5em .2em .5em;
-    margin: 0 3px;
+    margin: 0 .3em;
     background-color: @pagerPageBgColor;
     color: @pagerPageColor;
     &:hover,&.hover{
@@ -12,8 +12,8 @@
     }
   }
   .prev,.next{
-    padding: 2px 8px;
+    padding: .4em .6em;
-    margin: 0 4px;
+    margin: 0 .3em;
     background-color: @pagerDirectionBgColor;
     color: @pagerDirectionColor;
     &.invalid{

routers/repo/issue.go

@@ -1125,3 +1125,11 @@ func IssueGetAttachment(ctx *middleware.Context) {
 func Issues2(ctx *middleware.Context){
 	ctx.HTML(200,"repo/issue2/list")
 }
+
+func PullRequest2(ctx *middleware.Context){
+	ctx.HTML(200,"repo/pr2/list")
+}
+
+func Labels2(ctx *middleware.Context){
+	ctx.HTML(200,"repo/issue2/labels")
+}

templates/repo/issue2/labels.tmpl

@@ -0,0 +1,36 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+    <div class="issue-main container repo-wide-wrapper">
+        <ul id="issue-list-nav" class="menu menu-line">
+            <li><a href="#">Issue</a></li>
+            <li><a href="#">Pull Request</a></li>
+            <li class="current"><a href="#">Labels</a></li>
+            <li><a href="#">Milestones</a></li>
+            <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
+            <li class="right"><a href="#">Filter</a></li>
+        </ul>
+        <div id="issue-list-container">
+            <div id="issue-list-menu">
+                <div class="left"><span class="label label-black" id="labels-num">6</span><strong>Labels</strong></div>
+                <div class="clear"></div>
+            </div>
+            <ul id="label-list" class="list-no-style">
+                <li class="item" id="label-id">
+                    <a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a>
+                    <a class="right" href="#"><i class="octicon octicon-pencil"></i>Edit</a>
+                    <a class="right issue-num" href="#"><i class="octicon octicon-issue-opened"></i><strong class="num">12</strong>Issues</a>
+                    <a class="left label clear" href="#" style="background-color: red"><i class="octicon octicon-tag"></i><strong>bug</strong></a>
+                </li>
+                <li class="item" id="label-id">
+                    <a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a>
+                    <a class="right" href="#"><i class="octicon octicon-pencil"></i>Edit</a>
+                    <a class="right issue-num" href="#"><i class="octicon octicon-issue-opened"></i><strong class="num">12</strong>Issues</a>
+                    <a class="left label clear" href="#" style="background-color: red"><i class="octicon octicon-tag"></i><strong>bug</strong></a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}

templates/repo/issue2/list.tmpl

@@ -8,7 +8,7 @@
             <li><a href="#">Pull Request</a></li>
             <li><a href="#">Labels</a></li>
             <li><a href="#">Milestones</a></li>
-            <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green btn-radius text-bold">New Issue</button></a></li>
+            <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
             <li class="right"><a href="#">Filter</a></li>
         </ul>
         <div id="issue-list-container">
@@ -29,9 +29,9 @@
                         <i class="octicon octicon-comment"></i> 7
                     </a>
                     <p class="title text-bold">
-                        <span class="label label-black label-radius index-num">#588</span>
+                        <span class="label label-black index-num">#588</span>
                         <a href="#" class="title-text">Delete account text and/or translations missing</a>
-                        <span class="label label-radius label-red issue-label"><a href="#">bug</a></span>
+                        <span class="label label-red issue-label"><a href="#">bug</a></span>
                     </p>
                     <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
                 </li>
@@ -40,9 +40,9 @@
                         <i class="octicon octicon-comment"></i> 7
                     </a>
                     <p class="title text-bold">
-                        <span class="label label-black label-radius index-num">#588</span>
+                        <span class="label label-black index-num">#588</span>
                         <a href="#" class="title-text">Delete account text and/or translations missing</a>
-                        <span class="label label-radius label-red issue-label"><a href="#">bug</a></span>
+                        <span class="label label-red issue-label"><a href="#">bug</a></span>
                     </p>
                     <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
                 </li>
@@ -51,19 +51,19 @@
                         <i class="octicon octicon-comment"></i> 7
                     </a>
                     <p class="title text-bold">
-                        <span class="label label-black label-radius index-num">#588</span>
+                        <span class="label label-black index-num">#588</span>
                         <a href="#" class="title-text">Disabling attachments breaks issues and comments ajax submit</a>
-                        <span class="label label-radius label-red issue-label"><a href="#">bug</a></span>
+                        <span class="label label-red issue-label"><a href="#">bug</a></span>
                     </p>
                     <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
                 </li>
             </ul>
             <div id="issue-list-pager" class="pager text-center">
-                <a class="prev page-radius invalid" href="#">Prev</a>
+                <a class="prev invalid" href="#">Prev</a>
-                <a class="page page-radius" href="#">1</a>
+                <a class="page" href="#">1</a>
-                <a class="page page-radius hover" href="#">2</a>
+                <a class="page hover" href="#">2</a>
-                <a class="page page-radius" href="#">3</a>
+                <a class="page" href="#">3</a>
-                <a class="next page-radius" href="#">Next</a>
+                <a class="next" href="#">Next</a>
             </div>
         </div>
     </div>

templates/repo/pr2/list.tmpl

@@ -0,0 +1,48 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+    <div class="issue-main container repo-wide-wrapper">
+        <ul id="issue-list-nav" class="menu menu-line">
+            <li><a href="#">Issue</a></li>
+            <li class="current"><a href="#">Pull Request</a></li>
+            <li><a href="#">Labels</a></li>
+            <li><a href="#">Milestones</a></li>
+            <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Pull Request</button></a></li>
+            <li class="right"><a href="#">Filter</a></li>
+        </ul>
+        <div id="issue-list-container">
+            <div id="issue-list-menu">
+                <div class="left">
+                    <span class="mark open hover"><a href="#">
+                        <i class="octicon octicon-git-pull-request"></i> 88 Open
+                    </a></span>
+                    <span class="mark close"><a href="">
+                        <i class="octicon octicon-issue-closed"></i> 12 Close
+                    </a></span>
+                </div>
+                <div class="clear"></div>
+            </div>
+            <ul id="pull-list" class="list-no-style">
+                <li class="item" id="pr-id">
+                    <a class="comment" href="#">
+                        <i class="octicon octicon-comment"></i> 7
+                    </a>
+                    <p class="title text-bold">
+                        <i class="octicon octicon-git-pull-request"></i>
+                        <a href="#" class="title-text">Delete account text and/or translations missing</a>
+                    </p>
+                    <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
+                </li>
+            </ul>
+            <div id="issue-list-pager" class="pager text-center">
+                <a class="prev invalid" href="#">Prev</a>
+                <a class="page" href="#">1</a>
+                <a class="page hover" href="#">2</a>
+                <a class="page" href="#">3</a>
+                <a class="next" href="#">Next</a>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}