add issue label attach-detach ui

public/css/gogs.css

@@ -1502,7 +1502,7 @@ html, body {
     min-width: 160px;
 }
 
-#issue .issue-bar .assignee .dropdown-menu, #issue .issue-bar .milestone .dropdown-menu {
+#issue .issue-bar .assignee .dropdown-menu, #issue .issue-bar .milestone .dropdown-menu, #issue .issue-bar .labels .dropdown-menu {
     padding: 0;
     margin: 0;
 }
@@ -1549,9 +1549,9 @@ html, body {
     line-height: 30px;
 }
 
-#issue .issue-bar .assignee .action, #issue .issue-bar .milestone .action {
+#issue .issue-bar .assignee .action, #issue .issue-bar .milestone .action, #issue .issue-bar .labels .action {
     position: relative;
-    margin-top: -8px;
+    margin-top: -6px;
 }
 
 #issue .issue-bar .milestone .completion {
@@ -1575,6 +1575,48 @@ html, body {
     margin-right: 12px;
 }
 
+#issue .issue-bar .labels .label-item {
+    padding: 2px 12px 4px 12px;
+    border-radius: 2px;
+    text-shadow: 0 0 2px #444;
+}
+
+#issue .issue-bar .labels .label-white {
+    color: #FFF;
+}
+
+#issue .issue-bar .labels .label-black {
+    color: #444;
+}
+
+#issue .issue-bar .labels .dropdown-menu ul {
+    margin: 0;
+    width: 180px;
+}
+
+#issue .issue-bar .labels .dropdown-menu li {
+    line-height: 30px;
+    padding-left: 12px;
+    border-bottom: 1px solid #DDD;
+}
+
+#issue .issue-bar .labels .dropdown-menu li:hover {
+    background-color: #e8f0ff;
+    cursor: pointer;
+}
+
+#issue .issue-bar .labels .color {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: text-top;
+    margin-right: 6px;
+}
+
+#issue .issue-bar .labels .no-checked .color {
+    margin-left: 26px;
+}
+
 /* wrapper and footer */
 
 #wrapper {

public/js/app.js

@@ -650,6 +650,18 @@ function initIssue() {
         $(this).parent().remove();
         return false;
     });
+    $('.issue-bar .labels .dropdown-menu').on('click', 'li', function (e) {
+        var url = $('.issue-bar .labels').data("ajax");
+        var id = $(this).data('id');
+        var check = $(this).hasClass("checked");
+        $.post(url, {id: id, action: check ? 'detach' : "attach"}, function (json) {
+            if (json.ok) {
+                window.location.reload();
+            }
+        });
+        e.stopPropagation();
+        return false;
+    })
 }
 
 function initRelease() {

templates/issue/view.tmpl

@@ -100,6 +100,35 @@
             </div>
 
             <div class="issue-bar col-md-2">
+                <div class="labels" data-ajax="{url}">
+                    <div class="pull-right action">
+                        <button class="btn btn-default btn-sm" data-toggle="dropdown">
+                            <i class="fa fa-tags"></i>
+                            <span class="caret"></span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right no">
+                            <ul class="list-unstyled">
+                                <li class="checked" data-id="1">
+                                    <span class="check pull-left"><i class="fa fa-check"></i></span>
+                                    <span class="color" style="background-color: #f59e00"></span>
+                                    <span class="name">bug</span>
+                                </li>
+                                <li class="no-checked" data-id="2">
+                                    <span class="color" style="background-color: #f59e00"></span>
+                                    <span class="name">bug</span>
+                                </li>
+                                <li class="no-checked" data-id="3">
+                                    <span class="color" style="background-color: #f59e00"></span>
+                                    <span class="name">bug</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <h4>Labels</h4>
+                    <p id="label-1" class="label-item label-white" style="background-color: #e75316"><strong>bug</strong></p>
+                    <p id="label-2" class="label-item label-white" style="background-color: #e8f0ff"><strong>bug</strong></p>
+                    <p>Not yet</p>
+                </div>
                 <div class="milestone" data-milestone="{{.Milestone.Id}}" data-ajax="{{.Issue.Index}}/milestone">
                     <div class="pull-right action">
                         <button class="btn btn-default btn-sm" data-toggle="dropdown">