Changelog clearly laid out, severity as background-color

Post about your customizations to share with others.

Moderators: Developer, Contributor

Post Reply
biitli
Posts: 2
Joined: 13 Jun 2007, 10:12
Location: Switzerland

Changelog clearly laid out, severity as background-color

Post by biitli »

- using mantis 1.05 -
I changed the changelog to show it in some kind of table-format. It is formatted with spaces for better readability and allows copy/paste as before. Private bugs are marked with '(p)' and severity is shown with different background-colors.

Example
old format:
- 0001162: [User Interface] no access to config-dialog as 'tester' (misterX)
- 0001164: [Tcp/Ip-communication] missing command 'getId' (misterY)
new format: [spaces shown as '_' here]
0001162:___User Interface________no access to config-dialog as 'tester'_____misterX
0001164:(p)Tcp/Ip-communication__missing command 'getId'_______________misterY

The code is implemented in a customized function. Store the following code in a (new) file named ' custom_functions_inc.php' in directory '../mantis/'

Code: Select all

<?php
	# --------------------
	# Prints one entry in the changelog.
	# This custom function overrides the existing function
	#
	# * formatted as 'table' with spaces for better readability
	# * allows copy/paste of changelog as before, without 'loosing table-format'
	# * marks private bugs after bug-id with '(p)'
	# * additional background-color to show severity of bug
	#   colors:
	#     FEATURE:                           green
	#     TRIVIAL, TEXT, TWEAK:              floralwhite
	#     MINOR:                             yellow
	#     MAJOR:                             orange
	#     CRASH:                             red
	#     BLOCK:                             darker red
	#
	# example
	# old format:
	#  - 0001162: [User Interface] no access to config-dialog as 'tester' (misterX)
	#  - 0001164: [Tcp/Ip-communication] missing command 'getId' (misterY)
	# new format:
	#  0001162:   User Interface            no access to config-dialog as 'tester'          misterX
	#  0001164:(p)Tcp/Ip-communication      missing command 'getId'                         misterY
	# 

	function custom_function_override_changelog_print_issue( $p_issue_id )
	{
		$t_bug = bug_get( $p_issue_id );								# get bug-info

		# set background-color based on severity
		switch ($t_bug->severity)
		{
		case FEATURE:
   			$bgColor = '#CCFFCC';										# green
   			break;
		case TRIVIAL:
		case TEXT:
		case TWEAK:
   			$bgColor = '#FFFAF0';										# floralwhite
   			break;
		case MINOR:
   			$bgColor = '#FFFFCC';										# yellow
   			break;
		case MAJOR:
   			$bgColor = '#FFCC99';										# orange
   			break;
		case CRASH:
   			$bgColor = '#FF9999';										# red
   			break;
		case BLOCK:
   			$bgColor = '#FF6666';										# darker red
   		break;
		}
		echo('<div style="background-color: '); echo($bgColor); echo(';">');

		echo('<small>');												# use small font

		# print bug-id
		echo string_get_bug_view_link( $p_issue_id ), ':';

		# print view-state (p for private)
		if ($t_bug->view_state == VS_PUBLIC)
        {
		  echo('&nbsp&nbsp&nbsp');
        }
        else
        {
		  echo('(p)');
        }

		# print category (bold)
		echo('<b>'); echo($t_bug->category); echo('</b>');
		for ($i = strlen($t_bug->category); $i <= 25; $i++)				# fillup with spaces (= tab)
		{
   			echo('&nbsp');
		}

		# print bug-summary
		echo(' '); echo(string_display( $t_bug->summary ));
		for ($i = strlen($t_bug->summary); $i <= 90; $i++)				# fillup with spaces (= tab)
		{
   			echo('&nbsp');
		}

		# print handler if there is any
		if ( $t_bug->handler_id != 0 )
		{
			echo(' '); echo(prepare_user_name( $t_bug->handler_id ));
		}
		
		echo ('</small>');
		echo ('</div>');
	}
?>
SneakyWho_am_i
Posts: 13
Joined: 14 May 2008, 01:20

Re: Changelog clearly laid out, severity as background-color

Post by SneakyWho_am_i »

