Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* code for task #2906, change edit testcase UI.

Browse Source
This commit is contained in:
Catouse
2017-03-02 10:31:23 +08:00
parent fdd12316ae
commit 5179018d24
7 changed files with 171 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/testcase/css/common.css
+20
View File
@@ -1 +1,21 @@
.table-form > tbody > tr > td .btn-group-vertical > .btn {margin-left: 0!important; padding: 2px 8px}
#steps .step-id {text-align: right}
#steps .step-child-id {background-color: transparent; border: none; display: none; width: 30px; padding-left: 0; padding-right: 0; text-align: right; padding-right: 8px}
#steps .checkbox-inline input[type="checkbox"] {top: -2px}
#steps .btn-group .btn {padding-left: 0; padding-right: 0; min-width: 30px;}
#steps .step-actions {width: 98px;}
#steps .active td {transition: background-color .5s;}
#steps .step-group .step-steps {resize: none; max-height: 30px;}
#steps .step-group .step-expects {display: none;}
#steps .step-child .step-child-id {display: table-cell;}
#steps .step-child .step-id {color: transparent}
#steps .btn-step-move {cursor: move}
#steps.sortable > tr.drag-shadow {display: none}
#steps.sortable-sorting > tr {transition: all .2s; position: relative; z-index: 5; opacity: .3;}
#steps.sortable-sorting {cursor: move;}
#steps.sortable-sorting > tr.drag-row {opacity: 1; z-index: 10; box-shadow: 0 2px 4px red}
#steps.sortable-sorting > tr.drag-row + tr > td {box-shadow: inset 0 4px 2px rgba(0,0,0,.2)}
#steps.sortable-sorting > tr.drag-row > td {background-color: #edf3fe!important}
#steps.sortable > tr.drop-success > td {background-color: #cfe0ff; transition: background-color 2s;}
module/testcase/css/create.css
-20
View File
@@ -35,23 +35,3 @@
.colorpicker.input-group-btn > .btn {border-right: none}
#branch {border-left-width: 0px;}
#steps .step-id {text-align: right}
#steps .step-child-id {background-color: transparent; border: none; display: none; width: 30px; padding-left: 0; padding-right: 0; text-align: right; padding-right: 8px}
#steps .checkbox-inline input[type="checkbox"] {top: -2px}
#steps .btn-group .btn {padding-left: 0; padding-right: 0; min-width: 30px;}
#steps .step-actions {width: 98px;}
#steps .active td {transition: background-color .5s;}
#steps .step-group .step-steps {resize: none; max-height: 30px;}
#steps .step-group .step-expects {display: none;}
#steps .step-child .step-child-id {display: table-cell;}
#steps .step-child .step-id {color: transparent}
#steps .btn-step-move {cursor: move}
#steps.sortable > tr.drag-shadow {display: none}
#steps.sortable-sorting > tr {transition: all .2s; position: relative; z-index: 5; opacity: .3;}
#steps.sortable-sorting {cursor: move;}
#steps.sortable-sorting > tr.drag-row {opacity: 1; z-index: 10; box-shadow: 0 2px 4px red}
#steps.sortable-sorting > tr.drag-row + tr > td {box-shadow: inset 0 4px 2px rgba(0,0,0,.2)}
#steps.sortable-sorting > tr.drag-row > td {background-color: #edf3fe!important}
#steps.sortable > tr.drop-success > td {background-color: #cfe0ff; transition: background-color 2s;}
module/testcase/js/common.js
+95 -54
View File
@@ -103,65 +103,106 @@ function setStories()
}
/**
* Delete a step row.
* Init testcase steps in form
*
* @param int $rowID
* @param string selector
* @access public
* @return void
*/
function deleteRow(rowID)
function initSteps(selector)
{
if($('.stepID').size() == 1) return;
$('#row' + rowID).remove();
updateStepID();
}
/**
* Insert before the step.
*
* @param int $rowID
* @access public
* @return void
*/
function preInsert(rowID)
{
$('#row' + rowID).before(createRow());
updateStepID();
}
/**
* Insert after the step.
*
* @param int $rowID
* @access public
* @return void
*/
function postInsert(rowID)
{
$('#row' + rowID).after(createRow());
updateStepID();
}
/**
* Create a step row.
*
* @access public
* @return void
*/
function createRow()
{
if(newRowID == 0) newRowID = $('.stepID').size();
newRowID ++;
var newRow = "<tr class='text-center' id='row" + newRowID + "'>";
newRow += "<td class='stepID strong'></td>";
newRow += "<td><textarea name='steps[]' rows=3 class='form-control'></textarea></td>";
newRow += "<td><textarea name='expects[]' rows=3 class='form-control'></textarea></td>";
newRow += "<td class='text-left'>";
newRow += "<button type='button' tabindex='-1' class='addbutton btn' title='" + lblBefore + "' onclick='preInsert(" + newRowID + ")' ><i class='icon icon-double-angle-up'></i></button>";
newRow += "<button type='button' tabindex='-1' class='addbutton btn' title='" + lblAfter + "' onclick='postInsert(" + newRowID + ")' ><i class='icon icon-double-angle-down'></i></button>";
newRow += "<button type='button' tabindex='-1' class='delbutton btn' title='" + lblDelete + "' onclick='deleteRow(" + newRowID + ")' ><i class='icon icon-remove'></i></button>";
newRow += "</td>";
return newRow;
if(navigator.userAgent.indexOf("Firefox") < 0)
{
$(document).on('input keyup paste change', 'textarea.autosize', function()
{
this.style.height = 'auto';
this.style.height = (this.scrollHeight + 2) + "px";
});
}
var $steps = $(selector || '#steps');
var $stepTemplate = $('#stepTemplate').detach().removeClass('template').attr('id', null);
var initSortableCallTask = null;
var groupNameText = $steps.data('groupName');
var insertStepRow = function($row, count)
{
if(count === undefined) count = 1;
for(var i = 0; i < count; ++i)
{
var $step = $stepTemplate.clone();
if($row) $row.after($step);
else $steps.append($step);
$step.addClass('step-new');
}
};
var toggleStepRowType = function($row, toggleisGroup)
{
if(toggleisGroup === undefined) targetIsGroup = $row.find('.step-type').is(':checked');
$row.toggleClass('step-group', targetIsGroup);
$row.find('.step-steps').toggleClass('autosize', !targetIsGroup).attr('placeholder', targetIsGroup ? groupNameText : null).focus();
};
var refreshStepsID = function()
{
var parentId = 1, childId = 0;
$steps.children('.step:not(.drag-shadow)').each(function(idx)
{
var $step = $(this);
var isGroup = $step.find('.step-type').is(':checked');
var stepID;
if(isGroup || !childId)
{
$step.removeClass('step-child');
stepID = parentId++;
$step.find('.step-id').text(stepID);
if(isGroup) childId = 1;
}
else
{
stepID = (parentId - 1) + '.' + (childId++);
$step.addClass('step-child').find('.step-child-id').text(stepID);
}
$step.find('.step-id-control').val(stepID);
});
};
var initSortable = function()
{
clearTimeout(initSortableCallTask);
initSortableCallTask = setTimeout(function()
{
var $oldSteps = $steps.children('.step');
var $newSteps = $oldSteps.clone();
$oldSteps.remove();
$steps.append($newSteps);
$steps.sortable(
{
selector: 'tr.step',
dragCssClass: 'drag-row',
trigger: '.btn-step-move',
finish: function(e)
{
e.element.addClass('drop-success');
setTimeout(function(){$steps.find('.drop-success').removeClass('drop-success');}, 800);
refreshStepsID();
}
});
$steps.children('.step-new').removeClass('step-new').last().find('textarea:first').focus();
}, 100);
}
$steps.on('click', '.btn-step-add', function()
{
insertStepRow($(this).closest('.step'));
initSortable();
refreshStepsID();
}).on('click', '.btn-step-delete', function()
{
$(this).closest('.step').remove();
refreshStepsID();
}).on('change', '.step-type', function()
{
toggleStepRowType($(this).closest('.step'));
refreshStepsID();
});
initSortable();
refreshStepsID();
}
/**
module/testcase/js/create.js
-96
View File
@@ -15,102 +15,6 @@ function setPreview()
}
}
function initSteps()
{
if(navigator.userAgent.indexOf("Firefox") < 0)
{
$(document).on('input keyup paste change', 'textarea.autosize', function()
{
this.style.height = 'auto';
this.style.height = (this.scrollHeight + 2) + "px";
});
}
var $steps = $('#steps');
var $stepTemplate = $('#stepTemplate').detach().removeClass('template').attr('id', null);
var initSortableCallTask = null;
var groupNameText = $steps.data('groupName');
var insertStepRow = function($row, count)
{
if(count === undefined) count = 1;
for(var i = 0; i < count; ++i)
{
var $step = $stepTemplate.clone();
if($row) $row.after($step);
else $steps.append($step);
$step.addClass('step-new');
}
};
var toggleStepRowType = function($row, toggleisGroup)
{
if(toggleisGroup === undefined) targetIsGroup = $row.find('.step-type').is(':checked');
$row.toggleClass('step-group', targetIsGroup);
$row.find('.step-steps').toggleClass('autosize', !targetIsGroup).attr('placeholder', targetIsGroup ? groupNameText : null).focus();
};
var refreshStepsID = function()
{
var parentId = 1, childId = 0;
$steps.children('.step:not(.drag-shadow)').each(function(idx)
{
var $step = $(this);
var isGroup = $step.find('.step-type').is(':checked');
var stepID;
if(isGroup || !childId)
{
$step.removeClass('step-child');
stepID = parentId++;
$step.find('.step-id').text(stepID);
if(isGroup) childId = 1;
}
else
{
stepID = (parentId - 1) + '.' + (childId++);
$step.addClass('step-child').find('.step-child-id').text(stepID);
}
$step.find('.step-id-control').val(stepID);
});
};
var initSortable = function()
{
clearTimeout(initSortableCallTask);
initSortableCallTask = setTimeout(function()
{
var $oldSteps = $steps.children('.step');
var $newSteps = $oldSteps.clone();
$oldSteps.remove();
$steps.append($newSteps);
$steps.sortable(
{
selector: 'tr.step',
dragCssClass: 'drag-row',
trigger: '.btn-step-move',
finish: function(e)
{
e.element.addClass('drop-success');
setTimeout(function(){$steps.find('.drop-success').removeClass('drop-success');}, 800);
refreshStepsID();
}
});
$steps.children('.step-new').removeClass('step-new').last().find('textarea:first').focus();
}, 100);
}
$steps.on('click', '.btn-step-add', function()
{
insertStepRow($(this).closest('.step'));
initSortable();
refreshStepsID();
}).on('click', '.btn-step-delete', function()
{
$(this).closest('.step').remove();
refreshStepsID();
}).on('change', '.step-type', function()
{
toggleStepRowType($(this).closest('.step'));
refreshStepsID();
});
initSortable();
refreshStepsID();
}
$(function()
{
var $searchStories = $('#searchStories');
module/testcase/js/edit.js
+2
View File
@@ -16,6 +16,8 @@ function getList()
$(document).ready(function()
{
$("#story").chosen(defaultChosenOptions);
initSteps();
});
module/testcase/view/create.html.php
+1 -1
View File
@@ -132,7 +132,7 @@
<table class='table table-form mg-0' style='border: 1px solid #ddd'>
<thead>
<tr>
<th class='w-40px'><?php echo $lang->testcase->stepID;?></th>
<th class='w-40px text-right'><?php echo $lang->testcase->stepID;?></th>
<th width="45%"><?php echo $lang->testcase->stepDesc;?></th>
<th><?php echo $lang->testcase->stepExpect;?></th>
<th class='w-100px'><?php echo $lang->actions;?></th>
module/testcase/view/edit.html.php
+53 -17
View File
@@ -48,25 +48,61 @@
<th class='w-40px'><?php echo $lang->testcase->stepID;?></th>
<th width="45%"><?php echo $lang->testcase->stepDesc;?></th>
<th><?php echo $lang->testcase->stepExpect;?></th>
<th class='w-60px'><?php echo $lang->actions;?></th>
<th class='w-100px'><?php echo $lang->actions;?></th>
</tr>
</thead>
<?php
foreach($case->steps as $stepID => $step)
{
$stepID += 1;
echo "<tr id='row$stepID' class='text-center'>";
echo "<td class='stepID strong'>$stepID</td>";
echo '<td>' . html::textarea('steps[]', $step->desc, "rows='3' class='form-control'") . '</td>';
echo '<td>' . html::textarea('expects[]', $step->expect, "rows='3' class='form-control'") . '</td>';
echo "<td class='text-left'>";
echo "<button type='button' tabindex='-1' class='addbutton btn' onclick='preInsert($stepID)' title='{$lang->testcase->insertBefore}'><i class='icon icon-double-angle-up'></i></button>";
echo "<button type='button' tabindex='-1' class='addbutton btn' onclick='postInsert($stepID)' title='{$lang->testcase->insertAfter}' ><i class='icon icon-double-angle-down'></i></button>";
echo "<button type='button' tabindex='-1' class='delbutton btn' onclick='deleteRow($stepID)' title='{$lang->testcase->deleteStep}' ><i class='icon icon-remove'></i></button>";
echo "</td>";
echo '</tr>';
}
?>
<tbody id='steps' class='sortable' data-group-name='<?php echo $lang->testcase->groupName ?>'>
<tr class='template step' id='stepTemplate'>
<td class='step-id'><input type='hidden' name='stepID[]' class='step-id-control'></td>
<td>
<div class='input-group'>
<span class='input-group-addon step-child-id'></span>
<textarea rows='1' class='form-control autosize step-steps' name='steps[]'></textarea>
<span class="input-group-addon">
<label class="checkbox-inline">
<input type='checkbox' name='stepType[]' value='parent' class='step-type'> <?php echo $lang->testcase->group ?>
</label>
</span>
</div>
</td>
<td>
<textarea rows='1' class='form-control autosize step-expects' name='expects[]'></textarea>
</td>
<td>
<div class='btn-group'>
<button type='button' class='btn btn-step-add'><i class='icon icon-plus'></i></button>
<button type='button' class='btn btn-step-move'><i class='icon icon-move'></i></button>
<button type='button' class='btn btn-step-delete'><i class='icon icon-remove'></i></button>
</div>
</td>
</tr>
<?php foreach($case->steps as $stepID => $step):?>
<tr class='step'>
<td class='step-id'><input type='hidden' name='stepID[]' class='step-id-control'></td>
<td>
<div class='input-group'>
<span class='input-group-addon step-child-id'></span>
<?php echo html::textarea('steps[]', $step->desc, "rows='1' class='form-control autosize step-steps'") ?>
<span class="input-group-addon">
<label class="checkbox-inline">
<input type='checkbox' name='stepType[]' value='parent' class='step-type'> <?php echo $lang->testcase->group ?>
</label>
</span>
</div>
</td>
<td>
<?php echo html::textarea('expects[]', $step->expect, "rows='1' class='form-control autosize step-expects'") ?>
</td>
<td>
<div class='btn-group'>
<button type='button' class='btn btn-step-add'><i class='icon icon-plus'></i></button>
<button type='button' class='btn btn-step-move'><i class='icon icon-move'></i></button>
<button type='button' class='btn btn-step-delete'><i class='icon icon-remove'></i></button>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</fieldset>