* change UI for create forms.

This commit is contained in:
Catouse
2016-03-04 17:17:42 +08:00
parent 51d75e71a2
commit dad0b0395d
15 changed files with 177 additions and 114 deletions

View File

@@ -16,6 +16,15 @@
#module_chosen.chosen-container .chosen-drop {min-width: 400px; border-top: 1px solid #ddd!important}
#openedBuild_chosen.chosen-container .chosen-drop {min-width: 450px; border-top: 1px solid #ddd!important}
#module + .chosen-container-single .chosen-single,
#openedBuild + .chosen-container-multi .chosen-choices {border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px;}
#openedBuild + .chosen-container-multi .chosen-choices,
#mailto + .chosen-container-multi .chosen-choices {border-top-right-radius: 0; border-bottom-right-radius: 0; margin-left: -1px;}
.row .col-sm-8{width:75%;}
.row .col-sm-4{padding-left:0px; width:25%;}
.dropdown-pris > .btn {background-color: #fff; text-shadow: none}
/* Keep label has same width as relative task label*/
#keywordsAddonLabel:before {content: '空'; color: transparent}
#contactListGroup .input-group-btn > .btn {margin-left: -1px!important;}
#contactListGroup .input-group-btn > .btn:first-child {border-left: none}

View File

@@ -55,47 +55,6 @@ function setAssignedTo(moduleID, productID)
});
}
$(function()
{
if($('#project').val()) loadProjectRelated($('#project').val());
$('#saveTplBtn').on('click', function()
{
var content = $('#steps').val();
bootbox.prompt(setTemplateTitle, function(r)
{
if(!r || !content) return;
saveTemplateLink = createLink('bug', 'saveTemplate');
$.post(saveTemplateLink, {title:r, content:content}, function(data)
{
$('#tplBox').html(data);
});
});
});
});
// /* Save template. */
// KindEditor.plugin('savetemplate', function(K)
// {
// var self = this, name = 'savetemplate';
// self.plugin.savetemplate =
// {
// click: function(id)
// {
// content = self.html();
// bootbox.prompt(setTemplateTitle, function(r)
// {
// if(!r || !content) return;
// saveTemplateLink = createLink('bug', 'saveTemplate');
// $.post(saveTemplateLink, {title:r, content:content}, function(data)
// {
// $('#tplBox').html(data);
// });
// });
// }
// };
// self.clickToolbar(name, self.plugin.savetemplate.click);
// });
/* Set template. */
function setTemplate(templateID)
{
@@ -112,3 +71,31 @@ function deleteTemplate(templateID)
hiddenwin.location.href = createLink('bug', 'deleteTemplate', 'templateID=' + templateID);
$('#tplBox' + templateID).addClass('hidden');
}
$(function()
{
if($('#project').val()) loadProjectRelated($('#project').val());
$('#saveTplBtn').on('click', function()
{
var content = $('#steps').val();
bootbox.prompt(setTemplateTitle, function(r)
{
if(!r || !content) return;
saveTemplateLink = createLink('bug', 'saveTemplate');
$.post(saveTemplateLink, {title:r, content:content}, function(data)
{
$('#tplBox').html(data);
});
});
});
$('[data-toggle=tooltip]').tooltip();
// ajust style for file box
var ajustFilebox = function()
{
applyCssStyle('.fileBox > tbody > tr > td:first-child {transition: none; width: ' + ($('#contactListGroup').width() - 2) + 'px}', 'filebox')
};
ajustFilebox();
$(window).resize(ajustFilebox);
});

View File

