From 1437c5a0e708e4c563dc5feccab87e8425752ff6 Mon Sep 17 00:00:00 2001 From: Daniel Maya Date: Thu, 2 Feb 2023 13:28:48 +0100 Subject: [PATCH] #9663 menu redesing 3 --- pandora_console/general/new_main_menu.php | 45 +++++++++----- pandora_console/include/functions_menu.php | 3 + pandora_console/include/styles/menu2.css | 70 ++++++++++++++++++---- pandora_console/include/styles/pandora.css | 1 - 4 files changed, 92 insertions(+), 27 deletions(-) diff --git a/pandora_console/general/new_main_menu.php b/pandora_console/general/new_main_menu.php index b60fa1fd0f..f41c42a77e 100644 --- a/pandora_console/general/new_main_menu.php +++ b/pandora_console/general/new_main_menu.php @@ -77,7 +77,7 @@ echo '
'; require 'operation/menu.php'; echo '
'; -echo ''; $('#div_management').css('display', 'block'); }) + const id_selected = ''; + if (id_selected != '') { + $(`ul#subicon_${id_selected}`).show(); + // Arrow. + $(`#icon_${id_selected}`).children().first().children().last().removeClass('arrow_menu_down'); + $(`#icon_${id_selected}`).children().first().children().last().addClass('arrow_menu_up'); + // Span. + $(`#icon_${id_selected}`).children().first().children().eq(1).addClass('span_selected'); + } + var click_display = ""; $('.title_menu_classic').click(function() { - if (typeof(table_hover) != 'undefined') { - $("ul#sub" + table_hover[0].id).hide(); + const table_hover = $(this).parent(); + const id = table_hover[0].id; + const classes = $(`#${id}`).attr('class'); + + if (classes.includes('selected') === true) { + $(`#${id}`).removeClass('selected'); + $(`ul#sub${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; - } + } else { + $(`#${id}`).addClass('selected'); + $(`ul#sub${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'); } - - 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') { + $(`#${table_hover2[0].id}`).css("background-color", ""); $("#sub" + table_hover2[0].id).hide(); // Arrow. table_hover2.children().first().children().last().removeClass('arrow_menu_up'); @@ -150,6 +161,8 @@ echo '
'; table_hover2 = $(this); handsIn2 = 1; + + $(`#${table_hover2[0].id}`).css("background-color", "#eff2f2"); $("#sub" + table_hover2[0].id).show(); // Arrow. table_hover2.children().first().children().last().removeClass('arrow_menu_down'); diff --git a/pandora_console/include/functions_menu.php b/pandora_console/include/functions_menu.php index 3f882916b2..47e55624e6 100644 --- a/pandora_console/include/functions_menu.php +++ b/pandora_console/include/functions_menu.php @@ -48,6 +48,8 @@ function menu_print_menu(&$menu) global $config; global $menuTypeClass; global $tab_active; + global $menu1_selected; + global $menu2_selected; static $idcounter = 0; echo '
'; @@ -406,6 +408,7 @@ function menu_print_menu(&$menu) if ($menu_selected) { $seleccionado = 'selected'; + $menu1_selected = $id; if ($menu['class'] === 'operation') { $tab_active = 'display'; } else { diff --git a/pandora_console/include/styles/menu2.css b/pandora_console/include/styles/menu2.css index 88c4a7fb3f..852ce9b05e 100644 --- a/pandora_console/include/styles/menu2.css +++ b/pandora_console/include/styles/menu2.css @@ -15,6 +15,42 @@ // along with this program; if not, write to the Free Software // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +#div_display { + height: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +#div_management { + display: none; + height: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +#div_display::-webkit-scrollbar { + -webkit-appearance: none; +} + +#div_display::-webkit-scrollbar:vertical { + width: 5px; +} + +#div_display::-webkit-scrollbar-button:increment, +#div_display::-webkit-scrollbar-button { + display: none; +} + +#div_display::-webkit-scrollbar-thumb { + background-color: #6c7587; + border-radius: 2.5px; + opacity: 0.5; + height: 50px; +} + +#div_display::-webkit-scrollbar-track { + border-radius: 10px; +} .operation li, .godmode li { @@ -30,8 +66,12 @@ .operation .menu_icon ul.submenu > li, .godmode .menu_icon ul.submenu > li { - background-color: #f6f7fb; - padding-left: 3.5em !important; + background-color: #ffffff; + padding-left: 24px !important; +} + +.menu { + height: 100%; } .menu ul { @@ -46,7 +86,6 @@ } .menu li a { - color: #ffffff; text-decoration: none; width: 100%; } @@ -59,7 +98,6 @@ .submenu_text { margin-left: 0px; width: 100%; - color: #161628; font-size: 9.4pt; } @@ -71,7 +109,8 @@ .submenu { margin: 0px 0px 0px 0px; /* position: absolute; */ - width: 280px; + width: 260px; + margin-left: 20px !important; } .submenu2 { @@ -84,10 +123,13 @@ font-weight: normal; background-color: #f0f3f3; padding-left: 1.5em; + color: #161628 !important; } .sub_subMenu.selected { font-weight: 600; + background-color: #002f33 !important; + color: #fff !important; } .submenu2 li a { @@ -108,6 +150,10 @@ z-index: 1; } +.has_submenu { + color: #161628 !important; +} + .menu li.submenu_not_selected a, .menu li.submenu2_not_selected a { font-weight: normal; @@ -115,6 +161,9 @@ .submenu_selected { margin-bottom: 0px; + background-color: #002f33 !important; + color: #ffffff !important; + box-shadow: inset 4px 0 #82b92e; } .menu .menu_icon, @@ -123,6 +172,10 @@ cursor: pointer; } +.menu_icon.selected li { + color: #1d7874 !important; +} + .menu li.links { background-image: url(../../images/link.png); background-position: 4px 8px; @@ -291,11 +344,7 @@ ul li { } .submenu_not_selected:hover { - background-color: #f0f3f3 !important; -} - -.submenu_selected:hover { - background-color: #202020 !important; + background-color: #eff2f2 !important; } .sub_subMenu:hover { @@ -551,6 +600,7 @@ ul li { display: flex; align-items: center; justify-content: space-evenly; + min-height: 53px; } .tabs_li { diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index 1fa0792b3a..4252324c63 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -3513,7 +3513,6 @@ div.div_groups_status { } #title_menu { - color: #161628; font-size: 14px; letter-spacing: -0.28px; line-height: 24px;