issue ui update

This commit is contained in:
FuXiaoHei 2014-05-26 21:21:30 +08:00
parent bf5fcfb49c
commit e0a6e6dd1a
3 changed files with 71 additions and 6 deletions

View File

@ -1244,7 +1244,7 @@ html, body {
margin-bottom: 0; margin-bottom: 0;
} }
#issue-create-form .nav-tabs, #issue .issue-reply .nav-tabs,#issue .issue-edit-content .nav-tabs { #issue-create-form .nav-tabs, #issue .issue-reply .nav-tabs, #issue .issue-edit-content .nav-tabs {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -1355,6 +1355,10 @@ html, body {
color: #444; color: #444;
} }
#issue .issue-item h5 .labels .label {
margin-left: 12px;
}
#issue .issue-item .info span { #issue .issue-item .info span {
margin-right: 12px; margin-right: 12px;
color: #888; color: #888;
@ -1589,6 +1593,14 @@ html, body {
text-shadow: 0 0 2px #444; text-shadow: 0 0 2px #444;
} }
#issue .label-selected .count, #issue .label-selected a {
color: #FAFAFA;
}
#issue .label-selected a {
text-shadow: 0 0 2px #444;
}
#issue .issue-bar .labels .label-white { #issue .issue-bar .labels .label-white {
color: #FFF; color: #FFF;
} }
@ -1625,6 +1637,16 @@ html, body {
margin-left: 26px; margin-left: 26px;
} }
#label-color-ipt2, #label-color-change-ipt2 {
width: 120px;
display: inline-block;
vertical-align: top;
}
#label-color-change-ipt2{
margin-top: 1px;
}
/* wrapper and footer */ /* wrapper and footer */
#wrapper { #wrapper {

View File

@ -647,18 +647,45 @@ function initIssue() {
$('#label-name-change-ipt').val($this.find('.name').text()); $('#label-name-change-ipt').val($this.find('.name').text());
var color = $this.find('.color').data("color"); var color = $this.find('.color').data("color");
$('.label-change-color-picker').colorpicker("setValue", color); $('.label-change-color-picker').colorpicker("setValue", color);
$('#label-color-change-ipt').val(color); $('#label-color-change-ipt,#label-color-change-ipt2').val(color);
$('#label-change-id-ipt').val($this.data("id")); $('#label-change-id-ipt').val($this.data("id"));
return false; return false;
}); });
} }
}); });
var colorRegex = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$");
$('#label-color-ipt2').on('keyup', function () {
var val = $(this).val();
if (val.length > 7) {
$(this).val(val.substr(0, 7));
}
if (colorRegex.test(val)) {
$('.label-color-picker').colorpicker("setValue", val);
}
return true;
});
$('#label-color-change-ipt2').on('keyup', function () {
var val = $(this).val();
console.log(val);
if (val.length > 7) {
$(this).val(val.substr(0, 7));
}
if (colorRegex.test(val)) {
$('.label-change-color-picker').colorpicker("setValue", val);
}
return true;
});
$("#label-list").on('click', '.del', function () { $("#label-list").on('click', '.del', function () {
var $p = $(this).parent(); var $p = $(this).parent();
removeLabels.push($p.data('id')); removeLabels.push($p.data('id'));
$p.remove(); $p.remove();
return false; return false;
}); });
$('.label-selected').each(function (i, item) {
var $item = $(item);
var color = $item.find('.color').data('color');
$item.css('background-color', color);
});
$('.issue-bar .labels .dropdown-menu').on('click', 'li', function (e) { $('.issue-bar .labels .dropdown-menu').on('click', 'li', function (e) {
var url = $('.issue-bar .labels').data("ajax"); var url = $('.issue-bar .labels').data("ajax");
var id = $(this).data('id'); var id = $(this).data('id');

View File

@ -17,11 +17,11 @@
<h4>Label</h4> <h4>Label</h4>
<ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete"> <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
{{range .Labels}} {{range .Labels}}
<li class="label-item" id="label-{{.Id}}" data-id="{{.Id}}"> <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
<a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}"> <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
<span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span> <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
<span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span> <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
<span class="name">{{.Name}}{{if eq $.SelectLabels .Id}}*{{end}}</span> <span class="name">{{.Name}}</span>
</a> </a>
<a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a> <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
</li> </li>
@ -36,6 +36,7 @@
<input type="hidden" name="id" id="label-change-id-ipt" value="0"/> <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
</div> </div>
<div class="form-group text-right"> <div class="form-group text-right">
<input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
<button class="btn btn-default btn-sm">Save</button> <button class="btn btn-default btn-sm">Save</button>
</div> </div>
</form> </form>
@ -52,6 +53,7 @@
<span class="input-group-addon"><i></i></span> <span class="input-group-addon"><i></i></span>
</div> </div>
<div class="form-group text-right"> <div class="form-group text-right">
<input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
<button class="btn btn-default btn-sm">Create</button> <button class="btn btn-default btn-sm">Create</button>
</div> </div>
</form> </form>
@ -69,7 +71,11 @@
{{range .Issues}}{{if .Poster}} {{range .Issues}}{{if .Poster}}
<div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}"> <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
<span class="number pull-right">#{{.Index}}</span> <span class="number pull-right">#{{.Index}}</span>
<h5 class="title"><a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a></h5> <h5 class="title"><a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
<span class="labels">
<span class="label" style="background-color: #28a1c5">tag</span>
</span>
</h5>
<p class="info"> <p class="info">
<span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/> <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
<a href="/user/{{.Poster.Name}}">{{.Poster.Name}}</a></span> <a href="/user/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
@ -87,10 +93,20 @@
<script> <script>
$(function(){ $(function(){
$('.label-color-picker').colorpicker({ $('.label-color-picker').colorpicker({
input:$('#label-color-ipt') input: $('#label-color-ipt')
}).on('changeColor', function (ev) {
var $ipt = $('#label-color-ipt2');
if ($ipt.val().length != 4) {
$ipt.val(ev.color.toHex());
}
}); });
$('.label-change-color-picker').colorpicker({ $('.label-change-color-picker').colorpicker({
input:$('#label-color-change-ipt') input:$('#label-color-change-ipt')
}).on('changeColor', function (ev) {
var $ipt = $('#label-color-change-ipt2');
if ($ipt.val().length != 4) {
$ipt.val(ev.color.toHex());
}
}); });
}); });
</script> </script>