add label edit and manage ui

3 files changed, 72 insertions, 5 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index a8311188d6..bfca9d83ee 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -1297,7 +1297,7 @@ html, body {
     display: block;
 }
 
-#issue .label-filter a:hover {
+#issue .label-filter li.label-item:hover {
     background-color: #FFF;
 }
 
@@ -1316,6 +1316,12 @@ html, body {
     margin-top: 6px;
 }
 
+#issue .label-filter .del {
+    margin-top: -24px;
+    color: #888;
+    display: none;
+}
+
 #issue .label-filter .label-button {
     margin-top: 16px;
 }
diff --git a/public/js/app.js b/public/js/app.js
index d7514f795d..53948578b9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -612,6 +612,44 @@ function initIssue() {
             $('#milestone').text($('#milestone').data("no-milestone"));
         }
     });
+
+    // labels
+    $('#label-manage-btn').on("click", function () {
+        var $list = $('#label-list');
+        if ($list.hasClass("managing")) {
+            var ids = [];
+            $list.find('li').each(function (i, item) {
+                var id = $(item).data("id");
+                if (id > 0) {
+                    ids.push(id);
+                }
+            });
+            $.post($list.data("ajax"), {"ids": ids.join(",")}, function (json) {
+                if (json.ok) {
+                    window.location.reload();
+                }
+            })
+        } else {
+            $list.addClass("managing");
+            $list.find(".count").hide();
+            $list.find(".del").show();
+            $(this).text("Save Labels");
+            $list.on('click', 'li.label-item', function () {
+                var $this = $(this);
+                $this.after($('.label-change-li').detach().show());
+                $('#label-name-change-ipt').val($this.find('.name').text());
+                var color = $this.find('.color').data("color");
+                $('.label-change-color-picker').colorpicker("setValue", color);
+                $('#label-color-change-ipt').val(color);
+                $('#label-change-id-ipt').val($this.data("id"));
+                return false;
+            });
+        }
+    });
+    $("#label-list").on('click', '.del', function () {
+        $(this).parent().remove();
+        return false;
+    });
 }
 
 function initRelease() {
diff --git a/templates/issue/list.tmpl b/templates/issue/list.tmpl
index 480e047b85..edf855932d 100644
--- a/templates/issue/list.tmpl
+++ b/templates/issue/list.tmpl
@@ -15,19 +15,39 @@
             </div>
             <div class="label-filter">
                 <h4>Label</h4>
-                <ul class="list-unstyled">
+                <ul class="list-unstyled" id="label-list" data-ajax="/{url}">
                     {{range .Labels}}
-                    <li><a href="#"><span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span><span class="color" style="background-color: {{.Color}}"></span>{{.Name}}</a></li>
+                    <li class="label-item" id="label-{{.Id}}" data-id="{{.Id}}"><a href="#">
+                        <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
+                        <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
+                        <span class="name">{{.Name}}</span>
+                    </a>
+                    <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
+                    </li>
                     {{end}}
+                    <li class="label-change-li" style="display: none">
+                        <form id="label-change-form" action="{{$.RepoLink}}/issues/labels/edit" method="post">
+                            {{.CsrfTokenHtml}}
+                            <div class="input-group label-change-color-picker form-group" style="margin-bottom: 2px">
+                                <input type="text" class="form-control" name="title" required="required" id="label-name-change-ipt"/>
+                                <input type="hidden" name="color" id="label-color-change-ipt" value="#444444"/>
+                                <span class="input-group-addon"><i></i></span>
+                                <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
+                            </div>
+                            <div class="form-group text-right">
+                                <button class="btn btn-default btn-sm">Save</button>
+                            </div>
+                        </form>
+                    </li>
                 </ul>
-                <button class="btn btn-default btn-block label-button">Manage Labels</button>
+                <button class="btn btn-default btn-block label-button" id="label-manage-btn">Manage Labels</button>
                 <hr/>
                 <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
                     {{.CsrfTokenHtml}}
                     <h5><strong>New Label</strong></h5>
                     <div class="input-group label-color-picker form-group">
                         <input type="text" class="form-control" name="title" required="required" id="label-name-ipt"/>
-                        <input type="hidden" name="color" id="label-color-ipt"/>
+                        <input type="hidden" name="color" id="label-color-ipt" value="#444444"/>
                         <span class="input-group-addon"><i></i></span>
                     </div>
                     <div class="form-group text-right">
@@ -68,6 +88,9 @@
         $('.label-color-picker').colorpicker({
             input:$('#label-color-ipt')
         });
+        $('.label-change-color-picker').colorpicker({
+            input:$('#label-color-change-ipt')
+        });
     });
 </script>
 {{template "base/footer" .}}