diff options
| -rwxr-xr-x | public/css/gogs.css | 24 | ||||
| -rw-r--r-- | public/js/app.js | 29 | ||||
| -rw-r--r-- | templates/issue/list.tmpl | 24 |
3 files changed, 71 insertions, 6 deletions
diff --git a/public/css/gogs.css b/public/css/gogs.css index 96cf90b4d8..79fd4bf908 100755 --- a/public/css/gogs.css +++ b/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 { diff --git a/public/js/app.js b/public/js/app.js index 419b8d82e8..f56718067e 100644 --- a/public/js/app.js +++ b/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'); diff --git a/templates/issue/list.tmpl b/templates/issue/list.tmpl index ba8055309d..aac27943f3 100644 --- a/templates/issue/list.tmpl +++ b/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> |