MantisBT - TestLink
View Issue Details
0003583TestLinkTest Specificationpublic2010-07-06 13:192012-09-01 20:00
normalfeature requestN/A
1.9 Beta 5 
1.9.4 (2012 Q3 - bug fixing) 
0003583: [Contribution] A small change to add a more visible step separation (horizontal layout).
If you want to have a more visible step separation in horizontal layout, you can modify the \lib\gui\templates\inc_steps.tpl (search for "<!-- Begin of steps separator -->").
No tags attached.
has duplicate 0003869closed Julian Separation between step action 
child of 0004382closed Julian Usability: Improve simple table for better readability (row background color, hovering effects, horizontal seperators ...) 
jpg steps_separator.jpg (226,672) 2010-07-06 13:19

jpg tc_steps.jpg (596,289) 2011-03-29 10:07
? inc_steps.tpl (6,050) 2011-03-29 10:14
png bulk_tc_delete.png (18,460) 2011-04-07 09:53

? (6,238) 2011-07-05 09:32
Issue History
2010-07-06 13:19difoolNew Issue
2010-07-06 13:19difoolFile Added: steps_separator.jpg
2010-07-06 14:31JulianNote Added: 0010558
2010-07-06 14:36difoolFile Added: inc_steps.tpl
2010-07-06 14:37difoolNote Added: 0010559
2010-07-06 14:42JulianDescription Updatedbug_revision_view_page.php?rev_id=152#r152
2010-10-08 14:42JulianRelationship addedhas duplicate 0003869
2010-11-01 09:15difoolNote Added: 0012224
2011-03-25 09:34difoolNote Added: 0014281
2011-03-25 09:42difoolNote Edited: 0014281bug_revision_view_page.php?bugnote_id=14281#r1020
2011-03-29 08:09JulianNote Added: 0014342
2011-03-29 10:07amitkhullarFile Added: tc_steps.jpg
2011-03-29 10:13amitkhullarFile Deleted: inc_steps.tpl
2011-03-29 10:14amitkhullarFile Added: inc_steps.tpl
2011-03-29 10:16amitkhullarAssigned To => amitkhullar
2011-03-29 10:16amitkhullarStatusnew => work in progress
2011-03-29 13:26fmanNote Added: 0014346
2011-03-29 14:15amitkhullarNote Added: 0014349
2011-03-30 05:45difoolNote Added: 0014361
2011-03-30 05:48difoolNote Edited: 0014361bug_revision_view_page.php?bugnote_id=14361#r1052
2011-03-30 09:06JulianNote Added: 0014363
2011-03-30 09:19JulianNote Edited: 0014363bug_revision_view_page.php?bugnote_id=14363#r1054
2011-04-04 18:36amitkhullarNote Added: 0014428
2011-04-04 18:43JulianNote Added: 0014429
2011-04-05 20:05difoolNote Added: 0014443
2011-04-05 20:42JulianNote Added: 0014445
2011-04-06 09:45JulianNote Added: 0014452
2011-04-06 10:01JulianNote Edited: 0014452bug_revision_view_page.php?bugnote_id=14452#r1072
2011-04-06 10:34fmanNote Added: 0014453
2011-04-06 10:47JulianRelationship addedchild of 0004382
2011-04-07 09:53JulianNote Added: 0014477
2011-04-07 09:53JulianFile Added: bulk_tc_delete.png
2011-04-11 13:01JulianNote Added: 0014555
2011-07-05 09:32amitkhullarFile Added:
2011-07-05 09:33amitkhullarNote Added: 0015469
2011-07-05 10:10JulianNote Added: 0015470
2011-07-06 03:33amitkhullarNote Added: 0015471
2011-07-06 06:47JulianNote Added: 0015473
2011-08-23 02:22jetmoreNote Added: 0015736
2011-08-31 13:22JulianNote Added: 0015766
2011-08-31 13:32jetmoreNote Added: 0015767
2011-08-31 13:34JulianNote Added: 0015768
2011-09-01 12:04JulianAssigned Toamitkhullar => Julian
2011-09-01 12:04JulianStatuswork in progress => new
2011-09-01 12:05JulianNote Added: 0015785
2011-09-01 12:05JulianStatusnew => resolved
2011-09-01 12:05JulianFixed in Version => 1.9.4 (2012 Q3 - bug fixing)
2011-09-01 12:05JulianResolutionopen => fixed
2012-09-01 20:00fmanNote Added: 0017370
2012-09-01 20:00fmanStatusresolved => closed

2010-07-06 14:31   
please do not copy/paste such an amount of code.
attach as document.
2010-07-06 14:37   
Would be useful if the bug reporter can edit his issue ...

inc_steps.tpl attached.
2010-11-01 09:15   
In standard, would be interesting to add a more visibility between steps by this solution or any another one (e.g. background color ?). Several people asked for.
2011-03-25 09:34   
(edited on: 2011-03-25 09:42)
This is still interesting even with steps implemented because when executing test case the steps haven't separtors leading sometimes to a difficult reading of the test case.

2011-03-29 08:09   
Amit - as you seem to be interested in this issue - please check the solution and maybe try to find a better way to seperate. i dont like the white stripe very much :)
2011-03-29 13:26   
please attach resulting image
2011-03-29 14:15   
tc_steps is already attached with the bug
2011-03-30 05:45   
(edited on: 2011-03-30 05:48)
A div with alternative light background color is perhaps also a good solution (with the cycle color option) ?

