add milestone page design

cmd/web.go

@@ -405,6 +405,7 @@ func runWeb(*cli.Context) {
 		m.Get("/issues2/", repo.Issues2)
 		m.Get("/pulls2/", repo.PullRequest2)
 		m.Get("/labels2/", repo.Labels2)
+		m.Get("/milestone2/",repo.Milestones2)
 
 		m.Group("", func() {
 			m.Get("/src/*", repo.Home)

public/ng/css/gogs.css

@@ -2019,10 +2019,12 @@ textarea#issue-add-content {
 #issue-list-nav li.right {
   margin-left: 4px;
 }
-#issue-new > a {
+#issue-new > a,
+#milestone-new > a {
   padding: 0 !important;
 }
-#issue-new > a button {
+#issue-new > a button,
+#milestone-new > a button {
   height: 29px;
 }
 #issue-list-menu {
@@ -2127,6 +2129,45 @@ textarea#issue-add-content {
   margin-bottom: 12px;
   border-bottom: 1px dashed #AAA;
 }
+#milestone-list {
+  padding-top: 6px;
+}
+#milestone-list .title-text {
+  font-size: 16px;
+}
+#milestone-list .desc {
+  color: #999;
+}
+#milestone-list .item {
+  padding-bottom: 18px;
+  margin-bottom: 18px;
+  border-bottom: 1px dashed #AAA;
+  position: relative;
+}
+#milestone-list .action {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+#milestone-list .status-bar > .bar {
+  margin: -2px 8px 0 8px;
+  width: 360px;
+  background-color: #DDD;
+  height: 14px;
+  vertical-align: middle;
+}
+#milestone-list .status-bar .opening {
+  background-color: #65ad4e;
+  width: 40%;
+  height: 14px;
+  vertical-align: top;
+}
+#milestone-list .action-bar {
+  margin-top: 8px;
+}
+#milestone-list .action-bar a {
+  margin-left: 12px;
+}
 .org-header-alert .alert {
   margin-top: 10px;
 }

public/ng/less/gogs/issue.less

@@ -243,7 +243,8 @@ textarea#issue-add-content {
   }
 }
 // new issue button
-#issue-new {
+#issue-new,
+#milestone-new{
   > a {
     padding: 0 !important;
     button {
@@ -364,3 +365,45 @@ textarea#issue-add-content {
     border-bottom: 1px dashed #AAA;
   }
 }
+// milestone items
+#milestone-list{
+  padding-top: 6px;
+  .title-text{
+    font-size: 16px;
+  }
+  .desc {
+    color: #999;
+  }
+  .item {
+    padding-bottom: 18px;
+    margin-bottom: 18px;
+    border-bottom: 1px dashed #AAA;
+    position: relative;
+  }
+  .action{
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .status-bar {
+    > .bar {
+      margin: -2px 8px 0 8px;
+      width: 360px;
+      background-color: #DDD;
+      height: 14px;
+      vertical-align:middle;
+    }
+    .opening{
+      background-color: #65ad4e;
+      width: 40%;
+      height: 14px;
+      vertical-align: top;
+    }
+  }
+  .action-bar{
+    margin-top: 8px;
+    a{
+      margin-left: 12px;
+    }
+  }
+}

routers/repo/issue.go

@@ -1133,3 +1133,7 @@ func PullRequest2(ctx *middleware.Context){
 func Labels2(ctx *middleware.Context){
 	ctx.HTML(200,"repo/issue2/labels")
 }
+
+func Milestones2(ctx *middleware.Context){
+	ctx.HTML(200,"repo/milestone2/list")
+}

templates/repo/milestone2/list.tmpl

@@ -0,0 +1,55 @@
+{{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><a href="#">Labels</a></li>
+            <li class="current"><a href="#">Milestones</a></li>
+            <li class="right" id="milestone-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Milestone</button></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-milestone"></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="milestone-list" class="list-no-style">
+                <li class="item" id="milestone-id">
+                    <!--<a class="comment" href="#">
+                        <i class="octicon octicon-comment"></i> 7
+                    </a>-->
+                    <p class="title text-bold">
+                        <i class="octicon octicon-milestone"></i>
+                        <a href="#" class="title-text">Delete account text</a>
+                    </p>
+                    <p class="desc">
+                        <i class="octicon octicon-clock"></i> Updated 3 days ago &nbsp;&nbsp;
+                        <i class="octicon octicon-calendar"></i> Due to Dec 31,2014
+                    </p>
+                    <div class="action">
+                        <p class="status-bar">
+                            <span class="closed">closed 12</span>
+                            <span class="inline-block bar"><span class="inline-block opening"></span></span>
+                            <span class="open">12 open</span>
+                        </p>
+                        <div class="action-bar text-right">
+                            <a href="#">Edit</a>
+                            <a href="#">Delete</a>
+                            <a href="#" class="text-red">Close</a>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}