mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-07-29 16:55:05 +02:00
#9663 WIP menu redesing
This commit is contained in:
Daniel Maya
parent
833032763d
commit
ac910412a3
161
pandora_console/general/new_main_menu.php
Normal file
161
pandora_console/general/new_main_menu.php
Normal file
@ -0,0 +1,161 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Lateral Main Menu.
|
||||
*
|
||||
* @category Main Menu.
|
||||
* @package Pandora FMS.
|
||||
* @subpackage OpenSource.
|
||||
* @version 1.0.0
|
||||
* @license See below
|
||||
*
|
||||
* ______ ___ _______ _______ ________
|
||||
* | __ \.-----.--.--.--| |.-----.----.-----. | ___| | | __|
|
||||
* | __/| _ | | _ || _ | _| _ | | ___| |__ |
|
||||
* |___| |___._|__|__|_____||_____|__| |___._| |___| |__|_|__|_______|
|
||||
*
|
||||
* ============================================================================
|
||||
* Copyright (c) 2005-2023 Artica Soluciones Tecnologicas
|
||||
* Please see http://pandorafms.org for full contribution list
|
||||
* 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 for 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.
|
||||
* ============================================================================
|
||||
*/
|
||||
|
||||
// Begin.
|
||||
if (isset($config['id_user']) === false) {
|
||||
include 'general/login_page.php';
|
||||
exit();
|
||||
}
|
||||
|
||||
require_once 'include/functions_menu.php';
|
||||
|
||||
// Global variable. Do not delete.
|
||||
$tab_active = '';
|
||||
|
||||
|
||||
// Start of full lateral menu.
|
||||
echo sprintf('<div id="menu_full" class="menu_full_%s">', 'classic');
|
||||
|
||||
$url_logo = ui_get_full_url('index.php');
|
||||
if (is_reporting_console_node() === true) {
|
||||
$url_logo = 'index.php?logged=1&sec=discovery&sec2=godmode/servers/discovery&wiz=tasklist';
|
||||
}
|
||||
|
||||
// Header logo.
|
||||
html_print_div(
|
||||
[
|
||||
'class' => 'logo_green',
|
||||
'content' => html_print_anchor(
|
||||
[
|
||||
'href' => $url_logo,
|
||||
'content' => html_print_header_logo_image(
|
||||
$menuCollapsed,
|
||||
true
|
||||
),
|
||||
],
|
||||
true
|
||||
).html_print_image(
|
||||
'/images/menu/contraer.svg',
|
||||
true
|
||||
),
|
||||
]
|
||||
);
|
||||
|
||||
// Tabs.
|
||||
echo '<div id="menu_tabs" class="tabs">';
|
||||
echo '<ul class="tabs_ul">';
|
||||
echo '<li id="tab_display" class="tabs_li"><span>'.__('Display').'</span></a></li>';
|
||||
echo '<li id="tab_management" class="tabs_li"><span>'.__('Management').'</span></a></li>';
|
||||
echo '</ul><div class="div_border_line"><div id="tab_line_1" class="border_line"></div><div id="tab_line_2" class="border_line"></div></div></div>';
|
||||
|
||||
echo '<div id="div_display">';
|
||||
require 'operation/menu.php';
|
||||
echo '</div>';
|
||||
echo '<div id="div_management" style="display: none;">';
|
||||
require 'godmode/menu.php';
|
||||
echo '</div>';
|
||||
|
||||
echo '</div>';
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
const tab = '<?php echo $tab_active; ?>';
|
||||
if (tab === 'management') {
|
||||
$('#tab_line_2').addClass('tabs_selected');
|
||||
$('#div_display').css('display', 'none');
|
||||
$('#div_management').css('display', 'block');
|
||||
} else {
|
||||
$('#tab_line_1').addClass('tabs_selected');
|
||||
}
|
||||
|
||||
$('#tab_display').click(function() {
|
||||
$('#tab_line_1').addClass('tabs_selected');
|
||||
$('#tab_line_2').removeClass('tabs_selected');
|
||||
$('#div_management').css('display', 'none');
|
||||
$('#div_display').css('display', 'block');
|
||||
});
|
||||
|
||||
$('#tab_management').click(function() {
|
||||
$('#tab_line_2').addClass('tabs_selected');
|
||||
$('#tab_line_1').removeClass('tabs_selected');
|
||||
$('#div_display').css('display', 'none');
|
||||
$('#div_management').css('display', 'block');
|
||||
})
|
||||
|
||||
var click_display = "<?php echo $config['click_display']; ?>";
|
||||
|
||||
$('.title_menu_classic').click(function() {
|
||||
if (typeof(table_hover) != 'undefined') {
|
||||
$("ul#sub" + table_hover[0].id).hide();
|
||||
// Arrow.
|
||||
table_hover.children().first().children().last().removeClass('arrow_menu_up');
|
||||
table_hover.children().first().children().last().addClass('arrow_menu_down');
|
||||
// Span.
|
||||
table_hover.children().first().children().eq(1).removeClass('span_selected');
|
||||
if (table_hover[0].id == $(this).parent()[0].id) {
|
||||
table_hover = undefined;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
table_hover = $(this).parent();
|
||||
handsIn = 1;
|
||||
$("ul#sub" + table_hover[0].id).show();
|
||||
// Arrow.
|
||||
$(this).children().last().removeClass('arrow_menu_down');
|
||||
$(this).children().last().addClass('arrow_menu_up');
|
||||
// Span.
|
||||
$(this).children().eq(1).addClass('span_selected');
|
||||
});
|
||||
|
||||
$('.has_submenu').click(function() {
|
||||
if (typeof(table_hover2) != 'undefined') {
|
||||
$("#sub" + table_hover2[0].id).hide();
|
||||
// Arrow.
|
||||
table_hover2.children().first().children().last().removeClass('arrow_menu_up');
|
||||
table_hover2.children().first().children().last().addClass('arrow_menu_down');
|
||||
// Span.
|
||||
table_hover2.children().first().children().first().removeClass('span_selected');
|
||||
if (table_hover2[0].id == $(this)[0].id) {
|
||||
table_hover2 = undefined;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
table_hover2 = $(this);
|
||||
handsIn2 = 1;
|
||||
$("#sub" + table_hover2[0].id).show();
|
||||
// Arrow.
|
||||
table_hover2.children().first().children().last().removeClass('arrow_menu_down');
|
||||
table_hover2.children().first().children().last().addClass('arrow_menu_up');
|
||||
// Span.
|
||||
table_hover2.children().first().children().first().addClass('span_selected');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
15
pandora_console/images/menu/arrow_down_grey.svg
Normal file
15
pandora_console/images/menu/arrow_down_grey.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>Elements / arrow down black@svg</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Global/Menu/Primer-nivel" transform="translate(-248.000000, -17.000000)" stroke="#95A3BF" stroke-width="2">
|
||||
<g id="Menu-/-Menu-cerrado">
|
||||
<g id="Icons/Dark/20/dropdown-down" transform="translate(241.000000, 8.000000)">
|
||||
<polyline id="Path-8" points="8 10 12 14 16 10"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 874 B |
11
pandora_console/images/menu/arrow_up_grey.svg
Normal file
11
pandora_console/images/menu/arrow_up_grey.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>arrow up grey@svg</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Icons/Dark/20/dropdown-up" transform="translate(-7.000000, -9.000000)" stroke="#95A3BF" stroke-width="2">
|
||||
<polyline id="Path-8" transform="translate(12.000000, 12.000000) scale(1, -1) translate(-12.000000, -12.000000) " points="8 10 12 14 16 10"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 766 B |
20
pandora_console/images/menu/contraer.svg
Normal file
20
pandora_console/images/menu/contraer.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="10px" viewBox="0 0 18 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>Element / 18 / mapas topologicos@svg</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Menu-pestañas---v1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Menu-Pestañas---Primero-display" transform="translate(-249.000000, -31.000000)" stroke="#95A3BF" stroke-width="2">
|
||||
<g id="==-Left-==">
|
||||
<g id="Logo">
|
||||
<g id="Icons/Elements/contract-menu" transform="translate(246.000000, 24.000000)">
|
||||
<line x1="12" y1="8.00633693" x2="20.0063114" y2="8.00633693" id="Path-2"></line>
|
||||
<line x1="4" y1="12" x2="20.0062008" y2="12" id="Path-2-Copy"></line>
|
||||
<line x1="12" y1="16" x2="20.0062008" y2="16" id="Path-2-Copy-2"></line>
|
||||
<polyline id="Path-3" points="6.99831176 9.00455189 4 12 6.99831176 15.0052576"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -47,6 +47,7 @@ function menu_print_menu(&$menu)
|
||||
{
|
||||
global $config;
|
||||
global $menuTypeClass;
|
||||
global $tab_active;
|
||||
static $idcounter = 0;
|
||||
|
||||
echo '<div class="menu">';
|
||||
@ -225,7 +226,7 @@ function menu_print_menu(&$menu)
|
||||
// Set class.
|
||||
if (($sec2 == $subsec2 || $allsec2 == $subsec2
|
||||
|| $selected_submenu2) && isset($sub[$subsec2]['options'])
|
||||
&& ( get_parameter_get($sub[$subsec2]['options']['name']) == $sub[$subsec2]['options']['value'])
|
||||
&& (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 selected';
|
||||
@ -252,18 +253,14 @@ function menu_print_menu(&$menu)
|
||||
}
|
||||
|
||||
// Define submenu class to draw tree image.
|
||||
if ($count_sub >= count($main['sub'])) {
|
||||
$sub_tree_class = 'submenu_text submenu_text_last';
|
||||
} else {
|
||||
$sub_tree_class = 'submenu_text submenu_text_middle';
|
||||
}
|
||||
$sub_tree_class = 'submenu_text';
|
||||
|
||||
if (isset($sub['type']) && $sub['type'] == 'direct') {
|
||||
// This is an external link.
|
||||
$submenu_output .= '<li title="'.$sub['id'].'" id="'.str_replace(' ', '_', $sub['id']).'" class="'.$class.'">';
|
||||
|
||||
if (isset($sub['subtype']) && $sub['subtype'] == 'nolink') {
|
||||
$submenu_output .= '<div class=" SubNoLink '.$sub_tree_class.'">'.$sub['text'].'</div>';
|
||||
$submenu_output .= '<div class=" SubNoLink '.$sub_tree_class.'"><span class="w70p">'.$sub['text'].'</span><div class="w29p arrow_menu_down"></div></div>';
|
||||
} else if (isset($sub['subtype']) && $sub['subtype'] == 'new_blank') {
|
||||
$submenu_output .= '<a href="'.$subsec2.'" target="_blank"><div class="'.$sub_tree_class.'">'.$sub['text'].'</div></a>';
|
||||
} else {
|
||||
@ -409,14 +406,20 @@ function menu_print_menu(&$menu)
|
||||
|
||||
if ($menu_selected) {
|
||||
$seleccionado = 'selected';
|
||||
if ($menu['class'] === 'operation') {
|
||||
$tab_active = 'display';
|
||||
} else {
|
||||
$tab_active = 'management';
|
||||
}
|
||||
} else {
|
||||
$seleccionado = '';
|
||||
}
|
||||
|
||||
// Print out the first level.
|
||||
$output .= '<li title="'.$main['text'].'" class="'.implode(' ', $classes).' '.$seleccionado.'" id="icon_'.$id.'">';
|
||||
$output .= '<li title="'.$main['text'].'" class="'.implode(' ', $classes).' '.$seleccionado.' flex_li" id="icon_'.$id.'">';
|
||||
|
||||
$output .= sprintf('<div id="title_menu" class="title_menu_%s">%s</div>', $menuTypeClass, $main['text']);
|
||||
$div = '<div class="icon_'.$id.' w15p"></div><span class="w55p">'.$main['text'].'</span><div class="arrow_menu_down w30p"></div>';
|
||||
$output .= sprintf('<div id="title_menu" class="title_menu_%s">%s</div>', $menuTypeClass, $div);
|
||||
|
||||
// Add the notification ball if defined.
|
||||
if (isset($main['notification']) === true) {
|
||||
|
||||
@ -1838,7 +1838,8 @@ function ui_process_page_head($string, $bitfield)
|
||||
$config['css'] = array_merge(
|
||||
[
|
||||
'common' => 'include/styles/common.css',
|
||||
'menu' => 'include/styles/menu.css',
|
||||
// 'menu' => 'include/styles/menu.css',
|
||||
'menu' => 'include/styles/menu2.css',
|
||||
'tables' => 'include/styles/tables.css',
|
||||
'general' => 'include/styles/pandora.css',
|
||||
],
|
||||
|
||||
604
pandora_console/include/styles/menu2.css
Normal file
604
pandora_console/include/styles/menu2.css
Normal file
@ -0,0 +1,604 @@
|
||||
/*
|
||||
// Pandora FMS - http://pandorafms.com
|
||||
// ==================================================
|
||||
// Copyright (c) 2004-2021 Artica Soluciones Tecnológicas S.L
|
||||
|
||||
// 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.
|
||||
*/
|
||||
|
||||
.operation li,
|
||||
.godmode li {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.operation > li.menu_icon.no_hidden_menu,
|
||||
.godmode > li.menu_icon.no_hidden_menu {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.operation .menu_icon ul.submenu > li,
|
||||
.godmode .menu_icon ul.submenu > li {
|
||||
background-color: #f6f7fb;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu li.selected,
|
||||
.menu li.not_selected {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu li a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu_full li:hover ul {
|
||||
display: block;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.submenu_text {
|
||||
margin-left: 0px;
|
||||
width: 100%;
|
||||
color: #161628;
|
||||
font-size: 9.4pt;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
text-decoration: none;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
margin: 0px 0px 0px 0px;
|
||||
/* position: absolute; */
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.submenu2 {
|
||||
/* position: absolute; */
|
||||
z-index: 999;
|
||||
width: 262px;
|
||||
}
|
||||
|
||||
.sub_subMenu {
|
||||
font-weight: normal;
|
||||
background-color: #f0f3f3;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.sub_subMenu.selected {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.submenu2 li a {
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.menu li img.toggle {
|
||||
visibility: hidden;
|
||||
float: right;
|
||||
/* Positions it back where it should be */
|
||||
border-left: 1px;
|
||||
}
|
||||
|
||||
.menu li.has_submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.menu li.submenu_not_selected a,
|
||||
.menu li.submenu2_not_selected a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.submenu_selected {
|
||||
margin-bottom: 0px;
|
||||
box-shadow: inset 4px 0 #82b92e;
|
||||
/* color: #1D7874 !important;
|
||||
font-weight: bold; */
|
||||
}
|
||||
|
||||
/* .selected.submenu_selected {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
li.submenu_selected.selected {
|
||||
background-color: #202020;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
li.sub_subMenu.selected {
|
||||
background-color: #161616;
|
||||
} */
|
||||
|
||||
.menu .menu_icon,
|
||||
.menu li.links {
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu li.links {
|
||||
background-image: url(../../images/link.png);
|
||||
background-position: 4px 8px;
|
||||
}
|
||||
|
||||
.flex_li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Icons specified here */
|
||||
.icon_oper-networkconsole {
|
||||
background: url(../../images/menu/op_network.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_oper-agents {
|
||||
background: url(../../images/menu/op_monitoring.menu_gray.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.icon_oper-events {
|
||||
background: url(../../images/menu/op_events.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
/* users */
|
||||
.icon_oper-users {
|
||||
background: url(../../images/menu/op_workspace.menu_gray.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
/* trap console */
|
||||
.icon_oper-snmpc,
|
||||
.icon_god-snmpc {
|
||||
background: url(../../images/menu/op_snmp.menu.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_oper-reporting {
|
||||
background: url(../../images/menu/op_reporting.menu_gray.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.icon_oper-gismaps {
|
||||
background: url(../../images/menu/op_gis.menu.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_oper-netflow {
|
||||
background: url(../../images/menu/op_netflow.menu.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_oper-extensions {
|
||||
background: url(../../images/menu/extensions.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
/* Godmode images */
|
||||
.icon_god-discovery {
|
||||
background: url(../../images/menu/gm_discovery.menu.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-resources {
|
||||
background: url(../../images/menu/gm_resources.menu_gray.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.icon_god-configuration {
|
||||
background: url(../../images/menu/gm_configuration.menu_gray.png) no-repeat
|
||||
50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-alerts {
|
||||
background: url(../../images/menu/gm_alerts.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-users {
|
||||
background: url(../../images/menu/gm_users.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-reporting {
|
||||
background: url(../../images/menu/reporting_edit.menu.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-servers {
|
||||
background: url(../../images/menu/gm_servers.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-setup {
|
||||
background: url(../../images/menu/gm_setup.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-events {
|
||||
background: url(../../images/menu/gm_events.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-extensions {
|
||||
background: url(../../images/menu/builder.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-links {
|
||||
background: url(../../images/menu/links.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-um_messages {
|
||||
background: url(../../images/menu/um_messages.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.icon_god-module_library {
|
||||
background: url(../../images/menu/gm_library.menu_gray.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
#menu_container {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
}
|
||||
|
||||
.notification_ball {
|
||||
margin-top: 2px;
|
||||
margin-left: 29px;
|
||||
font-size: 6pt;
|
||||
font-weight: 900;
|
||||
background: red;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu li ul {
|
||||
/* position: absolute; */
|
||||
/* top: 0; */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fix IE. Hide from IE Mac \*/
|
||||
* html ul li {
|
||||
float: left;
|
||||
height: 1%;
|
||||
}
|
||||
|
||||
* html ul li a {
|
||||
height: 1%;
|
||||
}
|
||||
|
||||
/* End */
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------------------------
|
||||
* - MAIN LEFT MENU and SUBMENU -
|
||||
* ---------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.menu_icon:hover {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.submenu_not_selected:hover {
|
||||
background-color: #f0f3f3 !important;
|
||||
}
|
||||
|
||||
.submenu_selected:hover {
|
||||
background-color: #202020 !important;
|
||||
}
|
||||
|
||||
.sub_subMenu:hover {
|
||||
background-color: #d9e0e1;
|
||||
}
|
||||
|
||||
.menu li.selected {
|
||||
/* box-shadow: inset 4px 0 #82b92e; */
|
||||
}
|
||||
|
||||
.operation {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.operation .selected,
|
||||
.godmode .selected {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.menu > .operation {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.menu li,
|
||||
.menu li a,
|
||||
.menu li div {
|
||||
min-height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu li div {
|
||||
background-clip: text;
|
||||
/* Very important to fix a bug in Firefox */
|
||||
}
|
||||
|
||||
.godmode {
|
||||
padding-top: 2em !important;
|
||||
}
|
||||
|
||||
/* Menu icons active */
|
||||
.selected.icon_oper-networkconsole {
|
||||
background: url(../../images/menu/op_network.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_oper-agents {
|
||||
background: url(../../images/menu/op_monitoring.menu_white.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.selected.icon_oper-events {
|
||||
background: url(../../images/menu/op_events.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_oper-users {
|
||||
background: url(../../images/menu/op_workspace.menu_white.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.selected.icon_oper-reporting {
|
||||
background: url(../../images/menu/op_reporting.menu_white.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.selected.icon_oper-extensions {
|
||||
background: url(../../images/menu/extensions.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-discovery {
|
||||
background: url(../../images/menu/gm_discovery.menu_white.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-resources {
|
||||
background: url(../../images/menu/gm_resources.menu_white.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-configuration {
|
||||
background: url(../../images/menu/gm_configuration.menu_white.png) no-repeat
|
||||
50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-alerts {
|
||||
background: url(../../images/menu/gm_alerts.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-users {
|
||||
background: url(../../images/menu/gm_users.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-servers {
|
||||
background: url(../../images/menu/gm_servers.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-setup {
|
||||
background: url(../../images/menu/gm_setup.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-events {
|
||||
background: url(../../images/menu/gm_events.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-extensions {
|
||||
background: url(../../images/menu/builder.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-links {
|
||||
background: url(../../images/menu/links.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-um_messages {
|
||||
background: url(../../images/menu/um_messages.menu_white.png) no-repeat 50%
|
||||
50%;
|
||||
}
|
||||
|
||||
.selected.icon_god-module_library {
|
||||
background: url(../../images/menu/gm_library.menu_white.png) no-repeat 50% 50%;
|
||||
}
|
||||
|
||||
#menu_full {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.button_collapse {
|
||||
margin-top: auto;
|
||||
min-height: 38px;
|
||||
background-color: #505050;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.logo_green {
|
||||
background-color: #fff;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu_full_classic,
|
||||
.button_classic {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.menu_full_collapsed,
|
||||
.button_collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.menu_full_classic .title_menu_classic {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.menu_icon_collapsed {
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.menu_full_collapsed .title_menu_collapsed {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.button_classic {
|
||||
background-image: url(../../images/button_collapse_menu.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.button_collapsed {
|
||||
background-image: url(../../images/button_classic_menu.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Menu height: 601px, 720px, 735px */
|
||||
@media screen and (max-height: 750px) {
|
||||
.menu li,
|
||||
.menu li a,
|
||||
.menu li div {
|
||||
min-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
.operation {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.button_collapse {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------------------------
|
||||
* - STYLES TO CHANGE CLASSIC MENU AND COLLAPSED MENU -
|
||||
* ---------------------------------------------------------------------
|
||||
*/
|
||||
.page_classic {
|
||||
padding-left: 280px;
|
||||
}
|
||||
|
||||
.page_collapsed {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.header_table_classic {
|
||||
padding-left: 315px;
|
||||
/* 280 + 35 */
|
||||
}
|
||||
|
||||
.header_table_collapsed {
|
||||
padding-left: 80px;
|
||||
/* 60 + 35 */
|
||||
}
|
||||
|
||||
/*
|
||||
* ---------------------------------------------------------------------
|
||||
* - TABS styles -
|
||||
* ---------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
#menu_tabs {
|
||||
height: 53px;
|
||||
border-bottom: 1px solid #c1ccdc;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.div_border_line {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.border_line {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabs_ul {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.tabs_li {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabs_li span {
|
||||
color: #161628;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tabs_selected {
|
||||
background-color: #82b92e;
|
||||
}
|
||||
|
||||
.arrow_menu_down {
|
||||
background: url(../../images/menu/arrow_down_grey.svg) no-repeat 75% 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.arrow_menu_up {
|
||||
background: url(../../images/menu/arrow_up_grey.svg) no-repeat 75% 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.span_selected {
|
||||
color: #1d7874 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -562,6 +562,9 @@ select:-internal-list-box {
|
||||
.w25p {
|
||||
width: 25%;
|
||||
}
|
||||
.w29p {
|
||||
width: 29%;
|
||||
}
|
||||
.w30p {
|
||||
width: 30%;
|
||||
}
|
||||
@ -580,12 +583,18 @@ select:-internal-list-box {
|
||||
.w54p {
|
||||
width: 54%;
|
||||
}
|
||||
.w55p {
|
||||
width: 55%;
|
||||
}
|
||||
.w60p {
|
||||
width: 60%;
|
||||
}
|
||||
.w70p {
|
||||
width: 70%;
|
||||
}
|
||||
.w71p {
|
||||
width: 71%;
|
||||
}
|
||||
.w75p {
|
||||
width: 75%;
|
||||
}
|
||||
@ -3504,13 +3513,13 @@ div.div_groups_status {
|
||||
}
|
||||
|
||||
#title_menu {
|
||||
color: #b9b9b9;
|
||||
float: right;
|
||||
width: 72%;
|
||||
letter-spacing: 0pt;
|
||||
font-size: 10pt;
|
||||
white-space: pre-wrap;
|
||||
padding-top: 0;
|
||||
color: #161628;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.28px;
|
||||
line-height: 24px;
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no_hidden_menu {
|
||||
|
||||
@ -1166,7 +1166,8 @@ if ($config['pure'] == 0) {
|
||||
echo sprintf('<div id="page" class="page_%s">', $menuTypeClass);
|
||||
echo '<div id="menu">';
|
||||
|
||||
include 'general/main_menu.php';
|
||||
// include 'general/main_menu.php';
|
||||
include 'general/new_main_menu.php';
|
||||
echo '</div>';
|
||||
echo '<button onclick="topFunction()" id="top_btn" title="Go to top"></button>';
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user