CSS highlighting current project menu bar

[stoft]

Mantis version: 1.0.3/1.0.5
In the standard installation of Mantis (1.0.3 default install + upgrade to 1.0.5) the only evidence of which project one is working "under" is in the dropdown list in the top right corner.

From a usability perspective I found this lacking. The main focus of the user is usually drawn to the center of the screen, that is where most of the action will take place. If the user "scans" outside the center of the page it will most likely be from top left to bottom right*, and with good reason, that is where one finds Main, My View and similar. If you have one project this is not a problem, if you have several projects/subprojects, not knowing where in the interface you are could become a nuisance if not a problem (previous experience with or to the contrary? please speak up, we are still in the phase of configuring Mantis to our needs).

Our solution was three-step:
1) Unhide the project manu bar (by default it is hidden).

2) Add the following code to core\html_api.php (sorry, not a patch file):

A. Anywhere after the require_once:s

Code: Select all

	#---CUSTOMIZATION---
	function get_project_menu_item_class($t_id) {
		$t_current_project_id = helper_get_current_project();
		if ($t_current_project_id == $t_id ) {
			$t_class = " class=\"project_menu_bar_highlight\" ";
		} else {
			$t_class = "";
		}
		return $t_class;
	}
	#---END CUSTOMIZATION---

B. Modify the following two functions

Code: Select all

	function print_project_menu_bar() {
		$t_project_ids = current_user_get_accessible_projects();

		# ---CUSTOMIZATION---
		$t_class = get_project_menu_item_class( ALL_PROJECTS );
		# --- END CUSTOMIZATION---

		PRINT '<table class="width100" cellspacing="0">';
		PRINT '<tr>';
			PRINT '<td class="menu">';
			PRINT '<a href="set_project.php?project_id=' . ALL_PROJECTS . '"' .  $t_class . '>' . lang_get( 'all_projects' ) . '</a>';

			foreach ( $t_project_ids as $t_id ) {
				# ---CUSTOMIZATION---
				$t_class = get_project_menu_item_class( $t_id );
				PRINT " | <a href=\"set_project.php?project_id=$t_id\" $t_class >" . string_display( project_get_field( $t_id, 'name' ) ) . '</a>';
				# --- END CUSTOMIZTION---
				print_subproject_menu_bar( $t_id, $t_id . ';' );
			}

			PRINT '</td>';
		PRINT '</tr>';
		PRINT '</table>';
	}

	# --------------------
	# Print the menu bar with a list of projects to which the user has access
	function print_subproject_menu_bar( $p_project_id, $p_parents = '' ) {
		$t_subprojects = current_user_get_accessible_subprojects( $p_project_id );
		
		$t_char = ':';
		foreach ( $t_subprojects as $t_subproject ) {
		
			# ---CUSTOMIZATION---
			$t_class = get_project_menu_item_class( $t_subproject );
			PRINT "$t_char <a href=\"set_project.php?project_id=$p_parents$t_subproject\" $t_class >" . string_display( project_get_field( $t_subproject, 'name' ) ) . '</a>';
			# --- END CUSTOMIZATION---
			print_subproject_menu_bar( $t_subproject, $p_parents . $t_subproject . ';' );
			$t_char = ',';
		}
	}

3) Add an appropriate CSS-entry in the CSS-file:

Code: Select all

.project_menu_bar_highlight { color: red; }

In the end, what we have done is add a class attribute (notice the addition of the $t_class to the PRINT statements) when the project name being printed is equal to the current project. One could just as well have added an id attribute (which might even make more sense).

Ideas/suggestions for improvement most welcome.

* = In the case of an occidental user, an oriental user might behave differently.

[atomoid]

Thanks for posting this.
Its an elegant solution and worked nicely when i tested it under limited permissions/project inclusion.

My only complaint doesnt have anything to do with your modifications, its just that i dont like using Mantis' own "Project Bar". I had considered using that (although now this certainly makes it useable, in that the current project stands out as 'red'), but it takes up yet more vertical space on the page, which is the kind of thing i am trying to avoid much as i can. Its also kind of odd that the project bar appears *above* the main menu bar, when id expect it to be below it. I havent yet figured out how to reposition this element or to reduce the vertical space that is drawn between these main tables, which would help make it more compact.

Aside from merely repositioning the popup Project menu to the upper left, my initial thought was to merely add the current project as text to the left of the main bug view listing where it currently says, for instance, "Viewing Issues (1 - 50 / 1236)" I would hope to make it say "Viewing Issues (1 - 50 / 1236) - My Project", which sounds easy to do but then again im somewhat of a noob at this and havent tried to figure it out.

[stoft]

Mantis: 1.0.5

Maybe this will help a bit. We added a read-only project name field to our bug report page (.php). Between the Title and the reproducibility we did an include_once:

Code: Select all