@@ -63,7 +63,7 @@ js::set('refresh', $lang->refresh);
<span class='input-group-addon'><?php echo $lang->bug->openedBuild?></span>
<span id='buildBox'><?php echo html::select('openedBuild[]', $builds, $buildID, "size=4 multiple=multiple class='chosen form-control'");?></span>
<span class='input-group-addon' id='buildBoxActions'></span>
<span class='input-group-btn'><?php echo html::commonButton($lang->bug->allBuilds, "class='btn btn-default' onclick='loadAllBuilds()'")?></span>
<span class='input-group-btn'><?php echo html::commonButton('<i class="icon icon-refresh"></i>', "class='btn btn-default' data-toggle='tooltip' onclick='loadAllBuilds()' title='{$lang->bug->allBuilds}' style='border-left: none'")?></span>
</div>
</td>
</tr>
@@ -72,7 +72,7 @@ js::set('refresh', $lang->refresh);
<td>
<div class='input-group'>
<span id='assignedToBox'><?php echo html::select('assignedTo', $projectMembers, $assignedTo, "class='form-control chosen'");?></span>
<span class='input-group-btn'><?php echo html::commonButton($lang->bug->allUsers, "class='btn btn-default' onclick='loadAllUsers()'");?></span>
<span class='input-group-btn'><?php echo html::commonButton('<i class="icon icon-refresh"></i>', "class='btn btn-default' onclick='loadAllUsers()' data-toggle='tooltip' title='{$lang->bug->allUsers}'");?></span>
</div>
</td>
</tr>
@@ -97,14 +97,26 @@ js::set('refresh', $lang->refresh);
<tr>
<th><?php echo $lang->bug->title;?></th>
<td colspan='2'>
<div class='row'>
<div class='col-sm-8'><?php echo html::input('title', $bugTitle, "class='form-control'");?></div>
<div class='col-sm-4'>
<div class='row-table'>
<div class='col-table w-p100'><?php echo html::input('title', $bugTitle, "class='form-control'");?></div>
<div class='col-table'>
<div class='input-group'>
<span class='input-group-addon fix-border'><?php echo $lang->bug->severity?></span>
<?php echo html::select('severity', $lang->bug->severityList, $severity, "class='form-control'");?>
<span class='input-group-addon fix-border'><?php echo $lang->bug->pri?></span>
<?php echo html::select('pri', $lang->bug->priList, $severity, "class='form-control'");?>
<span class='input-group-addon fix-border br-0'><?php echo $lang->bug->severity;?></span>
<div class='input-group-btn dropdown-pris' data-prefix='severity'>
<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('severity', (array)$lang->bug->severityList, $severity, "class='hide'");?>
</div>
<span class='input-group-addon fix-border br-0'><?php echo $lang->bug->pri;?></span>
<div class='input-group-btn dropdown-pris'>
<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->bug->priList, $pri, "class='hide'");?>
</div>
</div>
</div>
</div>
@@ -142,17 +154,15 @@ js::set('refresh', $lang->refresh);
<tr>
<th><?php echo $lang->bug->lblMailto;?></th>
<td>
<div class='input-group'>
<div class='input-group' id='contactListGroup'>
<?php
echo html::select('mailto[]', $users, str_replace(' ', '', $mailto), "class='form-control chosen' multiple");
if($contactLists) echo html::select('', $contactLists, '', "class='form-control chosen' onchange=\"setMailto('mailto', this.value)\"");
if($contactLists) echo html::select('', $contactLists, '', "class='form-control' style='min-width: 100px; margin-left: -1px' onchange=\"setMailto('mailto', this.value)\"");
if(empty($contactLists))
{
echo '<span class="input-group-addon">';
echo '<a href="' . $this->createLink('company', 'browse') . '" target="_blank">' . $lang->user->contacts->manage . '</a>';
echo '</span>';
echo '<span class="input-group-addon">';
echo '<a href="###" onclick="ajaxGetContacts(this)">' . $lang->refresh . '</a>';
echo '<span class="input-group-btn">';
echo '<a href="' . $this->createLink('company', 'browse') . '" target="_blank" data-toggle="tooltip" class="btn" title="' . $lang->user->contacts->manage . '"><i class="icon icon-cog"></i></a>';
echo '<a href="###" onclick="ajaxGetContacts(this)" data-toggle="tooltip" class="btn" title="' . $lang->refresh . '"><i class="icon icon-refresh"></i></a>';
echo '</span>';
}
?>
@@ -160,7 +170,7 @@ js::set('refresh', $lang->refresh);
</td>
<td>
<div class='input-group'>
<span class='input-group-addon'><?php echo $lang->bug->keywords;?></span>
<span class='input-group-addon' id='keywordsAddonLabel'><?php echo $lang->bug->keywords;?></span>
<?php echo html::input('keywords', $keywords, "class='form-control'");?>
</div>
</td>

View File

@@ -24,6 +24,14 @@ $(function()
});
$('[data-toggle=tooltip]').tooltip();
// ajust style for file box
var ajustFilebox = function()
{
applyCssStyle('.fileBox > tbody > tr > td:first-child {transition: none; width: ' + ($('#mailtoGroup').width() - 2) + 'px}', 'filebox')
};
ajustFilebox();
$(window).resize(ajustFilebox);
});

