add label-edit and label-delete logic

public/ng/css/gogs.css

@@ -2250,15 +2250,15 @@ textarea#issue-add-content {
 #labels-num {
   margin-right: 1em;
 }
-#label-list .right {
+#label-list a.right {
   margin-left: 1em;
   color: #999;
   line-height: 30px;
 }
-#label-list .right i {
+#label-list a.right i {
   margin-right: 3px;
 }
-#label-list .right:hover {
+#label-list a.right:hover {
   color: #444444;
 }
 #label-list .num {
@@ -2279,37 +2279,46 @@ textarea#issue-add-content {
   margin-bottom: 12px;
   border-bottom: 1px dashed #AAA;
 }
-#label-add-form {
-  padding: 18px 0;
-  border-bottom: 1px solid #DDD;
-}
-#label-add-form .ipt {
+#label-add-form .ipt,
+#label-edit-form .ipt,
+#label-delete-form .ipt {
   font-size: 14px;
 }
-#label-add-form .ipt[name=name] {
+#label-add-form .ipt[name=name],
+#label-edit-form .ipt[name=name],
+#label-delete-form .ipt[name=name] {
   width: 300px;
 }
-#label-add-form .btn {
+#label-add-form .btn,
+#label-edit-form .btn,
+#label-delete-form .btn {
   height: 33px;
   font-size: 14px;
   margin-left: 12px;
 }
-#label-color-drop .ipt {
+#label-add-form {
+  padding: 18px 0;
+  border-bottom: 1px solid #DDD;
+}
+#label-delete-form span {
+  line-height: 33px;
+}
+.label-color-drop .ipt {
   width: 100px;
 }
-#label-color-drop .drop-down {
-  width: 128px;
-  top: 22px;
-  left: 50px;
+.label-color-drop .drop-down {
+  width: 128px !important;
+  top: 22px !important;
+  left: 50px !important;
   padding: 12px;
   line-height: 16px;
 }
-#label-color-drop .drop-down a.color {
+.label-color-drop .drop-down a.color {
   width: 16px;
   height: 16px;
   display: inline-block;
 }
-#label-color-drop label {
+.label-color-drop label {
   width: 24px;
   height: 24px;
   display: inline-block;

public/ng/js/gogs/issue_label.js

@@ -14,22 +14,29 @@ $(document).ready(function(){
 
     // render label color input
     var color_input = $('#label-add-color');
-    var color_label = $('#label-color-drop label');
+    var color_label = $('#label-add-form .label-color-drop label');
     color_label.css("background-color",labelColors[0]);
     color_input.val(labelColors[0]);
 
 
     // render label color drop
-    $('#label-color-drop .drop-down')
-        .html(colorDropHtml)
-        .on("click","a",function(){
-            var color = $(this).data("color-hex");
-            color_label.css("background-color",color);
-            color_input.val(color);
-        });
+    function render_color_drop($e){
+        $e.find('.label-color-drop .drop-down')
+            .html(colorDropHtml)
+            .on("click","a",function(){
+                var $form = $(this).parents(".form");
+                var color_label = $form.find(".label-color-drop label");
+                var color_input = $form.find("input[name=color]");
+                var color = $(this).data("color-hex");
+                color_label.css("background-color",color);
+                color_input.val(color);
+            });
+    }
+
 
     //  color drop visible
     var form = $('#label-add-form');
+    render_color_drop(form);
     $('#label-new-btn').on("click",function(){
         if(form.hasClass("hidden")){
             form.removeClass("hidden");
@@ -37,7 +44,54 @@ $(document).ready(function(){
     });
     $('#label-cancel-btn').on("click",function(){
         form.addClass("hidden");
-    })
+    });
+
+    // label edit form render
+    var $edit_form_tpl = $("#label-edit-form-tpl");
+    $("#label-list").on("click","a.edit",function(){
+        var $label_item = $(this).parents(".item");
+        var $clone_form = $edit_form_tpl.clone();
+        render_color_drop($clone_form);
+
+        // add default color
+        var color_label = $clone_form.find(".label-color-drop label");
+        var color_input = $clone_form.find("input[name=color]");
+        var color = $label_item.find(".label").data("color-hex");
+        color_label.css("background-color",color);
+        color_input.val(color);
 
+        // add label name
+        $clone_form.find("input[name=name]").val($label_item.find(".label").text());
+
+        // add label id
+        $clone_form.find("input[name=id]").val($label_item.attr("id").replace("label-",""));
+
+        // append form
+        $label_item.after($clone_form.show());
+
+        // add cancel button event
+        $('#label-edit-cancel-btn').on("click",function(){
+           $clone_form.remove();
+        });
+
+    });
+
+    // label delete form render
+    var $del_form_tpl = $('#label-delete-form-tpl');
+    $("#label-list").on("click","a.delete",function(){
+        var $label_item = $(this).parents(".item");
+        var $clone_form = $del_form_tpl.clone();
+
+        // add label id
+        $clone_form.find("input[name=id]").val($label_item.attr("id").replace("label-",""));
+
+        // append form
+        $label_item.after($clone_form.show());
+
+        // add cancel button event
+        $('#label-del-cancel-btn').on("click",function(){
+            $clone_form.remove();
+        });
+    });
 
 });

public/ng/less/gogs/issue.less

@@ -384,7 +384,7 @@ textarea#issue-add-content {
 }
 // labels list
 #label-list {
-  .right {
+  a.right {
     margin-left: 1em;
     color: #999;
     i {
@@ -416,10 +416,10 @@ textarea#issue-add-content {
     border-bottom: 1px dashed #AAA;
   }
 }
-// label add form
-#label-add-form{
-  padding: 18px 0;
-  border-bottom: 1px solid #DDD;
+// label add form, label edit form
+#label-add-form,
+#label-edit-form,
+#label-delete-form{
   .ipt{
     font-size: 14px;
   }
@@ -432,15 +432,24 @@ textarea#issue-add-content {
     margin-left: 12px;
   }
 }
