add label edit and manage ui

This commit is contained in:
FuXiaoHei 2014-05-19 21:55:25 +08:00
parent fdc6b64f15
commit 342baf1dda
3 changed files with 72 additions and 5 deletions

View File

@ -1297,7 +1297,7 @@ html, body {
display: block; display: block;
} }
#issue .label-filter a:hover { #issue .label-filter li.label-item:hover {
background-color: #FFF; background-color: #FFF;
} }
@ -1316,6 +1316,12 @@ html, body {
margin-top: 6px; margin-top: 6px;
} }
#issue .label-filter .del {
margin-top: -24px;
color: #888;
display: none;
}
#issue .label-filter .label-button { #issue .label-filter .label-button {
margin-top: 16px; margin-top: 16px;
} }

View File

@ -612,6 +612,44 @@ function initIssue() {
$('#milestone').text($('#milestone').data("no-milestone")); $('#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() { function initRelease() {

View File

@ -15,19 +15,39 @@
</div> </div>
<div class="label-filter"> <div class="label-filter">
<h4>Label</h4> <h4>Label</h4>
<ul class="list-unstyled"> <ul class="list-unstyled" id="label-list" data-ajax="/{url}">
{{range .Labels}} {{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}} {{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> </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/> <hr/>
<form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post"> <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<h5><strong>New Label</strong></h5> <h5><strong>New Label</strong></h5>
<div class="input-group label-color-picker form-group"> <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="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> <span class="input-group-addon"><i></i></span>
</div> </div>
<div class="form-group text-right"> <div class="form-group text-right">
@ -68,6 +88,9 @@
$('.label-color-picker').colorpicker({ $('.label-color-picker').colorpicker({
input:$('#label-color-ipt') input:$('#label-color-ipt')
}); });
$('.label-change-color-picker').colorpicker({
input:$('#label-color-change-ipt')
});
}); });
</script> </script>
{{template "base/footer" .}} {{template "base/footer" .}}