View File

@@ -115,15 +115,15 @@
<tr>
<th><?php echo $lang->story->mailto;?></th>
<td>
<div class='input-group'>
<div class='input-group' id='mailtoGroup'>
<?php
echo html::select('mailto[]', $users, str_replace(' ' , '', $mailto), "multiple");
if($contactLists) echo html::select('', $contactLists, '', "class='form-control chosen' onchange=\"setMailto('mailto', this.value)\"");
if(empty($contactLists))
{
echo '<span class="input-group-btn">';
echo '<a data-toggle="tooltip" title="' . $lang->user->contacts->manage . '" href="' . $this->createLink('company', 'browse') . '" target="_blank" class="btn"><i class="icon icon-cog"></i></a>';
echo '<a data-toggle="tooltip" title="' . $lang->refresh . '" href="###" class="btn" onclick="ajaxGetContacts(this)"><i class="icon icon-refresh"></i></a>';
echo '<a data-toggle="tooltip" title="' . $lang->user->contacts->manage . '" href="' . $this->createLink('company', 'browse') . '" target="_blank" class="btn"><i class="icon icon-cog"></i></a>';
echo '</span>';
}
?>

View File

@@ -1,5 +1,2 @@
.input-group-btn {width: 0.01%}
.input-group-btn #copyButton{float:right;z-index:100;margin-top:-30px;}
.row .col-sm-8{width:76%}
.row .col-sm-2{padding-left:0px; width:12%}
.dropdown-pris > .btn {background-color: #fff;}
#mailto + .chosen-container-multi .chosen-choices {border-top-left-radius: 0; border-bottom-left-radius: 0}

View File

@@ -55,8 +55,7 @@ function setPreview()
if(!$('#story').val())
{
$('#preview').addClass('hidden');
$('#copyButton').addClass('hidden');
$('input#name').css('padding-right', $('input#name').css('padding-left'));
$('#copyButton').parent().addClass('hidden');
}
else
{
@@ -65,8 +64,7 @@ function setPreview()
storyLink = storyLink + concat + 'onlybody=yes';
$('#preview').removeClass('hidden');
$('#preview a').attr('href', storyLink);
$('#copyButton').removeClass('hidden');
$('input#name').css('padding-right', '60px');
$('#copyButton').parent().removeClass('hidden');
}
setAfter();
@@ -138,4 +136,14 @@ $(document).ready(function()
$assignedTo.trigger('chosen:updated');
}
});
$('[data-toggle=tooltip]').tooltip();
// ajust style for file box
var ajustFilebox = function()
{
applyCssStyle('.fileBox > tbody > tr > td:first-child {transition: none; width: ' + ($('#dataPlanGroup').width() - 2) + 'px}', 'filebox')
};
ajustFilebox();
$(window).resize(ajustFilebox);
});

View File

@@ -53,6 +53,7 @@ $lang->task->consumedAB = 'Use';
$lang->task->hour = 'Hour';
$lang->task->consumedThisTime = 'Hours';
$lang->task->leftThisTime = 'Left';
$lang->task->datePlan = 'Date plan';
$lang->task->estStarted = 'Estimate start';
$lang->task->realStarted = 'Real start';
$lang->task->date = 'Date';

View File

@@ -53,6 +53,7 @@ $lang->task->consumedAB = '消耗';
$lang->task->hour = '小时';
$lang->task->consumedThisTime = '工时';
$lang->task->leftThisTime = '剩余';
$lang->task->datePlan = '日程规划';
$lang->task->estStarted = '预计开始';
$lang->task->realStarted = '实际开始';
$lang->task->date = '日期';

View File

