add label-create ui elements

public/ng/css/gogs.css

@@ -2023,10 +2023,12 @@ textarea#issue-add-content {
   margin-left: 4px;
 }
 #issue-new > a,
+#label-new > a,
 #milestone-new > a {
   padding: 0 !important;
 }
 #issue-new > a button,
+#label-new > a button,
 #milestone-new > a button {
   height: 29px;
 }
@@ -2171,6 +2173,43 @@ 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 {
+  font-size: 14px;
+}
+#label-add-form .ipt[name=name] {
+  width: 300px;
+}
+#label-add-form .btn {
+  height: 33px;
+  font-size: 14px;
+  margin-left: 12px;
+}
+#label-color-drop .ipt {
+  width: 100px;
+}
+#label-color-drop .drop-down {
+  width: 128px;
+  top: 22px;
+  left: 50px;
+  padding: 12px;
+  line-height: 16px;
+}
+#label-color-drop .drop-down a.color {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
+#label-color-drop label {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  margin: 0 1em;
+  vertical-align: middle;
+}
 #milestone-list {
   padding-top: 6px;
 }

public/ng/js/gogs.js

@@ -2,6 +2,7 @@
 // @codekit-prepend "lib/lib.js"
 // @codekit-prepend "utils/tabs.js"
 // @codekit-prepend "utils/preview.js"
+// @codekit-prepend "gogs/issue_label.js"
 // @codekit-prepend "lib/jquery.tipsy.js"
 
 var Gogs = {};

public/ng/js/gogs/issue_label.js

@@ -0,0 +1,43 @@
+// when dom ready, init issue label events
+$(document).ready(function(){
+    var labelColors = ["#e11d21","#EB6420","#FBCA04","#009800",
+    "#006B75","#207DE5","#0052cc","#53E917",
+    "#F6C6C7","#FAD8C7","#FEF2C0","#BFE5BF",
+    "#BFDADC","#C7DEF8","#BFD4F2","#D4C5F9"];
+
+    var colorDropHtml = "";
+    labelColors.forEach(function(item){
+       colorDropHtml += '<a class="color" style="background-color:'+item+'" data-color-hex="'+item+'"></a>';
+    });
+
+
+
+    // render label color input
+    var color_input = $('#label-add-color');
+    var color_label = $('#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);
+        });
+
+    //  color drop visible
+    var form = $('#label-add-form');
+    $('#label-new-btn').on("click",function(){
+        if(form.hasClass("hidden")){
+            form.removeClass("hidden");
+        }
+    });
+    $('#label-cancel-btn').on("click",function(){
+        form.addClass("hidden");
+    })
+
+
+});

public/ng/less/gogs/issue.less

@@ -244,6 +244,7 @@ textarea#issue-add-content {
 }
 // new issue button
 #issue-new,
+#label-new,
 #milestone-new{
   > a {
     padding: 0 !important;
@@ -415,6 +416,47 @@ textarea#issue-add-content {
     border-bottom: 1px dashed #AAA;
   }
 }
+// label add form
+#label-add-form{
+  padding: 18px 0;
+  border-bottom: 1px solid #DDD;
+  .ipt{
+    font-size: 14px;
+  }
+  .ipt[name=name]{
+    width: 300px;
+  }
+  .btn{
+    height: 33px;
+    font-size: 14px;
+    margin-left: 12px;
+  }
+}
+// label color drop
+#label-color-drop{
+  .ipt{
+    width:100px;
+  }
+  .drop-down{
+    width:128px;
+    top:22px;
+    left:50px;
+    padding: 12px;
+    line-height: 16px;
+    a.color{
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+    }
+  }
+  label{
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin: 0 1em;
+    vertical-align: middle;
+  }
+}
 // milestone items
 #milestone-list{
   padding-top: 6px;

templates/ng/base/head.tmpl

@@ -34,6 +34,7 @@
     	<script src="{{AppSubUrl}}/ng/js/lib/jquery.magnific-popup.min.js"></script>
         <script src="{{AppSubUrl}}/ng/js/utils/tabs.js"></script>
         <script src="{{AppSubUrl}}/ng/js/utils/preview.js"></script>
+		<script src="{{AppSubUrl}}/ng/js/gogs/issue_label.js"></script>
 		<script src="{{AppSubUrl}}/ng/js/gogs.js"></script>
 
 		<title>{{if .Title}}{{.Title}} - {{end}}{{AppName}}</title>

templates/repo/issue2/labels.tmpl

@@ -8,9 +8,21 @@
             <li><a href="#">Pull Request</a></li>
             <li class="current"><a href="#">Labels</a></li>
             <li><a href="#">Milestones</a></li>
-            <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
-            <li class="right"><a href="#">Filter</a></li>
+            <li class="right" id="label-new"><a href="#"><button id="label-new-btn" class="btn btn-green text-bold">New Label</button></a></li>
         </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">
+                <label for="label-add-color"></label>
+                <input class="ipt" name="color" type="text" placeholder="color" id="label-add-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-cancel-btn">Cancel</button>
+            <button class="btn btn-green right" id="label-add-btn">Create</button>
+        </form>
         <div id="issue-list-container">
             <div id="issue-list-menu">
                 <div class="left"><span class="label label-black" id="labels-num">6</span><strong>Labels</strong></div>