add label-create ui elements

This commit is contained in:
fuxiaohei 2014-12-07 21:29:37 +08:00
parent a2f6e1803b
commit 0daef29053
7 changed files with 145 additions and 7 deletions

View file

@ -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;
}

View file

@ -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 = {};

View 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");
})
});

File diff suppressed because one or more lines are too long

View file

@ -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;

View file

@ -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>

View file

@ -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>