<?php
    include_once( '<prefix>_utilities.php' );
    <prefix>_add_project_to_bug_report();
?>

In a separate file we defined the function:

Code: Select all

<?php
function <prefix>_add_project_to_bug_report() {
	# Changelog:
	#	20060810 - Simple copy of Category from bug_report_page.php changing certain values
	#	to show the current project in which a bug is being filed.
?>
	<!-- Current Project -->
	<tr <?php echo helper_alternate_class() ?>>
		<td class="category" width="30%">
			<?php echo lang_get( 'project' ) ?> <?php print_documentation_link( 'project' ) ?>
		</td>
		<td width="70%">
			<?php if ( $t_changed_project ) {
				echo "[" . project_get_field( $t_bug->project_id, 'name' ) . "] ";
			} ?>
				<?php 
				$<prefix>_projects = helper_get_current_project_trace();
				$<prefix>_project_count = count($<prefix>_projects);
				for ($i=0; $i<$<prefix>_project_count; $i++) {
					echo " / " . project_get_field($<prefix>_projects[$i], 'name' );
				}
				?>
		</td>
	</tr>
<?php
}
?>

<prefix> is a prefix we put on all our custom files, variables and functions to highlight the fact that they are customizations. The project name output is a path (judging from tests, according to the visibility of the project tree). Changing it to just the current project shouldn't be too hard.

[atomoid]

Thanks,

Since i wanted to relocate the Project menu anyway, i did that and so far it works well. I relocated the 'Project Menu' to the middle of the page. I also created a new CSS style for it so i could make the font much bigger and in Red text.

I edited: /core/html_api.php under the function: "function html_login_info() {" some where around line 300 or so). I put comments below to delineate each section.

Code: Select all

# 'login info' section				
			if ( current_user_is_anonymous() ) {
			if ( !php_version_at_least( '4.1.0' ) ) {
				global $_SERVER;
			}

			$t_return_page = $_SERVER['PHP_SELF'];
			if ( isset( $_SERVER['QUERY_STRING'] ) ) {
				$t_return_page .=  '?' . $_SERVER['QUERY_STRING'];
			}

			$t_return_page = string_url(  $t_return_page );
			PRINT lang_get( 'anonymous' ) . ' | <a href="login_page.php?return=' . $t_return_page . '">' . lang_get( 'login_link' ) . '</a>';
			if ( config_get( 'allow_signup' ) == ON ) {
				PRINT ' | <a href="signup_page.php">' . lang_get( 'signup_link' ) . '</a>';
			}
			} else {
				echo lang_get( 'logged_in_as' ), ": <span class=\"italic\">$t_username</span> <span class=\"small\">";
				echo is_blank( $t_realname ) ? "($t_access_level)" : "($t_realname - $t_access_level)";
				echo "</span>";
			}
# end section
			PRINT '</td>';
			PRINT '<td class="login-info-middle">';
# 'project menu' section				
			PRINT '<form method="post" name="form_set_project" action="set_project.php">';
			echo lang_get( 'email_project' ), ': ';
			if ( ON == config_get( 'use_javascript' )) {
				PRINT '<select name="project_id" class="project_menu" onchange="document.forms.form_set_project.submit();">'; # remember to set the 'class=' css reference
			} else {
				PRINT '<select name="project_id" class="small">';
			}
			print_project_option_list( join( ';', helper_get_current_project_trace() ), true, null, true );
			PRINT '</select> ';
			PRINT '<input type="submit" class="button-small" value="' . lang_get( 'switch' ) . '" />';
			PRINT '</form>';
# end section				
			PRINT '</td>';
			PRINT '<td class="login-info-right">';
# 'current time' section			
			PRINT "<span class=\"italic\">$t_now</span>";
# end section

for the /css/default.css file: i settled on this. adding the line to the end (dotn forget to reference it in the html_api.php file):

Code: Select all

.project_menu			{ font-size: 10pt; font-weight: bold; color: #bb0000; background-color: #FFFFCC; }

.. i merely reordered the three sections with the print statements in that function. I didnt rearrange the left/middle/right css statements (the "PRINT '<td class="login-info-middle">';" stuff).

Also, i think this type of thing is supposed to be done using overrides in an include file instead of tweaking the actual html_api.php file, but thats to much dancing around for my modicum of php skills so i didnt get that far.

[stoft]

Reordering the top menu and the project menu was a good idea, we just might do that too.

My example with red above was just an example.

Our current CSS entry looks like this:

Code: Select all

.project_menu_bar_highlight	{ background-color: #ffff99; border-left: solid 1px #dddd77; border-right:  solid 1px #cccc77; border-top: solid 1px black; border-bottom: solid 1px black; padding: 1px; margin: 1px; }

[atomoid]

Thanks,

I put my changes above in my original post.
Thanks for the CSS example, i improved mine a bit based on it.