mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-22 12:54:53 -05:00
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 {
|
#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;
|
||||||
|
|
|
@ -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
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
|
// 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{
|
||||||
|
|
|
@ -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" .}}
|
Loading…
Reference in a new issue