add label-edit and label-delete logic
This commit is contained in:
parent
ebbe6177a9
commit
c0cfd62b90
5 changed files with 141 additions and 43 deletions
|
@ -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;
|
||||
|
|
|
@ -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')
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
8
public/ng/js/min/gogs-min.js
vendored
8
public/ng/js/min/gogs-min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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{
|
||||
|
|
|
@ -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" .}}
|
Reference in a new issue