Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add label-edit and label-delete logic

Browse Source
This commit is contained in:
fuxiaohei 2014-12-22 21:26:05 +08:00
parent ebbe6177a9
commit c0cfd62b90
5 changed files with 141 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/ng/css/gogs.css
View File

@ -2250,15 +2250,15 @@ textarea#issue-add-content {
#labels-num { #labels-num {
margin-right: 1em; margin-right: 1em;
} }
#label-list .right { #label-list a.right {
margin-left: 1em; margin-left: 1em;
color: #999; color: #999;
line-height: 30px; line-height: 30px;
} }
#label-list .right i { #label-list a.right i {
margin-right: 3px; margin-right: 3px;
} }
#label-list .right:hover { #label-list a.right:hover {
color: #444444; color: #444444;
} }
#label-list .num { #label-list .num {
@ -2279,37 +2279,46 @@ textarea#issue-add-content {
margin-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px dashed #AAA; border-bottom: 1px dashed #AAA;
} }
#label-add-form { #label-add-form .ipt,
padding: 18px 0; #label-edit-form .ipt,
border-bottom: 1px solid #DDD; #label-delete-form .ipt {
}
#label-add-form .ipt {
font-size: 14px; 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; width: 300px;
} }
#label-add-form .btn { #label-add-form .btn,
#label-edit-form .btn,
#label-delete-form .btn {
height: 33px; height: 33px;
font-size: 14px; font-size: 14px;
margin-left: 12px; 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; width: 100px;
} }
#label-color-drop .drop-down { .label-color-drop .drop-down {
width: 128px; width: 128px !important;
top: 22px; top: 22px !important;
left: 50px; left: 50px !important;
padding: 12px; padding: 12px;
line-height: 16px; line-height: 16px;
} }
#label-color-drop .drop-down a.color { .label-color-drop .drop-down a.color {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: inline-block; display: inline-block;
} }
#label-color-drop label { .label-color-drop label {
width: 24px; width: 24px;
height: 24px; height: 24px;
display: inline-block; display: inline-block;

72
public/ng/js/gogs/issue_label.js
View File

@ -14,22 +14,29 @@ $(document).ready(function(){
// render label color input // render label color input
var color_input = $('#label-add-color'); 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_label.css("background-color",labelColors[0]);
color_input.val(labelColors[0]); color_input.val(labelColors[0]);
// render label color drop // render label color drop
$('#label-color-drop .drop-down') function render_color_drop($e){
.html(colorDropHtml) $e.find('.label-color-drop .drop-down')
.on("click","a",function(){ .html(colorDropHtml)
var color = $(this).data("color-hex"); .on("click","a",function(){
color_label.css("background-color",color); var $form = $(this).parents(".form");
color_input.val(color); 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 // color drop visible
var form = $('#label-add-form'); var form = $('#label-add-form');
render_color_drop(form);
$('#label-new-btn').on("click",function(){ $('#label-new-btn').on("click",function(){
if(form.hasClass("hidden")){ if(form.hasClass("hidden")){
form.removeClass("hidden"); form.removeClass("hidden");
@ -37,7 +44,54 @@ $(document).ready(function(){
}); });
$('#label-cancel-btn').on("click",function(){ $('#label-cancel-btn').on("click",function(){
form.addClass("hidden"); 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
View File

File diff suppressed because one or more lines are too long

27
public/ng/less/gogs/issue.less
View File

@ -384,7 +384,7 @@ textarea#issue-add-content {
} }
// labels list // labels list
#label-list { #label-list {
.right { a.right {
margin-left: 1em; margin-left: 1em;
color: #999; color: #999;
i { i {
@ -416,10 +416,10 @@ textarea#issue-add-content {
border-bottom: 1px dashed #AAA; border-bottom: 1px dashed #AAA;
} }
} }
// label add form // label add form, label edit form
#label-add-form{ #label-add-form,
padding: 18px 0; #label-edit-form,
border-bottom: 1px solid #DDD; #label-delete-form{
.ipt{ .ipt{
font-size: 14px; font-size: 14px;
} }
@ -432,15 +432,24 @@ textarea#issue-add-content {
margin-left: 12px; 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{ .label-color-drop{
.ipt{ .ipt{
width:100px; width:100px;
} }
.drop-down{ .drop-down{
width:128px; width:128px !important;
top:22px; top:22px !important;
left:50px; left:50px !important;
padding: 12px; padding: 12px;
line-height: 16px; line-height: 16px;
a.color{ a.color{

34
templates/repo/issue2/labels.tmpl
View File

@ -12,7 +12,7 @@
</ul> </ul>
<form id="label-add-form" action="#" class="form clear hidden"> <form id="label-add-form" action="#" class="form clear hidden">
<input type="text" class="ipt" name="name" placeholder="label name" id="label-add-name"/> <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> <label for="label-add-color"></label>
<input class="ipt" name="color" type="text" placeholder="color" id="label-add-color"/> <input class="ipt" name="color" type="text" placeholder="color" id="label-add-color"/>
<div class="drop-down"> <div class="drop-down">
@ -30,10 +30,10 @@
</div> </div>
<ul id="label-list" class="list-no-style"> <ul id="label-list" class="list-no-style">
<li class="item" id="label-id"> <li class="item" id="label-id">
<a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a> <a class="right delete" href="#"><i class="octicon octicon-x"></i>Delete</a>
<a class="right" href="#"><i class="octicon octicon-pencil"></i>Edit</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="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>
<li class="item" id="label-id"> <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-x"></i>Delete</a>
@ -45,4 +45,30 @@
</div> </div>
</div> </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" .}} {{template "ng/base/footer" .}}