add milestone issue view ui

public/css/gogs.css

@@ -1441,7 +1441,7 @@ html, body {
     margin-left: .8em;
 }
 
-#issue .assignee.dropdown-menu, #issue .assignee ul {
+#issue .assignee.dropdown-menu, #issue .assignee ul, #issue .milestone ul {
     padding: 0;
     margin: 0;
     min-width: 300px;
@@ -1451,17 +1451,33 @@ html, body {
     min-width: 160px;
 }
 
-#issue .issue-bar .assignee .dropdown-menu{
+#issue .issue-bar .assignee .dropdown-menu, #issue .issue-bar .milestone .dropdown-menu {
     padding: 0;
     margin: 0;
 }
 
-#issue .assignee li {
+#issue .assignee li, #issue .milestone li.clear-milestone {
     padding: 4px 12px;
     line-height: 30px;
 }
 
-#issue .assignee li:hover {
+#issue .milestone .milestone-item {
+    padding: 8px 12px;
+}
+
+#issue .milestone li.milestone-item {
+    border-bottom: 1px solid #CCC;
+}
+
+#issue .milestone li.milestone-item:last-child {
+    border-bottom: none;
+}
+
+#issue .milestone .milestone-item p {
+    margin-bottom: 0;
+}
+
+#issue .assignee li:hover, #issue .milestone li.clear-milestone:hover, #issue .milestone li.milestone-item:hover {
     background-color: #e8f0ff;
     cursor: pointer;
 }
@@ -1474,7 +1490,7 @@ html, body {
 
 #issue .issue-bar > div {
     padding-bottom: 8px;
-    margin-bottom: 8px;
+    margin-bottom: 40px;
     border-bottom: 1px solid #CCC;
 }
 
@@ -1482,11 +1498,26 @@ html, body {
     line-height: 30px;
 }
 
-#issue .issue-bar .assignee .action{
+#issue .issue-bar .assignee .action, #issue .issue-bar .milestone .action {
     position: relative;
     margin-top: -8px;
 }
 
+#issue .issue-bar .milestone .completion {
+    margin-top: 20px;
+    margin-bottom: 12px;
+}
+
+#issue .issue-bar .milestone .completion span {
+    display: block;
+    height: 12px;
+    background-color: #77c64a;
+}
+
+#issue .issue-bar .milestone .nav-tabs a {
+    padding: 4px 8px;
+}
+
 /* wrapper and footer */
 
 #wrapper {

public/js/app.js

@@ -569,6 +569,40 @@ function initIssue() {
         }
     });
 
+    // milestone
+
+    $('.issue-bar .dropdown-menu a[data-toggle="tab"]').on("click", function (e) {
+        e.stopPropagation();
+        $(this).tab('show');
+        return false;
+    });
+
+    var $m = $('.milestone');
+    if ($m.data("milestone") > 0) {
+        $('.clear-milestone').toggleShow();
+    }
+    $('.milestone', '#issue').on('click', 'li.milestone-item', function () {
+        var id = $(this).data("id");
+        if (is_issue_bar) {
+            var m = $m.data("milestone");
+            if (id != m) {
+                $.post($m.data("ajax"), {
+                    issue: $('#issue').data("id"),
+                    milestone: id
+                }, function (json) {
+                    if (json.ok) {
+                        window.location.reload();
+                        if (id > 0) {
+                            $('.clear-milestone').toggleShow();
+                        } else {
+                            $('.clear-milestone').toggleHide();
+                        }
+                    }
+                })
+            }
+        }
+        return;
+    });
 }
 
 function initRelease() {

templates/issue/view.tmpl

@@ -100,6 +100,52 @@
             </div>
 
             <div class="issue-bar col-md-2">
+                <div class="milestone" data-milestone="0" data-ajax="{url}">
+                    <div class="pull-right action">
+                        <button class="btn btn-default btn-sm" data-toggle="dropdown">
+                            <i class="fa fa-check-square-o"></i>
+                            <span class="caret"></span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <ul class="list-unstyled">
+                                <li data-id="0" class="clear-milestone hidden"><i class="fa fa-times-circle-o"></i> Clear milestone </li>
+                                <li class="milestone-list">
+                                    <ul class="nav nav-tabs" data-init="tabs">
+                                        <li class="active"><a href="#milestone-open" data-toggle="tab">Open</a></li>
+                                        <li><a href="#milestone-close" data-toggle="tab">Closed</a></li>
+                                    </ul>
+                                    <div class="tab-content">
+                                        <div class="tab-pane active" id="milestone-open">
+                                            <p class="milestone-item">Nothing to show</p>
+                                            <ul class="list-unstyled">
+                                                <li class="milestone-item" data-id="1">
+                                                    <p><strong>Milestone name</strong></p>
+                                                    <p>due to 3 days later</p>
+                                                </li>
+                                                <li class="milestone-item" data-id="1">
+                                                    <p><strong>Milestone name</strong></p>
+                                                    <p>due to 3 days later</p>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <div class="tab-pane" id="milestone-close">
+                                            <ul class="list-unstyled">
+                                                <li class="milestone-item" data-id="1">
+                                                    <p><strong>Milestone name</strong></p>
+                                                    <p>closed 3 days ago</p>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <h4>Milestone</h4>
+                    <p class="completion"><span style="width:80%">&nbsp;</span></p>
+                    <p class="name"><strong><a href="#">Milestone name</a></strong></p>
+                    <p class="name">No milestone</p>
+                </div>
                 <div class="assignee" data-assigned="{{if .Issue.Assignee}}{{.Issue.Assignee.Id}}{{else}}0{{end}}" data-ajax="{{.Issue.Index}}/assignee">{{if .IsRepositoryOwner}}
                     <div class="pull-right action">
                         <button type="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
@@ -110,7 +156,7 @@
                             <ul class="list-unstyled">
                                 <li data-uid="0" class="clear-assignee hidden"><i class="fa fa-times-circle-o"></i> Clear assignee</li>
                                 {{range .Collaborators}}
-                                <li data-uid="{{.Id}}"><img src="{{.AvatarLink}}"><strong>{{.Name}}</strong> {{.FullName}}</li>
+                                <li data-uid="{{.Id}}"><img src="{{.AvatarLink}}"><strong>{{.Name}}</strong></li>
                                 {{end}}
                             </ul>
                         </div>