add label-create ui elements
This commit is contained in:
parent
a2f6e1803b
commit
0daef29053
7 changed files with 145 additions and 7 deletions
|
@ -2023,10 +2023,12 @@ textarea#issue-add-content {
|
|||
margin-left: 4px;
|
||||
}
|
||||
#issue-new > a,
|
||||
#label-new > a,
|
||||
#milestone-new > a {
|
||||
padding: 0 !important;
|
||||
}
|
||||
#issue-new > a button,
|
||||
#label-new > a button,
|
||||
#milestone-new > a button {
|
||||
height: 29px;
|
||||
}
|
||||
|
@ -2171,6 +2173,43 @@ 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 {
|
||||
font-size: 14px;
|
||||
}
|
||||
#label-add-form .ipt[name=name] {
|
||||
width: 300px;
|
||||
}
|
||||
#label-add-form .btn {
|
||||
height: 33px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
#label-color-drop .ipt {
|
||||
width: 100px;
|
||||
}
|
||||
#label-color-drop .drop-down {
|
||||
width: 128px;
|
||||
top: 22px;
|
||||
left: 50px;
|
||||
padding: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
#label-color-drop .drop-down a.color {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
#label-color-drop label {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin: 0 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#milestone-list {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
// @codekit-prepend "lib/lib.js"
|
||||
// @codekit-prepend "utils/tabs.js"
|
||||
// @codekit-prepend "utils/preview.js"
|
||||
// @codekit-prepend "gogs/issue_label.js"
|
||||
// @codekit-prepend "lib/jquery.tipsy.js"
|
||||
|
||||
var Gogs = {};
|
||||
|
|
43
public/ng/js/gogs/issue_label.js
Normal file
43
public/ng/js/gogs/issue_label.js
Normal file
|
@ -0,0 +1,43 @@
|
|||
// when dom ready, init issue label events
|
||||
$(document).ready(function(){
|
||||
var labelColors = ["#e11d21","#EB6420","#FBCA04","#009800",
|
||||
"#006B75","#207DE5","#0052cc","#53E917",
|
||||
"#F6C6C7","#FAD8C7","#FEF2C0","#BFE5BF",
|
||||
"#BFDADC","#C7DEF8","#BFD4F2","#D4C5F9"];
|
||||
|
||||
var colorDropHtml = "";
|
||||
labelColors.forEach(function(item){
|
||||
colorDropHtml += '<a class="color" style="background-color:'+item+'" data-color-hex="'+item+'"></a>';
|
||||
});
|
||||
|
||||
|
||||
|
||||
// render label color input
|
||||
var color_input = $('#label-add-color');
|
||||
var color_label = $('#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);
|
||||
});
|
||||
|
||||
// color drop visible
|
||||
var form = $('#label-add-form');
|
||||
$('#label-new-btn').on("click",function(){
|
||||
if(form.hasClass("hidden")){
|
||||
form.removeClass("hidden");
|
||||
}
|
||||
});
|
||||
$('#label-cancel-btn').on("click",function(){
|
||||
form.addClass("hidden");
|
||||
})
|
||||
|
||||
|
||||
});
|
10
public/ng/js/min/gogs-min.js
vendored
10
public/ng/js/min/gogs-min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -244,6 +244,7 @@ textarea#issue-add-content {
|
|||
}
|
||||
// new issue button
|
||||
#issue-new,
|
||||
#label-new,
|
||||
#milestone-new{
|
||||
> a {
|
||||
padding: 0 !important;
|
||||
|
@ -415,6 +416,47 @@ textarea#issue-add-content {
|
|||
border-bottom: 1px dashed #AAA;
|
||||
}
|
||||
}
|
||||
// label add form
|
||||
#label-add-form{
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
.ipt{
|
||||
font-size: 14px;
|
||||
}
|
||||
.ipt[name=name]{
|
||||
width: 300px;
|
||||
}
|
||||
.btn{
|
||||
height: 33px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
// label color drop
|
||||
#label-color-drop{
|
||||
.ipt{
|
||||
width:100px;
|
||||
}
|
||||
.drop-down{
|
||||
width:128px;
|
||||
top:22px;
|
||||
left:50px;
|
||||
padding: 12px;
|
||||
line-height: 16px;
|
||||
a.color{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
label{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin: 0 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// milestone items
|
||||
#milestone-list{
|
||||
padding-top: 6px;
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
<script src="{{AppSubUrl}}/ng/js/lib/jquery.magnific-popup.min.js"></script>
|
||||
<script src="{{AppSubUrl}}/ng/js/utils/tabs.js"></script>
|
||||
<script src="{{AppSubUrl}}/ng/js/utils/preview.js"></script>
|
||||
<script src="{{AppSubUrl}}/ng/js/gogs/issue_label.js"></script>
|
||||
<script src="{{AppSubUrl}}/ng/js/gogs.js"></script>
|
||||
|
||||
<title>{{if .Title}}{{.Title}} - {{end}}{{AppName}}</title>
|
||||
|
|
|
@ -8,9 +8,21 @@
|
|||
<li><a href="#">Pull Request</a></li>
|
||||
<li class="current"><a href="#">Labels</a></li>
|
||||
<li><a href="#">Milestones</a></li>
|
||||
<li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
|
||||
<li class="right"><a href="#">Filter</a></li>
|
||||
<li class="right" id="label-new"><a href="#"><button id="label-new-btn" class="btn btn-green text-bold">New Label</button></a></li>
|
||||
</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">
|
||||
<label for="label-add-color"></label>
|
||||
<input class="ipt" name="color" type="text" placeholder="color" id="label-add-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-cancel-btn">Cancel</button>
|
||||
<button class="btn btn-green right" id="label-add-btn">Create</button>
|
||||
</form>
|
||||
<div id="issue-list-container">
|
||||
<div id="issue-list-menu">
|
||||
<div class="left"><span class="label label-black" id="labels-num">6</span><strong>Labels</strong></div>
|
||||
|
|
Loading…
Reference in a new issue