2009-02-04 Esteban Sanchez <estebans@artica.es>

* general/main_menu.php: The menu has been rewritten to be more
        usable, bright and colorful. It's similar to Wordpress administration
        menu. It requires a bit of javascript, but can still works without it.
        Besides, Pandora can remember the menus positions using cookies.

        * include/javascript/jquery.pandora.js: Added javascript code for
        menu handling. Added cookie plugin.

        * include/styles/menu.css: Rewritten to be adapted to new menu system.

        * include/styles/images/toggle.gif: Added to repository.

        * include/styles/pandora.css: Set align-top to agent list table under
        Manage agents.



git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@1423 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
This commit is contained in:
Esteban Sanchez 2009-02-04 16:07:43 +00:00
parent 5c32051348
commit e7db8d22d2
6 changed files with 301 additions and 142 deletions

View File

@ -1,3 +1,20 @@
2009-02-04 Esteban Sanchez <estebans@artica.es>
* general/main_menu.php: The menu has been rewritten to be more
usable, bright and colorful. It's similar to Wordpress administration
menu. It requires a bit of javascript, but can still works without it.
Besides, Pandora can remember the menus positions using cookies.
* include/javascript/jquery.pandora.js: Added javascript code for
menu handling. Added cookie plugin.
* include/styles/menu.css: Rewritten to be adapted to new menu system.
* include/styles/images/toggle.gif: Added to repository.
* include/styles/pandora.css: Set align-top to agent list table under
Manage agents.
2009-02-04 Esteban Sanchez <estebans@artica.es>
* general/login_page.php: Removed width of login error.

View File

