issue ui update

public/css/gogs.css

@@ -1244,7 +1244,7 @@ html, body {
     margin-bottom: 0;
 }
 
-#issue-create-form .nav-tabs, #issue .issue-reply .nav-tabs,#issue .issue-edit-content .nav-tabs {
+#issue-create-form .nav-tabs, #issue .issue-reply .nav-tabs, #issue .issue-edit-content .nav-tabs {
     margin-bottom: 10px;
 }
 
@@ -1355,6 +1355,10 @@ html, body {
     color: #444;
 }
 
+#issue .issue-item h5 .labels .label {
+    margin-left: 12px;
+}
+
 #issue .issue-item .info span {
     margin-right: 12px;
     color: #888;
@@ -1589,6 +1593,14 @@ html, body {
     text-shadow: 0 0 2px #444;
 }
 
+#issue .label-selected .count, #issue .label-selected a {
+    color: #FAFAFA;
+}
+
+#issue .label-selected a {
+    text-shadow: 0 0 2px #444;
+}
+
 #issue .issue-bar .labels .label-white {
     color: #FFF;
 }
@@ -1625,6 +1637,16 @@ html, body {
     margin-left: 26px;
 }
 
+#label-color-ipt2, #label-color-change-ipt2 {
+    width: 120px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+#label-color-change-ipt2{
+    margin-top: 1px;
+}
+
 /* wrapper and footer */
 
 #wrapper {

public/js/app.js

@@ -647,18 +647,45 @@ function initIssue() {
                 $('#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-color-change-ipt,#label-color-change-ipt2').val(color);
                 $('#label-change-id-ipt').val($this.data("id"));
                 return false;
             });
         }
     });
+    var colorRegex = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$");
+    $('#label-color-ipt2').on('keyup', function () {
+        var val = $(this).val();
+        if (val.length > 7) {
+            $(this).val(val.substr(0, 7));
+        }
+        if (colorRegex.test(val)) {
+            $('.label-color-picker').colorpicker("setValue", val);
+        }
+        return true;
+    });
+    $('#label-color-change-ipt2').on('keyup', function () {
+        var val = $(this).val();
+        console.log(val);
+        if (val.length > 7) {
+            $(this).val(val.substr(0, 7));
+        }
+        if (colorRegex.test(val)) {
+            $('.label-change-color-picker').colorpicker("setValue", val);
+        }
+        return true;
+    });
     $("#label-list").on('click', '.del', function () {
         var $p = $(this).parent();
         removeLabels.push($p.data('id'));
         $p.remove();
         return false;
     });
+    $('.label-selected').each(function (i, item) {
+        var $item = $(item);
+        var color = $item.find('.color').data('color');
+        $item.css('background-color', color);
+    });
     $('.issue-bar .labels .dropdown-menu').on('click', 'li', function (e) {
         var url = $('.issue-bar .labels').data("ajax");
         var id = $(this).data('id');

templates/issue/list.tmpl

@@ -17,11 +17,11 @@
                 <h4>Label</h4>
                 <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
                     {{range .Labels}}
-                    <li class="label-item" id="label-{{.Id}}" data-id="{{.Id}}">
+                    <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
                         <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
                             <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}}{{if eq $.SelectLabels .Id}}*{{end}}</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>
@@ -36,6 +36,7 @@
                                 <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
                             </div>
                             <div class="form-group text-right">
+                                <input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
                                 <button class="btn btn-default btn-sm">Save</button>
                             </div>
                         </form>
@@ -52,6 +53,7 @@
                         <span class="input-group-addon"><i></i></span>
                     </div>
                     <div class="form-group text-right">
+                        <input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
                         <button class="btn btn-default btn-sm">Create</button>
                     </div>
                 </form>
@@ -69,7 +71,11 @@
                 {{range .Issues}}{{if .Poster}}
                 <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
                     <span class="number pull-right">#{{.Index}}</span>
-                    <h5 class="title"><a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a></h5>
+                    <h5 class="title"><a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
+                        <span class="labels">
+                            <span class="label" style="background-color: #28a1c5">tag</span>
+                        </span>
+                    </h5>
                     <p class="info">
                         <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
                         <a href="/user/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
@@ -87,10 +93,20 @@
 <script>
     $(function(){
         $('.label-color-picker').colorpicker({
-            input:$('#label-color-ipt')
+            input: $('#label-color-ipt')
+        }).on('changeColor', function (ev) {
+            var $ipt = $('#label-color-ipt2');
+            if ($ipt.val().length != 4) {
+                $ipt.val(ev.color.toHex());
+            }
         });
         $('.label-change-color-picker').colorpicker({
             input:$('#label-color-change-ipt')
+        }).on('changeColor', function (ev) {
+            var $ipt = $('#label-color-change-ipt2');
+            if ($ipt.val().length != 4) {
+                $ipt.val(ev.color.toHex());
+            }
         });
     });
 </script>