From e7db8d22d27746dbcc9bd178af1bb9e6f15b3286 Mon Sep 17 00:00:00 2001 From: Esteban Sanchez Date: Wed, 4 Feb 2009 16:07:43 +0000 Subject: [PATCH] 2009-02-04 Esteban Sanchez * 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 --- pandora_console/ChangeLog | 17 ++ pandora_console/general/main_menu.php | 116 ++++++--- .../include/javascript/jquery.pandora.js | 80 ++++++ .../include/styles/images/toggle.gif | Bin 0 -> 152 bytes pandora_console/include/styles/menu.css | 227 ++++++++++-------- pandora_console/include/styles/pandora.css | 3 + 6 files changed, 301 insertions(+), 142 deletions(-) create mode 100644 pandora_console/include/styles/images/toggle.gif diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog index 419d8abf57..129c9ff86c 100644 --- a/pandora_console/ChangeLog +++ b/pandora_console/ChangeLog @@ -1,3 +1,20 @@ +2009-02-04 Esteban Sanchez + + * 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 * general/login_page.php: Removed width of login error. diff --git a/pandora_console/general/main_menu.php b/pandora_console/general/main_menu.php index c2f3add257..9f0b04f790 100644 --- a/pandora_console/general/main_menu.php +++ b/pandora_console/general/main_menu.php @@ -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 '
'; +function temp_print_menu ($menu, $classtype) { + static $idcounter = 0; - $sec = get_parameter ('sec'); - $sec2 = get_parameter ('sec2'); + echo '
'; + + $sec = (string) get_parameter ('sec'); + $sec2 = (string) get_parameter ('sec2'); + + echo '
    '; 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 ''; - echo ''; + $output = ''; + if (! $submenu) { + $output .= '
  • '; + $output .= '
    '; + $output .= ''; + //Print out the first level + $output .= ''.$main["text"].''; + $output .= '
    '; + $output .= "
    • \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 '
  • '.$sub["text"].'
    • '; + $submenu_output .= '
  • '.$sub["text"]."
    • \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 ''; - echo ''.$sub["text"].''; - echo ''; + $submenu_output .= ''; + $submenu_output .= ''.$sub["text"].''; + $submenu_output .= "\n"; } } - echo '
'; + + //Print out the first level + if ($visible) + $classes[] = 'has_submenu_visible'; + + if ($selected) { + $classes[] = 'has_submenu_selected'; + } + + $output .= '
  • '; + $output .= '
    '; + $output .= ''; + $output .= '

    '; + $output .= ''.$main["text"].''; + $output .= '
    '; + + $output .= '
    '; + $output .= '
      '; + $output .= $submenu_output; + $output .= '
    '; + $output .= '
    '; + $output .= '
    • '; + echo $output; } + echo ''; //Invisible UL for adding border-top echo '
       
    '; } @@ -98,12 +142,12 @@ function temp_print_menu ($menu, $type) { echo '
    :: '.__('Operation').' ::
    '; $menu = array (); require ("operation/menu.php"); -temp_print_menu ($menu, "int"); +temp_print_menu ($menu, "operation"); echo '
    :: '.__('Administration').' ::
    '; $menu = array (); require ("godmode/menu.php"); -temp_print_menu ($menu, "int"); +temp_print_menu ($menu, "godmode"); unset ($menu); require ("links_menu.php"); diff --git a/pandora_console/include/javascript/jquery.pandora.js b/pandora_console/include/javascript/jquery.pandora.js index 9e36711166..a4ac35f7cf 100644 --- a/pandora_console/include/javascript/jquery.pandora.js +++ b/pandora_console/include/javascript/jquery.pandora.js @@ -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; + } + }; }); diff --git a/pandora_console/include/styles/images/toggle.gif b/pandora_console/include/styles/images/toggle.gif new file mode 100644 index 0000000000000000000000000000000000000000..b476c78f201ee302745aa3a9b7c419bb12af07d3 GIT binary patch literal 152 zcmZ?wbhEHblwz=Dc+A02R8&-6US3mE)6me+-rnBT)irVA#2GVY{Ko+lf3h%gF>o;G zFaQC_3xA_gcI@yZe8FMqf(loD43uOsN*vYKg@>Jx*Rz*rJpgE .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; } diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index b198350f13..ee014cca09 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -770,3 +770,6 @@ table#simple select#prediction_module { .clickable { cursor: pointer; } +table#agent_list tr { + vertical-align: top; +}