@@ -51,21 +51,25 @@
<tr>
<th><?php echo $lang->task->name;?></th>
<td colspan='3'>
<div class='row'>
<div class='col-sm-8'>
<?php echo html::input('name', $task->name, "class='form-control'");?>
<span class='input-group-btn'><a href='javascript:copyStoryTitle();' id='copyButton' class='btn'><?php echo $lang->task->copyStoryTitle;?></a></span>
</div>
<div class='col-sm-2'>
<div class="input-group">
<span class='input-group-addon fix-border'><?php echo $lang->task->pri;?></span>
<?php echo html::select('pri', $lang->task->priList, $task->pri, 'class=form-control');?>
<div class='row-table'>
<div class='col-table'>
<div class="input-group w-p100">
<?php echo html::input('name', $task->name, "class='form-control'");?>
<span class='input-group-btn'><a href='javascript:copyStoryTitle();' id='copyButton' class='btn'><?php echo $lang->task->copyStoryTitle;?></a></span>
</div>
</div>
<div class='col-sm-2'>
<div class='col-table w-250px'>
<div class="input-group">
<span class='input-group-addon fix-border'><?php echo $lang->task->estimate;?></span>
<?php echo html::input('estimate', $task->estimate, "class='form-control' autocomplete='off' placeholder='{$lang->task->hour}'")?>
<span class='input-group-addon fix-border br-0'><?php echo $lang->task->pri;?></span>
<div class='input-group-btn dropdown-pris'>
<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->task->priList, $pri, "class='hide'");?>
</div>
<span class='input-group-addon fix-border br-0'><?php echo $lang->task->estimateAB;?></span>
<?php echo html::input('estimate', $estimate, "class='form-control' placeholder='{$lang->task->hour}'");?>
</div>
</div>
</div>
@@ -76,19 +80,17 @@
<td colspan='3'><?php echo html::textarea('desc', $task->desc, "rows='10' class='form-control'");?></td>
</tr>
<tr>
<th><?php echo $lang->task->estStarted;?></th>
<td><?php echo html::input('estStarted', $task->estStarted, "class='form-control form-date'");?></td>
<th><?php echo $lang->task->datePlan;?></th>
<td>
<div class='input-group'>
<span class='input-group-addon'><?php echo $lang->task->deadline;?></span>
<?php echo html::input('deadline', $task->deadline, "class='form-control form-date'");?>
<div class='input-group' id='dataPlanGroup'>
<?php echo html::input('estStarted', $task->estStarted, "class='form-control form-date' placeholder='{$lang->task->estStarted}'");?>
<span class='input-group-addon fix-border'>~</span>
<?php echo html::input('deadline', $task->deadline, "class='form-control form-date' placeholder='{$lang->task->deadline}'");?>
</div>
</td>
</tr>
<tr>
<th><?php echo $lang->task->mailto;?></th>
<td colspan='3'>
<td colspan='2'>
<div class='input-group'>
<span class='input-group-addon'><?php echo $lang->task->mailto;?></span>
<?php echo html::select('mailto[]', $project->acl == 'private' ? $members : $users, str_replace(' ', '', $task->mailto), "multiple class='form-control'");?>
<?php if($contactLists) echo html::select('', $contactLists, '', "class='form-control chosen' onchange=\"setMailto('mailto', this.value)\"");?>
</div>

View File

@@ -18,3 +18,12 @@
.row .col-sm-10{width:89%;}
.row .col-sm-2{padding-left:0px; width:11%;}
#module + .chosen-container-single .chosen-single,
#stage + .chosen-container-multi .chosen-choices {border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px;}
#module + .chosen-container-single .chosen-single {border-top-right-radius: 0; border-bottom-right-radius: 0; margin-left: -1px;}
.dropdown-pris > .btn {background-color: #fff; text-shadow: none}
#moduleIdBox .input-group-btn > .btn {margin-left: -1px!important;}
#moduleIdBox .input-group-btn > .btn:first-child {border-left: none}

View File

@@ -151,4 +151,6 @@ $(function()
});
$("#preview").modalTrigger({width:960, type:'iframe'});
$('[data-toggle=tooltip]').tooltip();
})

View File

