* create new UI for priority selectors.

This commit is contained in:
Catouse
2016-03-04 12:18:42 +08:00
parent f4980f8377
commit f1454d2d99
3 changed files with 70 additions and 19 deletions

View File

@@ -83,19 +83,21 @@
<tr>
<th><?php echo $lang->story->title;?></th>
<td colspan='2'>
<div class='row'>
<div class='col-sm-8'>
<div class='row-table'>
<div class='col-table'>
<?php echo html::input('title', $storyTitle, "class='form-control'");?>
</div>
<div class='col-sm-2'>
<div class='input-group'>
<span class='input-group-addon fix-border'><?php echo $lang->story->pri?></span>
<?php echo html::select('pri', (array)$lang->story->priList, $pri, "class='form-control'");?>
</div>
</div>
<div class='col-sm-2'>
<div class='input-group'>
<span class='input-group-addon'><?php echo $lang->story->estimateAB;?></span>
<div class='col-table w-250px'>
<div class="input-group">
<span class='input-group-addon fix-border br-0'><?php echo $lang->story->pri;?></span>
<div class='input-group-btn dropdown-pris' data-set='0,1,2,3,4'>
<button type='button' class='btn dropdown-toggle br-0' data-toggle='dropdown'>
<span class='pri-text'></span> &nbsp;<span class='caret'></span>
</button>
<ul class='dropdown-menu pull-right'></ul>
<?php echo html::select('pri', (array)$lang->story->priList, $pri, "class='hide'");?>
</div>
<span class='input-group-addon fix-border br-0'><?php echo $lang->story->estimateAB;?></span>
<?php echo html::input('estimate', $estimate, "class='form-control'");?>
</div>
</div>

View File

@@ -1434,6 +1434,46 @@ function fixedTableHead(boxObj)
});
}
/**
* Init prioprity selectors
* @return void
*/
function initPrioritySelector()
{
$('.dropdown-pris').each(function()
{
var $dropdown = $(this);
var $select = $dropdown.find('select');
var selectVal = parseInt($select.val());
var $menu = $dropdown.children('.dropdown-menu');
if(!$menu.length)
{
$menu = $('<ul class="dropdown-menu"></ul>');
$dropdown.append($menu);
}
if(!$menu.children('li').length)
{
var set = $dropdown.data('set').split(',') || [0,1,2,3,4];
for(var i = 0; i < set.length; ++i)
{
$menu.append('<li><a href="###" data-pri="' + i + '"><span class="pri' + i + '">' + (i ? i : '') + '</span></a></li>');
}
}
$menu.find('a[data-pri="' + selectVal + '"]').parent().addClass('active');
$dropdown.find('.pri-text').html('<span class="pri' + selectVal + '">' + (selectVal ? selectVal : '') + '</span>');
$dropdown.on('click', '.dropdown-menu > li > a', function()
{
var $a = $(this);
$menu.children('li.active').removeClass('active');
$a.parent().addClass('active');
selectVal = $a.data('pri');
$select.val(selectVal);
$dropdown.find('.pri-text').html('<span class="pri' + selectVal + '">' + (selectVal ? selectVal : '') + '</span>');
});
});
}
/* Ping the server every some minutes to keep the session. */
needPing = true;
@@ -1481,6 +1521,8 @@ $(document).ready(function()
if(checkeds != '') checkeds = checkeds.substring(0, checkeds.length - 1);
$.cookie('checkedItem', checkeds, {expires:config.cookieLife, path:config.webRoot});
});
initPrioritySelector();
});
/* CTRL+g, auto focus on the search box. */

View File

@@ -32,6 +32,7 @@
.pdt-20 {padding-top: 20px !important}
/* borders */
.br-0 {border-radius: 0!important}
.bd-0, .borderless, .bd-none {border: none !important;}
/* backgrounds */
@@ -147,14 +148,20 @@ i[class^="icon-"],i[class*=" icon-"],.link-icon i[class^="icon-"],.link-icon i[c
.btn-icon.text-danger:hover {color: #7e0501!important}
/* priority icons. */
.pri1,.pri0,.pri2,.pri3,.pri4,.pri5,.pri6,.pri{display:inline-block;width: 18px;height: 18px;font-size: 12px;line-height: 14px;font-weight: bold; text-align: center; color: #272d68; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;border: 2px solid #272d68; font-family: arial, helvetica, clean, sans-serif;}
.pri,.pri0{border-color: #ccc;color: #ccc;}
.pri:before{content: '?'}
.pri2{border-color: #25367e;color: #25367e}
.pri3{border-color: #2c4a9b;color: #2c4a9b}
.pri4{border-color: #475da8;color: #475da8}
.pri5{border-color: #6989c5;color: #6989c5}
.pri6{border-color: #9ebee5;color: #9ebee5}
.pri1,.pri0,.pri2,.pri3,.pri4,.pri5,.pri6,.pri{display:inline-block;width: 18px;height: 18px;font-size: 12px;line-height: 14px;font-weight: bold; text-align: center; color: #ccc; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;border: 2px solid #ccc; font-family: arial, helvetica, clean, sans-serif; background-color: #fff}
.pri:before, .pri0:before{content: '?'}
.pri1{border-color: #EA644A;color: #EA644A;}
.pri2{border-color: #F1A325;color: #F1A325;}
.pri3{border-color: #BD7B46;color: #BD7B46;}
.pri4{border-color: #8666B8;color: #8666B8;}
.pri5{border-color: #03B8CF;color: #03B8CF}
.pri6{border-color: #38B03F;color: #38B03F}
.dropdown-pris > .dropdown-menu {padding: 0 5px;}
.dropdown-pris > .dropdown-menu > li {display: table-cell;}
.dropdown-pris > .dropdown-menu > li > a {opacity: 0.6; transition: all .2s; padding: 6px 5px; display: block}
.dropdown-pris > .dropdown-menu > li.active > a {opacity: 1}
.dropdown-pris > .dropdown-menu > li.active > a:before {display: none}
.dropdown-pris > .dropdown-menu > li > a:hover {background-color: #f5f5f5; opacity: 1}
/* bug severity icons. */
.severity,.severity1,.severity2,.severity3,.severity4,.severity5,.severity6{display:inline-block;width: 16px;height: 16px;line-height: 16px;font-weight: bold; text-align: center; font-size: 12px; color: #fff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;font-family: arial, helvetica, clean, sans-serif;}