CSS highlighting current project menu bar
Posted: 25 Aug 2006, 23:23
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
B. Modify the following two functions
3) Add an appropriate CSS-entry in the CSS-file:
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.
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---
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 = ',';
}
}
Code: Select all
.project_menu_bar_highlight { color: red; }Ideas/suggestions for improvement most welcome.
* = In the case of an occidental user, an oriental user might behave differently.