Why white strip (or any light color) ? Because a lot of black is already here (text) and separation must be subtile, just enough to let the brain understand there is a separation. If you add again black then your screen become heavier to your eyes.

But of course, my screenshot is when we just started that. Now separation is a lot thiner, i agree that on my screenshot it's quite "disgraceful".

2011-03-30 09:06   
(edited on: 2011-03-30 09:19)
needs to be improved:

1. fix also for vertical layout if it makes sense (please check config to change step layout)

2. lines are shown in test specification (test case view) AND test execution mode -> colspan has to be set according. for test specification it should be:
{if $session['testprojectOptions']->automationEnabled}
    <td colspan=6>
   <td colspan=7>

3. last line below last step should not be shown

4. Seperators should also be shown in step edit view

2011-04-04 18:36   
1: Not required for Vertical layout and works as expected.
2: Info corrected for colspan
3: Last line below step : U mean only 2 lines in between 3 steps, if this is what it means I will correct it.
4: Do we really need them.
2011-04-04 18:43   
3: Last line below step : U mean only 2 lines in between 3 steps, if this is what it means I will correct it.
- 2 steps 2 lines...


line below step2 looks cruel as table ends there too

4: Do we really need them.
- i would say yes
2011-04-05 20:05   
Could color of separation be easily fixed by user choice or it will be set by css ?

What about the cycle color ? No need to control if final line needed.
2011-04-05 20:42   
Issue starts to consume too much time.
Make some proposals and we will decide.
2011-04-06 09:45   
(edited on: 2011-04-06 10:01)
i think we should somehow extend simple table to adjust for different usage.

check for example "Test Reports -> General Test Plan Metric:
if many table rows for a report exist it really is very hard to find the right values
-> alternating row background colors would be the perfect solution

check test case steps
-> alternating row background colors would look cruel -> horizontal seperators are a good choice

Could imagine 3 types of simple tables
1. simple table with alternating row background colors (should be used for single line rows)
2. simple table with horizontal seperators (should be used for multiple line rows, like steps)
3. simple table as is now (should be used for small tables)

in addition we could use Franciscos solution from Bug 0004246:

<tr onMouseOver="this.bgColor='#CDDEF3';" onMouseOut="this.bgColor='#EEEEEE';">

2011-04-06 10:34   
I agree with Julian suggestions (note 14452) but this implementation has to be thinked very, very well.
2011-04-07 09:53   
i fixed 0004382 -> some tables do now have a tableruler when hovering a row.

Please try to find a simple solution to add horizontal seperators to tables with multi-line rows. your solution is ok, when it can be easily adapted to Bulk test case delete (test suite -> test case operations -> delete [define multiple platforms]). See attachment - there should be a horizontal seperator between the two test cases.
2011-04-11 13:01   
Reminder sent to: amitkhullar

Do you plan to continue work here?
2011-07-05 09:33   
Attached a new file with some better handling of separators. Please delete the old ones since I dont have any rights.
2011-07-05 10:10   
If you add the seperator to step edit mode i am fine with the solution.

Seperatur should not be shown before and after the step that is currently edited - what do you think ?
2011-07-06 03:33   
IMHO the separator should be only on the display page. In Edit Mode the Editor is active so there is already no confusion.
2011-07-06 06:47   
Other steps except the one in editor are not seperated... seperator should be in both places. could you please give it a look - should not take too long.
2011-08-23 02:22   
I don't know if this is useful, but I solved this problem in a different way tonight. I wanted alternating row colors when viewing steps, so the testers could visually separate the steps, and also so they eye could easily correlate the step and the result.

I am running 1.9.3.

First, I added the following to gui/themes/default/custom.css:

.row_color_1 {
    background-color: #DDDDDD;
.row_color_2 {
    background-color: #CCCCCC;

Then I patched gui/templates/testcases/inc_steps.tpl like so:

--- inc_steps.tpl.dist 2011-08-22 21:08:21.000000000 -0500
+++ inc_steps.tpl 2011-08-22 21:13:02.000000000 -0500
@@ -45,7 +45,7 @@
        {* BUGID 3376 *}
        {foreach from=$steps item=step_info}
- <tr id="step_row_{$step_info.step_number}">
+ <tr id="step_row_{$step_info.step_number}" class="{cycle values="row_color_1,row_color_2"}">
                <td style="text-align:left;">
                        <span class="order_info" style='display:none'>
                        <input type="text" name="step_set[{$}]" id="step_set_{$}"

That was all it took to make my testers much happier...
2011-08-31 13:22   
Sorry jetmore. Your solution will make the UI look clumsy in my eyes. I prefer Amits solution. Thanks anyway for your contribution.

@Amit: Do you plan to try to add the row in step edit mode? please let me know
2011-08-31 13:32   
No worries. I needed a solution _right then_. I'll use my solution until I can evaluate Amit's in an actual release. Thanks for looking at it.
2011-08-31 13:34   
You can see a screenshot in issue 0004727: Attachment: edit_step_via_icon.png - VIEW Mode
2011-09-01 12:05   
Commited and tested Amits changes to 1.9 and master.
Also added horizontal rows in step edit mode.

1.9: [^]

Master: [^]
2012-09-01 20:00   
1.9.4 released