Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 {
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;

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

@ -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')
.html(colorDropHtml)
.on("click","a",function(){
var color = $(this).data("color-hex");
color_label.css("background-color",color);
color_input.val(color);
});
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
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
#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{

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

@ -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" .}}