From c82807a713b1c69f7781b0c6b8079d9df5e174c2 Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Mon, 19 May 2014 23:47:11 +0800
Subject: [PATCH] add issue label attach-detach ui

---
 public/css/gogs.css       | 48 ++++++++++++++++++++++++++++++++++++---
 public/js/app.js          | 12 ++++++++++
 templates/issue/view.tmpl | 29 +++++++++++++++++++++++
 3 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/public/css/gogs.css b/public/css/gogs.css
index bfca9d83e..e3d423a3d 100755
--- a/public/css/gogs.css
+++ b/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 {
diff --git a/public/js/app.js b/public/js/app.js
index 53948578b..e88dadc2e 100644
--- a/public/js/app.js
+++ b/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() {
diff --git a/templates/issue/view.tmpl b/templates/issue/view.tmpl
index 18ec5faf0..17365e66d 100644
--- a/templates/issue/view.tmpl
+++ b/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">