@@ -39,10 +39,9 @@
echo html::select('module', $moduleOptionMenu, $currentModuleID, "onchange='loadModuleRelated();' class='form-control chosen'");
if(count($moduleOptionMenu) == 1)
{
echo "<span class='input-group-addon'>";
echo html::a($this->createLink('tree', 'browse', "rootID=$productID&view=case&currentModuleID=0&branch=$branch"), $lang->tree->manage, '_blank');
echo '&nbsp; ';
echo html::a("javascript:loadProductModules($productID)", $lang->refresh);
echo "<span class='input-group-btn'>";
echo html::a($this->createLink('tree', 'browse', "rootID=$productID&view=case&currentModuleID=0&branch=$branch"), "<i class='icon icon-cog'></i>", '_blank', "data-toggle='tooltip' class='btn' title='{$lang->tree->manage}'");
echo html::a("javascript:loadProductModules($productID)", "<i class='icon icon-refresh'></i>", '', "data-toggle='tooltip' class='btn' title='{$lang->refresh}'");
echo '</span>';
}
?>
@@ -77,19 +76,23 @@
<tr>
<th><?php echo $lang->testcase->title;?></th>
<td colspan='2'>
<div class='row'>
<div class='col-sm-10'>
<?php echo html::input('title', $caseTitle, "class='form-control'");?>
</div>
<div class='col-sm-2'>
<div class='row-table'>
<div class='col-table w-p100'><?php echo html::input('title', $caseTitle, "class='form-control'");?></div>
<div class='col-table'>
<div class='input-group'>
<span class='input-group-addon fix-border'><?php echo $lang->testcase->pri;?></span>
<?php echo html::select('pri', $lang->testcase->priList, $pri, "class='form-control'");?>
<span class='input-group-addon fix-border br-0'><?php echo $lang->testcase->pri;?></span>
<div class='input-group-btn dropdown-pris'>
<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->testcase->priList, $pri, "class='hide'");?>
</div>
</div>
</div>
</div>
</td>
</tr>
</tr>
<tr>
<th><?php echo $lang->testcase->precondition;?></th>
<td colspan='2'><?php echo html::textarea('precondition', $precondition, " rows='2' class='form-control'");?></td>

View File

@@ -1479,8 +1479,9 @@ function initPrioritySelector()
$('.dropdown-pris').each(function()
{
var $dropdown = $(this);
var prefix = $dropdown.data('prefix') || 'pri';
var $select = $dropdown.find('select');
var selectVal = parseInt($select.val());
var selectVal = parseInt($select.hide().val());
var $menu = $dropdown.children('.dropdown-menu');
if(!$menu.length)
{
@@ -1489,14 +1490,21 @@ function initPrioritySelector()
}
if(!$menu.children('li').length)
{
var set = $dropdown.data('set').split(',') || [0,1,2,3,4];
var set = $select.children('option').map(function() {return parseInt($(this).val());}).get();
if(!set || !set.length)
{
set = $dropdown.data('set');
set = set ? set.split(',') : [0,1,2,3,4];
}
set.sort();
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>');
var v = set[i];
$menu.append('<li><a href="###" data-pri="' + v + '"><span class="' + prefix + v + '">' + (v ? v : '') + '</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.find('.pri-text').html('<span class="' + prefix + selectVal + '">' + (selectVal ? selectVal : '') + '</span>');
$dropdown.on('click', '.dropdown-menu > li > a', function()
{
@@ -1505,11 +1513,29 @@ function initPrioritySelector()
$a.parent().addClass('active');
selectVal = $a.data('pri');
$select.val(selectVal);
$dropdown.find('.pri-text').html('<span class="pri' + selectVal + '">' + (selectVal ? selectVal : '') + '</span>');
$dropdown.find('.pri-text').html('<span class="' + prefix + selectVal + '">' + (selectVal ? selectVal : '') + '</span>');
});
});
}
/**
* Apply cs style to page
* @return void
*/
function applyCssStyle(css, tag)
{
tag = tag || 'default';
var name = 'applyStyle-' + tag;
var $style = $('style#' + name);
if(!$style.length)
{
$style = $('<style id="' + name + '">').appendTo('body');
}
var styleTag = $style.get(0);
if (styleTag.styleSheet) styleTag.styleSheet.cssText = css;
else styleTag.innerHTML = css;
}
/* Ping the server every some minutes to keep the session. */
needPing = true;

View File

@@ -150,12 +150,12 @@ i[class^="icon-"],i[class*=" icon-"],.link-icon i[class^="icon-"],.link-icon i[c
/* 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: #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;}
.pri1{border-color: #d71319;color: #d71319;}
.pri2{border-color: #EA644A;color: #EA644A;}
.pri3{border-color: #BD7B46;color: #BD7B46;}
.pri4{border-color: #8666B8;color: #8666B8;}
.pri5{border-color: #03B8CF;color: #03B8CF}
.pri6{border-color: #38B03F;color: #38B03F}
.pri4{border-color: #dcbe1a;color: #dcbe1a;}
.pri5{border-color: #d0d836;color: #d0d836}
.pri6{border-color: #99c323;color: #99c323}
.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}