+#label-add-form{
+  padding: 18px 0;
+  border-bottom: 1px solid #DDD;
+}
+#label-delete-form{
+  span{
+    line-height: 33px;
+  }
+}
 // label color drop
-#label-color-drop{
+.label-color-drop{
   .ipt{
     width:100px;
   }
   .drop-down{
-    width:128px;
-    top:22px;
-    left:50px;
+    width:128px !important;
+    top:22px !important;
+    left:50px !important;
     padding: 12px;
     line-height: 16px;
     a.color{

templates/repo/issue2/labels.tmpl

@@ -12,7 +12,7 @@
         </ul>
         <form id="label-add-form" action="#" class="form clear hidden">
             <input type="text" class="ipt" name="name" placeholder="label name" id="label-add-name"/>
-            <div class="inline down drop" id="label-color-drop">
+            <div class="inline down drop label-color-drop">
                 <label for="label-add-color"></label>
                 <input class="ipt" name="color" type="text" placeholder="color" id="label-add-color"/>
                 <div class="drop-down">
@@ -30,10 +30,10 @@
             </div>
             <ul id="label-list" class="list-no-style">
                 <li class="item" id="label-id">
-                    <a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a>
-                    <a class="right" href="#"><i class="octicon octicon-pencil"></i>Edit</a>
+                    <a class="right delete" href="#"><i class="octicon octicon-x"></i>Delete</a>
+                    <a class="right edit" href="#"><i class="octicon octicon-pencil"></i>Edit</a>
                     <a class="right issue-num" href="#"><i class="octicon octicon-issue-opened"></i><strong class="num">12</strong>Issues</a>
-                    <a class="left label clear" href="#" style="background-color: red"><i class="octicon octicon-tag"></i><strong>bug</strong></a>
+                    <a class="left label clear" href="#" style="background-color: #0052cc" data-color-hex="#0052cc"><i class="octicon octicon-tag"></i><strong>bug</strong></a>
                 </li>
                 <li class="item" id="label-id">
                     <a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a>
@@ -45,4 +45,30 @@
         </div>
     </div>
 </div>
+<div id="label-edit-form-tpl" class="hidden">
+    <li class="item"><form id="label-edit-form" action="#" class="form clear">
+        <input type="text" class="ipt" name="name" placeholder="label name" id="label-edit-name"/>
+        <input type="hidden" name="id" value="id"/>
+        <div class="inline down drop label-color-drop">
+            <label for="label-add-color"></label>
+            <input class="ipt" name="color" type="text" placeholder="color" id="label-edit-color"/>
+            <div class="drop-down">
+                <a href="#" class="color" style="background: red"></a>
+                <a href="#" class="color" style="background: green"></a>
+            </div>
+        </div>
+        <button class="btn btn-gray right" type="button" id="label-edit-cancel-btn">Cancel</button>
+        <button class="btn btn-green right" id="label-edit-btn">Save Changes</button>
+    </form></li>
+</div>
+<div id="label-delete-form-tpl" class="hidden">
+    <li class="item">
+        <form id="label-delete-form" action="#">
+            <input type="hidden" name="id" value="id"/>
+            <span><strong class="text-red">Are you sure?</strong> Deleting a label will remove it from all issues and pull requests.</span>
+            <button class="btn btn-gray right" type="button" id="label-del-cancel-btn">Cancel</button>
+            <button class="btn btn-red right" id="label-del-btn">Delete</button>
+        </form>
+    </li>
+</div>
 {{template "ng/base/footer" .}}