double post, something went wrong communicating with the extremely foreign server.
Post with all the non-convention-following code comes next. sorry, people.
Last edited by SneakyWho_am_i on 19 May 2008, 09:25, edited 1 time in total.
SneakyWho_am_i
Posts: 13
Joined: 14 May 2008, 01:20

Re: Changelog clearly laid out, severity as background-color

Post by SneakyWho_am_i »

I have been playing with the file you posted here. I thought that I could do way better. I played around for ages and really I just made a lot of stupid bloat :( but it looks pretty so I'll post it here, maybe someone will fix it up.

Basically, I had a couple of issues with your one:
- if I wanted colour-coded severity on other pages, I would be hard-coding a second (identical) list into the php. Then if I changed my mind about the colours, I'd have to edit multiple files/functions. I like to keep a fairly generic stylesheet in the user's cache, so, yeah.
- the rest of the screen is fluid width, and the changelog is just not
- It's hard to not select the spaces

But I was in love with the idea so yeah I had a tinker with it.

IN THIS POST PLEASE NOTE: I haven't bothered to set category names in that product. Oops, oh well, if it doesn't work, you know what to do. ALSO I've only tested with 1.1.1 This may or may not work with other versions; perhaps they've already nailed this in 1.2.x ?? Oh AND... No, your list won't be stripey. It just happens that by chance I was resolving bugs in a stripey kind of a way. See how many beautiful patterns you can make! ;)

Here is the code mine produces now on the client side, I know it doesn't look like much (You don't need this one, it's just an example of the output):

Code: Select all

<div class="severity_50 smalltext table">
<span id="test1" class="cell"><a href="view.php?id=5" title="[resolved] Bug Tracker is Too Bright (and other small theme problems)">0000005</a>:</span><span class="hidden">&nbsp;&nbsp;&nbsp;</span>

<span id="test3" class="cell">
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
Bug Tracker is Too Bright (and other small theme problems)</span>
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="test4" class="cell">SneakyWho_am_i</span>
</div>
<div class="severity_20 smalltext table">
<span id="test1" class="cell"><a href="view.php?id=2" title="[resolved] Attachments should be opened in browser, not sent as attachments">0000002</a>:</span><span class="hidden">&nbsp;&nbsp;&nbsp;</span>

<span id="test3" class="cell">
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
Attachments should be opened in browser, not sent as attachments</span>
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="test4" class="cell">SneakyWho_am_i</span>
</div>
<div class="severity_60 smalltext table">
<span id="test1" class="cell"><a href="view.php?id=3" title="[resolved] SCMBug Attempt Unsuccessful">0000003</a>:</span><span class="hidden">&nbsp;&nbsp;&nbsp;</span>

<span id="test3" class="cell">
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
SCMBug Attempt Unsuccessful</span>

<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="test4" class="cell">SneakyWho_am_i</span>
</div>
<div class="severity_10 smalltext table">
<span id="test1" class="cell"><a href="view.php?id=4" title="[resolved] "pre" elements should not look like normal text">0000004</a>:</span><span class="hidden">&nbsp;&nbsp;&nbsp;</span>

<span id="test3" class="cell">
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
"pre" elements should not look like normal text</span>
<span class="hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span id="test4" class="cell">SneakyWho_am_i</span>
</div>
Here's what that might look like if you copied it directly (You don't need this one, it's just an example of the output):

Code: Select all

0000005:                  Bug Tracker is Too Bright (and other small theme problems)                 SneakyWho_am_i
0000002:                  Attachments should be opened in browser, not sent as attachments           SneakyWho_am_i
0000003:                  SCMBug Attempt Unsuccessful                                                SneakyWho_am_i
0000004:                  "pre" elements should not look like normal text                            SneakyWho_am_i 
Well, trust me, it works with a monospace font.......
It's a bit big. I'm interested in having the summary on its own line because I don't really like going over 75 characters or so. It's burned into my psyche :(

Updated php function to make this all happen (You need this one):

Code: Select all

<?php
   # --------------------
   # Prints one entry in the changelog.
   # This custom function overrides the existing function
   #
   # * formatted as 'table' on screen with CSS for better readability and support for fluid widths
   # * copying to clipboard retains table format due to clipboard acquisition of hidden "tabs"
   # * marks private bugs after bug-id with '(p)'
   # * bug severity is attached as a CLASS, allowing fine-grained administration of bug appearance through CSS
   # * hopefully it's faster to let the client (in css handle bug color coding - but it was doen for another purpose:
   # - - - the colors are in CSS so that if you port all your pages this way, you can control the bug colours on ALL pages
   #       ---- with just one file ---- and that, after all, is exactly what CSS is about.
   #
   # * Tried to remove presentational markup, but I actually ended up adding MORE instead :( :( :(
   #!!FIXME -- really it should just have a "copy" or "print" or "export" link/button ;) lol, RSS feed??
   #
   #
   # example
   # old format:
   #  - 0001162: [User Interface] no access to config-dialog as 'tester' (misterX)
   #  - 0001164: [Tcp/Ip-communication] missing command 'getId' (misterY)
   # new format:
   #  0001162:   User Interface            no access to config-dialog as 'tester'          misterX
   #  0001164:(p)Tcp/Ip-communication      missing command 'getId'                         misterY
   #

   function custom_function_override_changelog_print_issue( $p_issue_id )
   {
      $t_bug = bug_get( $p_issue_id );                        # get bug-info

$t_category_spacecount = 3 * 4; # how many tabs do we want? multiply that by four for spaces
$t_summary_spacecount = 18 * 4;
$t_category = $t_bug->category;
$t_assignee = $t_bug->handler_id;
$t_category_length = $t_category_spacecount - strlen($t_category); # how much space to allow for this
$t_summary_length = $t_summary_spacecount - strlen($t_bug->summary); # because otherwise it does a strlen() every time it starts the loop
for ($i = 0; $i <= $t_category_length; $i++) # add for spaces for each tab as per our calculations
$t_category_tabs .= '&nbsp;';
for ($i = 0; $i <= $t_summary_length; $i++)
$t_summary_tabs .= '&nbsp;';

#now our one and only echo 8)
echo '
<div class="severity_',$t_bug->severity,' smalltext table">
<span id="test1" class="cell">',string_get_bug_view_link( $p_issue_id ), ':</span>',

      # view-state (p for private)
    (  ($t_bug->view_state == VS_PUBLIC) ?
             '<span class="hidden">&nbsp;&nbsp;&nbsp;</span>' : '(p)' ),
        

      # category (bold), then summary, then assignee or whatever (what if we have custom fields in here??)
'

<span id="test3" class="cell">
',(($t_category) ? '<span id="test2" class="strong">'.$t_category.'</span>' : '' ),
'<span class="hidden">',$t_category_tabs,'</span>
',$t_bug->summary,'</span>
<span class="hidden">',$t_summary_tabs,'</span>
<span id="test4" class="cell">',( ( $t_assignee ) ? prepare_user_name( $t_assignee ) : '' ),'</span>
</div>';
   }?>
And of course, you need CSS for this (You also need this one):

Code: Select all

/* forgot to add comments */
*.strong { font-weight: 900; } /* for the bold category names (not shown in my shots) */
*.hidden { display:none; } /* the tabs will never be displayed, but you can still copy them. */
*.cell { display:table-cell; width: 5% } /* each cell on our changelog list (actually a span) should be rendered as a table cell. ie users might be able to get away with inline-block */
*#test3 { text-align: left; display:table-cell; width: 50% max-width: 90%} /* make sure the summary text is left aligned and sitting in the middle */
*#test4 { text-align: right; position: static;} /* dev names are lined up against the RHS of the page */
*.table { display: table; width: 100%; position: relative; table-layout: fixed; } /* this is a major kludge. this is just a div containing bug info! */
*.table * { background: transparent; color: inherit;} /* the stuff inside our (tables|divs|bug rows), however, should not have any font colour of its own or background colour at this point - clean slate!!
Below here, make a list of your severities (consult the database or the source of the admin page if unsure) and set aside their colours explicitly (yours might be the same as mine).
Don't use my colours, though, as they are _stupid_ and _horrible_, and very _low_contrast_. I just banged them together as an example of how you MIGHT do it, if you were CRAZY. */
*.severity_10 { background: #00FF00; color: black;}
*.severity_20 { background: #55FF55; color: black;}
*.severity_30 { background: #99FF99; color: black;}
*.severity_40 { background: #AAFFAA; color: black;}
*.severity_50 { background: #FFFFFF; color: black;}
*.severity_60 { background: #FFDDDD; color: black;}
*.severity_70 { background: #FFAAAA; color: black;}
*.severity_80 { background: #FF9999; color: black;}
*.severity_90 { background: #FF5555; color: black;}
*.severity_100 { background: #FF0000; color: black;}
/* finally, set a colour for the links to the bug descriptions. */
*.table a { color: blue;}
I know it's a lot of css, don't hate me though, you only have to send it once. IMHO it's worth it for the extra freedom.......

I'm glad that it's put height and width restrictions on my attachments automatically for me :)
Here's the changelog window with my weird and alien patch applied - with the window scaled to 640x480. Notice how it remains tabular and notice how it adapts to the viewport's dimensions, so it doesn't look out of whack with Mantis itself.....
Here's the changelog window with my weird and alien patch applied - with the window scaled to 640x480. Notice how it remains tabular and notice how it adapts to the viewport's dimensions, so it doesn't look out of whack with Mantis itself.....
changelog_small.png (180.78 KiB) Viewed 6526 times
Here's the hack, applied with my bizarre colours etc. Note how I've got the browser window quite large, but it fills the whole window (actually some might consider this a disadvantage...)
Here's the hack, applied with my bizarre colours etc. Note how I've got the browser window quite large, but it fills the whole window (actually some might consider this a disadvantage...)
changelog_large.png (136.69 KiB) Viewed 6522 times
SneakyWho_am_i
Posts: 13
Joined: 14 May 2008, 01:20

Re: Changelog clearly laid out, severity as background-color

Post by SneakyWho_am_i »

TRIPLE post! I AM scum.

Updated CSS which on my particular installation currently:
- sets severity colors
- sets status colours (including in "my view" and such)

Code: Select all

strong { font-weight: 900; }
*.hidden { display:none; }
*.cell { display:table-cell; width: 5% }
*#test3 { text-align: left; display:table-cell; width: 50% max-width: 90%}
*#test4 { text-align: right; position: static;}
*.table { display: table; width: 100%; position: relative; table-layout: fixed; }
*.table *, tr[class^="status"] * { background: transparent; color: inherit;}
*.severity_00, *.status_00 { background: #aaaaaa; color: black;}
*.severity_10, *.status_10 { background: #FFA0A0; color: black;} /*new, feature*/
*.severity_20, *.status_20 { background: #FF50A8; color: black;} /*feedback, trivial*/
*.severity_30, *.status_30 { background: #FFD850; color: black;} /*acknowledged, text*/
*.severity_40, *.status_40 { background: #FFFFB0; color: black;} /*confirmed, tweak*/
*.severity_50, *.status_50 { background: #C8C8FF; color: black;} /*assigned, minor*/
*.severity_60, *.status_60 { background: #CCEEDD; color: black;} /*major*/
*.severity_70, *.status_70 { background: #E8E8E8; color: black;} /*crash*/
*.severity_80, *.status_80 { background: #CCEEDD; color: black;} /*resolved, block*/
*.severity_90, *.status_90 { background: #E8E8E8; color: black;} /*closed */
*.severity_100, *.status_100 { background: #FF0000; color: black;}
*.table a { color: blue;}
can provide details for hacks for the other pages but if you applied them you'd be just making more work for yourself. In any event this should match the colours @ changelog with the colours from other areas nicely.
Screenshot follows.
Showing that it doesn't look to bad with better colours and is therefore more customizable etc.. NB I can now tweak the colour scheme over my whole installation fro one file.
Showing that it doesn't look to bad with better colours and is therefore more customizable etc.. NB I can now tweak the colour scheme over my whole installation fro one file.
do_what_you_will.png (128.54 KiB) Viewed 6511 times
Post Reply