@ -18,65 +18,86 @@
if (! isset ($config["id_user"])) {
require ("general/login_page.php");
exit();
exit ();
}
//This is a helper function to print menu items
function temp_print_menu ($menu, $type) {
echo '<div class="menu '.$type.'">';
function temp_print_menu ($menu, $classtype) {
static $idcounter = 0;
$sec = get_parameter ('sec');
$sec2 = get_parameter ('sec2');
echo '<div class="menu">';
$sec = (string) get_parameter ('sec');
$sec2 = (string) get_parameter ('sec2');
echo '<ul class="'.$classtype.'">';
foreach ($menu as $mainsec => $main) {
//Set class
if (!isset ($main["sub"])) {
$main["sub"] = array ();
if (! isset ($main['id'])) {
$id = 'menu_'.++$idcounter;
} else {
$id = $main['id'];
}
if (!isset ($main["refr"])) {
$main["refr"] = 0;
$submenu = false;
$classes = array ('menu_option');
if (isset ($main["sub"])) {
$classes[] = 'has_submenu';
$submenu = true;
}
if (!isset ($main["refr"]))
$main["refr"] = 0;
if ($sec == $mainsec) {
$class = 'selected';
$selected = 1;
$classes[] = 'selected';
} else {
$class = '';
$selected = 0;
$style = "";
$classes[] = 'not_selected';
}
//Print out the first level
echo '<ul'.($class ? ' class="'.$class.'"' : '').'>';
echo '<li class="mainmenu '.$class.'" id="'.$main["id"].'">';
echo '<a href="index.php?sec='.$mainsec.'&amp;sec2='.$main["sec2"].($main["refr"] ? '&amp;refr='.$main["refr"] : '').'">'.$main["text"].'</a>';
echo '</li>';
$output = '';
if (! $submenu) {
$output .= '<li class="'.implode (" ", $classes).'" id="'.$id.'">';
$output .= '<div class="title">';
$output .= '<div class="menu_icon" id="icon_'.$id.'"><br /></div>';
//Print out the first level
$output .= '<a href="index.php?sec='.$mainsec.'&amp;sec2='.$main["sec2"].($main["refr"] ? '&amp;refr='.$main["refr"] : '').'">'.$main["text"].'</a>';
$output .= '</div>';
$output .= "</li>\n";
echo $output;
continue;
}
$submenu_output = '';
$visible = false;
if (isset ($_COOKIE[$id]))
$visible = true;
$selected = false;
foreach ($main["sub"] as $subsec2 => $sub) {
//Set class
if (($sec2 == $subsec2) && (isset ($sub[$subsec2]["options"]))
if ($sec2 == $subsec2 && isset ($sub[$subsec2]["options"])
&& (get_parameter_get ($sub[$subsec2]["options"]["name"]) == $sub[$subsec2]["options"]["value"])) {
//If the subclass is selected and there are options and that options value is true
$class = 'submenu selected';
} elseif ($sec2 == $subsec2 && (!isset ($sub[$subsec2]["options"]))) {
$class = ' submenu_selected';
$selected = true;
$visible = true;
} elseif ($sec2 == $subsec2 && !isset ($sub[$subsec2]["options"])) {
//If the subclass is selected and there are no options
$class = 'submenu selected';
} elseif ($selected == 1) {
//If the mainclass is selected
$class = 'submenu';
$class = ' submenu_selected';
$selected = true;
$visible = true;
} else {
//Else it's invisible
$class = 'submenu invisible';
$class = '';
}
if (!isset ($sub["refr"])) {
if (! isset ($sub["refr"])) {
$sub["refr"] = 0;
}
if (isset ($sub["type"]) && $sub["type"] == "direct") {
//This is an external link
echo '<li class="'.$class.'"><a href="'.$subsec2.'">'.$sub["text"].'</a></li>';
$submenu_output .= '<li class="'.$class.'"><a href="'.$subsec2.'">'.$sub["text"]."</a></li>\n";
} else {
//This is an internal link
if (isset ($sub[$subsec2]["options"])) {
@ -84,13 +105,36 @@ function temp_print_menu ($menu, $type) {
} else {
$link_add = "";
}
echo '<li'.($class ? ' class="'.$class.'"' : '').'>';
echo '<a href="index.php?sec='.$mainsec.'&amp;sec2='.$subsec2.($main["refr"] ? '&amp;refr='.$main["refr"] : '').$link_add.'">'.$sub["text"].'</a>';
echo '</li>';
$submenu_output .= '<li'.($class ? ' class="'.$class.'"' : '').'>';
$submenu_output .= '<a href="index.php?sec='.$mainsec.'&amp;sec2='.$subsec2.($main["refr"] ? '&amp;refr='.$main["refr"] : '').$link_add.'">'.$sub["text"].'</a>';
$submenu_output .= "</li>\n";
}
}
echo '</ul>';
//Print out the first level
if ($visible)
$classes[] = 'has_submenu_visible';
if ($selected) {
$classes[] = 'has_submenu_selected';
}
$output .= '<li class="'.implode (" ", $classes).'" id="'.$id.'">';
$output .= '<div class="title">';
$output .= '<div class="menu_icon" id="icon_'.$id.'"><br /></div>';
$output .= '<div class="toggle"><br /></div>';
$output .= '<a href="index.php?sec='.$mainsec.'&amp;sec2='.$main["sec2"].($main["refr"] ? '&amp;refr='.$main["refr"] : '').'">'.$main["text"].'</a>';
$output .= '</div>';
$output .= '<div class="submenu'.$class.($visible ? '' : ' invisible').'">';
$output .= '<ul>';
$output .= $submenu_output;
$output .= '</ul>';
$output .= '</div>';
$output .= '</li>';
echo $output;
}
echo '</ul>';
//Invisible UL for adding border-top
echo '<ul style="height: 0px;">&nbsp;</ul></div>';
}
@ -98,12 +142,12 @@ function temp_print_menu ($menu, $type) {
echo '<div class="tit bg">:: '.__('Operation').' ::</div>';
$menu = array ();
require ("operation/menu.php");
temp_print_menu ($menu, "int");
temp_print_menu ($menu, "operation");
echo '<div class="tit bg3">:: '.__('Administration').' ::</div>';
$menu = array ();
require ("godmode/menu.php");
temp_print_menu ($menu, "int");
temp_print_menu ($menu, "godmode");
unset ($menu);
require ("links_menu.php");

View File

@ -1,4 +1,18 @@
$(document).ready (function () {
/* Menu activation */
$(".toggle").click (function () {
parents = $(this).parents ("li");
if ($(parents).hasClass ("has_submenu_visible")) {
$(".submenu", parents).hide ();
$(parents).removeClass ("has_submenu_visible");
$.cookie ($(parents).attr ("id"), null);
return;
}
$(parents).addClass ("has_submenu_visible");
$(".submenu", parents).show ();
$.cookie ($(parents).attr ("id"), true);
});
$.fn.check = function () {
return this.each (function () {
this.checked = true;
@ -25,4 +39,70 @@ $(document).ready (function () {
});
});
};
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
$.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// NOTE Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 B

View File

@ -1,27 +1,29 @@
/*
// Pandora FMS - the Flexible Monitoring System
// ============================================
// Copyright (c) 2004-2008 Sancho Lerena, slerena@openideas.info
// Copyright (c) 2005-2008 Artica Soluciones Tecnologicas
// Copyright (c) 2004-2008 Raul Mateos Martin, raulofpandora@gmail.com
// Copyright (c) 2008-2008 Evi Vanoost, vanooste@rcbi.rochester.edu
// Copyright (c) 2006-2007 Jose Navarro jose@jnavarro.net
// Copyright (c) 2006-2007 Jonathan Barajas, jonathan.barajas[AT]gmail[DOT]com
Pandora FMS - the Flexible Monitoring System
============================================
Copyright (c) 2004-2008 Sancho Lerena, slerena@openideas.info
Copyright (c) 2005-2008 Artica Soluciones Tecnologicas
Copyright (c) 2004-2008 Raul Mateos Martin, raulofpandora@gmail.com
Copyright (c) 2008-2008 Evi Vanoost, vanooste@rcbi.rochester.edu
Copyright (c) 2006-2007 Jose Navarro jose@jnavarro.net
Copyright (c) 2006-2007 Jonathan Barajas, jonathan.barajas[AT]gmail[DOT]com
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation version 2
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation version 2
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
.menu {
background-color: #e9f3d2;
border: 1px solid #dadbdc;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #dadbdc;
width: 155px;
}
.menu ul {
@ -29,20 +31,28 @@
padding: 0;
margin: 0;
}
.menu li {
background-color: #e9f3d2;
.menu li.menu_option {
border: 0px solid black;
border-bottom: 1px solid #d4d4d4;
padding: 5px 5px 5px 30px;
margin: 0;
}
.menu a, .menu a:hover {
font-family: Arial, Verdana, sans-serif, Helvetica;
li.not_selected a {
background: #E9F3D2;
}
.menu a {
font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
color: #000000;
display:block; /* This makes it so that the whole li is clickable */
text-decoration:none;
padding: 6px;
margin-left: 23px;
}
.menu a:hover {
text-decoration:none;
color: #D54E21;
}
/* This is for the dropout menu */
.menu.int ul {
height: 26px;
@ -63,117 +73,122 @@
.menu.int ul.selected > .submenu {
height: 14px;
}
.submenu {
background:transparent url(../../images/arrow.png) no-repeat scroll 28px 4px;
background: #FFFFFF !important;
border-bottom-color: #AAAAAA !important;
border-bottom-style: solid;
border-bottom-width: 1px;
border-right-color: #D6D6D6 !important;
border-right-style: solid;
border-right-width: 1px;
font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
margin: 0px 10px 0px 0;
}
.submenu a {
padding-left: 10px;
.submenu ul li a {
background: #FFFFFF !important;
border-style: none solid none none;
border-width: 0 1px 0 0;
border-color: #E9F3D2;
margin-left: 0;
}
/* Make invisible submenus invisible and take the text in */
.submenu.invisible {
display:none;
position:relative;
top:-25px;
left:155px;
width:130px;
z-index:5;
background: #E9F3D2 url(../../images/arrow.png) no-repeat scroll 6px 4px;
padding-left: 8px;
.submenu ul li a:hover {
background: #D6DCC6 !important;
}
/* But override on hover */
.menu.int ul:hover > .submenu.invisible {
display: block;
.submenu_selected {
font-weight: bold;
background-color: #F5F5F5 !important;
}
/* This is for ext links */
.menu.links ul:hover {
height: inherit;
.not_selected .submenu_not_selected a {
background-color: #FFFFFF !important;
}
.menu.links li {
background: #E9F3D2 url('../../images/link.png') no-repeat scroll 5px 8px;
.menu li.selected .title {
background: #71AC6B;
}
.menu .not_selected .title {
background-color: #E9F3D2;
}
.menu .toggle {
clear: right;
float: right;
height: 27px;
width: 22px;
z-index: 1;
}
.menu .menu_icon {
clear: left;
float: left;
height: 27px;
width: 22px;
}
.menu ul li:hover > .title > .toggle, .menu ul li.selected > .title > .toggle {
background: transparent url(images/toggle.gif) no-repeat scroll !important;
}
/* Icons specified here */
#oper-agents {
background:transparent url(../../images/bricks.png) no-repeat 4px 3px;
div#icon_oper-agents {
background: transparent url(../../images/bricks.png) no-repeat 4px 8px;
}
#oper-servers {
background:transparent url(../../images/server_database.png) no-repeat 4px 3px;
div#icon_oper-servers {
background: transparent url(../../images/server_database.png) no-repeat 4px 8px;
}
#oper-incidents {
background:transparent url(../../images/book_edit.png) no-repeat 4px 3px;
div#icon_oper-incidents {
background: transparent url(../../images/book_edit.png) no-repeat 4px 8px;
}
#oper-events {
background:transparent url(../../images/lightning_go.png) no-repeat 4px 3px;
div#icon_oper-events {
background: transparent url(../../images/lightning_go.png) no-repeat 4px 8px;
}
/* users */
#oper-users {
background:transparent url(../../images/group.png) no-repeat 4px 3px;
div#icon_oper-users {
background: transparent url(../../images/group.png) no-repeat 4px 8px;
}
/* trap console */
#oper-snmpc, #god-snmpc {
background:transparent url(../../images/computer_error.png) no-repeat 4px 3px;
div#icon_oper-snmpc, #god-snmpc {
background: transparent url(../../images/computer_error.png) no-repeat 4px 8px;
}
#oper-messages {
background:transparent url(../../images/email.png) no-repeat 4px 3px;
div#icon_oper-messages {
background: transparent url(../../images/email.png) no-repeat 4px 8px;
}
#oper-reporting {
background:transparent url(../../images/reporting.png) no-repeat 4px 3px;
div#icon_oper-reporting {
background: transparent url(../../images/reporting.png) no-repeat 4px 8px;
}
#oper-visualc {
background:transparent url(../../images/monitor.png) no-repeat 4px 3px;
div#icon_oper-visualc {
background: transparent url(../../images/monitor.png) no-repeat 4px 8px;
}
#oper-extensions, #god-extensions {
background:transparent url(../../images/extensions.png) no-repeat 4px 3px;
div#icon_oper-extensions, div#icon_god-extensions {
background: transparent url(../../images/extensions.png) no-repeat 4px 8px;
}
/* Godmode images */
#god-agents {
background: url(../../images/god1.png) no-repeat 4px 3px;
div#icon_god-agents {
background: transparent url(../../images/god1.png) no-repeat 4px 8px;
}
#god-modules {
background: url(../../images/brick.png) no-repeat 4px 3px;
div#icon_god-modules {
background: transparent url(../../images/brick.png) no-repeat 4px 8px;
}
#god-alerts {
background: url(../../images/god2.png) no-repeat 4px 3px;
div#icon_god-alerts {
background: transparent url(../../images/god2.png) no-repeat 4px 8px;
}
#god-dbmaint {
background: url(../../images/god8.png) no-repeat 4px 3px;
div#icon_god-dbmaint {
background: transparent url(../../images/god8.png) no-repeat 4px 8px;
}
#god-users {
background: url(../../images/god3.png) no-repeat 4px 3px;
div#icon_god-users {
background: transparent url(../../images/god3.png) no-repeat 4px 8px;
}
#god-reporting {
background: url(../../images/reporting_edit.png) no-repeat 4px 3px;
div#icon_god-reporting {
background: transparent url(../../images/reporting_edit.png) no-repeat 4px 8px;
}
#god-profiles {
background: url(../../images/god4.png) no-repeat 4px 3px;
div#icon_god-profiles {
background: transparent url(../../images/god4.png) no-repeat 4px 8px;
}
#god-servers {
background: url(../../images/god5.png) no-repeat 4px 3px;
div#icon_god-servers {
background: transparent url(../../images/god5.png) no-repeat 4px 8px;
}
#god-audit {
background: url(../../images/god6.png) no-repeat 4px 3px;
div#icon_god-audit {
background: transparent url(../../images/god6.png) no-repeat 4px 8px;
}
#god-setup {
background: url(../../images/god7.png) no-repeat 4px 3px;
div#icon_god-setup {
background: transparent url(../../images/god7.png) no-repeat 4px 8px;
}
/* inventory */
#oper-inventory {
background:transparent url(../../images/page_white_text.png) no-repeat 4px 3px;
}
.mainmenu.selected, .submenu.selected, .menu li:hover,
#oper-agents.selected, #oper-servers.selected, #oper-incidents.selected, #oper-events.selected, #oper-users.selected, #oper-snmpc.selected, #oper-messages.selected, #oper-reporting.selected, #oper-visualc.selected, #oper-extensions.selected,
#oper-agents:hover, #oper-servers:hover, #oper-incidents:hover, #oper-events:hover, #oper-users:hover, #oper-snmpc:hover, #oper-messages:hover, #oper-reporting:hover, #oper-visualc:hover, #oper-extensions:hover,
#god-agents:hover, #god-modules:hover, #god-alerts:hover, #god-dbmaint:hover, #god-users:hover, #god-reporting:hover, #god-profiles:hover, #god-servers:hover, #god-audit:hover, #god-setup:hover, #god-snmpc:hover, #god-extensions:hover,
#god-agents.selected, #god-modules.selected, #god-alerts.selected, #god-dbmaint.selected, #god-users.selected, #god-reporting.selected, #god-profiles.selected, #god-servers.selected, #god-audit.selected, #god-setup.selected, #god-snmpc.selected, #god-extensions.selected
{
background-color: #efefbd;
div#icon_oper-inventory {
background: transparent url(../../images/page_white_text.png) no-repeat 4px 8px;
}

View File

@ -770,3 +770,6 @@ table#simple select#prediction_module {
.clickable {
cursor: pointer;
}
table#agent_list tr {
vertical-align: top;
}