From 262363a3ba80e0eea50f90cf0b921c7628a31af2 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Fri, 3 Mar 2017 17:48:08 +0800
Subject: [PATCH]  * change testcase steps form UI.

---
 module/testcase/css/common.css       | 14 +++++++++++++-
 module/testcase/js/common.js         |  2 ++
 module/testcase/view/create.html.php |  8 ++++----
 module/testcase/view/edit.html.php   |  8 ++++----
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/module/testcase/css/common.css b/module/testcase/css/common.css
index e2b8347c2d..8b137720cd 100644
--- a/module/testcase/css/common.css
+++ b/module/testcase/css/common.css
@@ -8,8 +8,9 @@
 #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-child-id {display: table-cell; min-width: 40px;}
 #steps .step-child .step-id {color: transparent}
+#steps .step-actions {width: 90px; text-align: center;}
 
 #steps .btn-step-move {cursor: move}
 #steps.sortable > tr.drag-shadow {display: none}
@@ -19,3 +20,14 @@
 #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;}
+
+.table-bordered > #steps > tr > td {padding: 0; background-color: #fafafa; border: 1px solid #ddd!important; border-left-style: dotted!important; border-right-style: dotted!important;}
+.table-bordered > #steps > tr > td.step-id { padding-right: 8px;}
+.table-bordered > #steps > tr > td .btn {border-color: transparent; background-color: transparent}
+.table-bordered > #steps > tr > td .btn:hover,
+.table-bordered > #steps > tr > td .btn:focus {background-color: #ddd}
+.table-bordered > #steps .input-group-addon {border: none; background-color: transparent; border-left: 1px dotted #e5e5e5}
+.table-bordered > #steps > tr > td textarea {border-color: #fff; box-shadow: none}
+.table-bordered > #steps > tr > td textarea:hover {border-color: #808080;}
+.table-bordered > #steps > tr > td textarea:focus {border-color: #4d90fe;}
+.table-bordered > #steps .step-child .step-child-id {border-right: 1px dotted #ddd; border-left: none}
diff --git a/module/testcase/js/common.js b/module/testcase/js/common.js
index f387ad151d..1700bdd404 100644
--- a/module/testcase/js/common.js
+++ b/module/testcase/js/common.js
@@ -132,6 +132,8 @@ function initSteps(selector)
             if($row) $row.after($step);
             else $steps.append($step);
             $step.addClass('step-new');
+            setTimeout(function(){$step.find('.step-steps').focus();}, 10);
+
         }
     };
     var toggleStepRowType = function($row, toggleisGroup)
diff --git a/module/testcase/view/create.html.php b/module/testcase/view/create.html.php
index 184160cc66..f679e61642 100644
--- a/module/testcase/view/create.html.php
+++ b/module/testcase/view/create.html.php
@@ -129,13 +129,13 @@
       <tr>
         <th><?php echo $lang->testcase->steps;?></th>
         <td colspan='2'>
-          <table class='table table-form mg-0' style='border: 1px solid #ddd'>
+          <table class='table table-form mg-0 table-bordered' style='border: 1px solid #ddd'>
             <thead>
               <tr>
                 <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>
+                <th class='step-actions'><?php echo $lang->actions;?></th>
               </tr>
             </thead>
             <tbody id='steps' class='sortable' data-group-name='<?php echo $lang->testcase->groupName ?>'>
@@ -155,7 +155,7 @@
                 <td>
                   <textarea rows='1' class='form-control autosize step-expects' name='expects[]'></textarea>
                 </td>
-                <td>
+                <td class='step-actions'>
                   <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>
@@ -180,7 +180,7 @@
                 <td>
                   <?php echo html::textarea('expects[]', $step->expect, "rows='1' class='form-control autosize step-expects'") ?>
                 </td>
-                <td>
+                <td class='step-actions'>
                   <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>
diff --git a/module/testcase/view/edit.html.php b/module/testcase/view/edit.html.php
index 800bb4846a..625df93e96 100644
--- a/module/testcase/view/edit.html.php
+++ b/module/testcase/view/edit.html.php
@@ -42,13 +42,13 @@
       <fieldset class='fieldset-pure'>
         <legend><?php echo $lang->testcase->steps;?></legend>
         <div class='form-group'>
-          <table class='table table-form'>
+          <table class='table table-form table-bordered'>
             <thead>
               <tr>
                 <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-100px'><?php echo $lang->actions;?></th>
+                <th class='step-actions'><?php echo $lang->actions;?></th>
               </tr>
             </thead>
             <tbody id='steps' class='sortable' data-group-name='<?php echo $lang->testcase->groupName ?>'>
@@ -68,7 +68,7 @@
                 <td>
                   <textarea rows='1' class='form-control autosize step-expects' name='expects[]'></textarea>
                 </td>
-                <td>
+                <td class='step-actions'>
                   <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>
@@ -93,7 +93,7 @@
                 <td>
                   <?php echo html::textarea('expects[]', $step->expect, "rows='1' class='form-control autosize step-expects'") ?>
                 </td>
-                <td>
+                <td class='step-actions'>
                   <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>