From f8ac06a9d6000c7c72c36bc23c13e3232471aa6e Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Mon, 25 Mar 2024 17:21:54 +0100
Subject: [PATCH] 13185-Change header and menu. WIP

---
 pandora_console/include/functions_ui.php   |  6 +-
 pandora_console/include/styles/menu.css    | 10 ++-
 pandora_console/include/styles/pandora.css | 96 +++++++++++++++++++---
 3 files changed, 97 insertions(+), 15 deletions(-)

diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php
index 4a1a181e80..01d402222b 100755
--- a/pandora_console/include/functions_ui.php
+++ b/pandora_console/include/functions_ui.php
@@ -4630,10 +4630,12 @@ function ui_toggle(
         $imageRotate = $rotateB;
         $style .= 'height:0;position:absolute;';
         $original = $img_b;
+        $data_close = 'true';
     } else {
         $imageRotate = $rotateA;
         $style .= 'height:auto;position:relative;';
         $original = $img_a;
+        $data_close = 'false';
     }
 
     $header_class = '';
@@ -4652,7 +4654,7 @@ function ui_toggle(
 
     // Link to toggle.
     $output = '<div class="'.$main_class.'" id="'.$id.'" '.$toggl_attr.'>';
-    $output .= '<div class="'.$header_class.'" '.(($disableToggle === false) ? 'style="cursor: pointer;" ' : '').' id="tgl_ctrl_'.$uniqid.'">';
+    $output .= '<div class="'.$header_class.'" '.(($disableToggle === false) ? 'style="cursor: pointer;" ' : '').' id="tgl_ctrl_'.$uniqid.'" data-close="'.$data_close.'">';
     if ($reverseImg === false) {
         if ($switch === true) {
             if (empty($switch_name) === true) {
@@ -4767,6 +4769,7 @@ function ui_toggle(
         $output .= "				    $('#tgl_div_".$uniqid."').css('position', '".$position_div."');\n";
         $output .= "				    $('#image_".$uniqid."').attr('style', 'rotate: ".$rotateA."');\n";
         $output .= "				    $('#checkbox-".$switch_name."').prop('checked', true);\n";
+        $output .= "				    $('#tgl_ctrl_".$uniqid."').attr('data-close', 'false');\n";
         $output .= $class_table;
         $output .= "			    }\n";
         $output .= "			    else {\n";
@@ -4775,6 +4778,7 @@ function ui_toggle(
         $output .= "				    $('#tgl_div_".$uniqid."').css('position', 'absolute');\n";
         $output .= "				    $('#image_".$uniqid."').attr('style', 'rotate: ".$rotateB."');\n";
         $output .= "				    $('#checkbox-".$switch_name."').prop('checked', false);\n";
+        $output .= "				    $('#tgl_ctrl_".$uniqid."').attr('data-close', 'true');\n";
         $output .= "			    }\n";
         $output .= "		    });\n";
         $output .= "	    }\n";
diff --git a/pandora_console/include/styles/menu.css b/pandora_console/include/styles/menu.css
index 154d98fc21..5a7b88b171 100644
--- a/pandora_console/include/styles/menu.css
+++ b/pandora_console/include/styles/menu.css
@@ -478,7 +478,6 @@ ul li {
   top: 0;
   left: 0;
   background-color: #ffffff;
-  border-right: 1px solid #eee;
 }
 
 .button_collapse {
@@ -545,6 +544,13 @@ ul li {
   width: 35px;
 }
 
+#button_collapse {
+  width: 32px;
+  height: 32px;
+  background-color: #f6f7fb;
+  border-radius: 50%;
+}
+
 @media screen and (max-height: 750px) {
   .operation {
     padding-top: 10px;
@@ -586,7 +592,7 @@ ul li {
 
 #menu_tabs {
   height: 49px;
-  border-bottom: 1px solid #c1ccdc;
+  border-bottom: 1px solid #f6f7fb;
 }
 
 .div_border_line {
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 478e2158ee..d2ced30616 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -1557,7 +1557,6 @@ div#head {
   height: 60px;
   padding-top: 0px;
   margin: 0 auto;
-  border-bottom: 1px solid #eee;
   min-width: 882px;
   background-color: #fff;
   color: #000;
@@ -1955,21 +1954,40 @@ div.title_line {
 #menu_tab_frame_view,
 #menu_tab_frame_view_bc {
   position: sticky;
-  top: 61px;
+  top: 60px;
   z-index: 3;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  border-bottom: 1px solid #eee;
   width: -webkit-fill-available;
   width: -moz-available;
   padding-right: 0px;
   height: 50px;
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: #f6f7fb;
   margin: -25px -25px 25px -25px;
 }
 
+#menu_tab_frame_view::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-color: var(--secondary-color);
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+#menu_tab_frame_view::after {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-color: #f6f7fb;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  border-top-left-radius: 16px;
+}
+
 /* Breadcrum */
 #menu_tab_frame_view_bc {
   min-height: 55px;
@@ -2776,12 +2794,23 @@ div#pandora_logo_header {
 .header_left {
   display: flex;
   flex-direction: column;
+  text-wrap: nowrap;
 }
 
 .header_center {
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
+}
+
+#header_searchbar {
+  width: 100%;
+  padding: 0 100px;
+}
+
+#header_searchbar #keywords {
+  width: 100%;
 }
 
 .header_right {
@@ -3564,17 +3593,17 @@ div.tip > img {
  */
 input.search_input {
   background-image: url("../../images/details.svg");
-  background-position: center right 10px;
+  background-position: center left 20px;
   background-repeat: no-repeat;
   background-size: 17px;
-  background-color: #f2f6f7;
+  background-color: #f6f7fb;
   padding: 0px;
   margin: 0;
   width: 150px;
-  height: 30px;
+  height: 36px;
   margin-left: 2px;
-  padding-left: 15px;
-  padding-right: 40px;
+  padding-right: 15px;
+  padding-left: 45px;
   color: #777;
   font-size: 8.5pt;
   border-top-left-radius: 50px;
@@ -4054,7 +4083,6 @@ div.div_groups_status {
 #menu_tab li.nomn_high span {
   color: #fff;
   box-shadow: inset 0px 4px var(--primary-color);
-  background-color: #fff;
 }
 
 #menu_tab li.nomn img,
@@ -11543,12 +11571,56 @@ pre.external_tools_output {
   z-index: 1;
   width: -webkit-fill-available;
   width: -moz-available;
-  margin: -25px -25px 25px -25px;
+  margin-bottom: 25px;
 }
 
 .white_table_graph.fixed_filter_bar {
+  border-radius: 0px;
+  background-color: #f6f7fb;
+  border: 0;
+  top: 133px;
+}
+
+.white_table_graph.fixed_filter_bar::before {
+  content: "";
+  width: calc(100% + 2px);
+  height: 25px;
+  background-color: #f6f7fb;
+  position: absolute;
+  top: -25px;
+  margin: 0 -1px;
+}
+
+.white_table_graph.fixed_filter_bar > div:nth-child(1) {
+  background-color: var(--secondary-color);
+  border: 1px solid #e5e9ed;
+  border-bottom: 0px;
   border-radius: 0;
-  top: 110px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.white_table_graph.fixed_filter_bar > div:nth-child(1)[data-close="true"] {
+  border-radius: 8px;
+  border: 1px solid #e5e9ed;
+}
+
+.white_table_graph.fixed_filter_bar > div:nth-child(2) {
+  background-color: var(--secondary-color);
+  /* border: 1px solid #e5e9ed; */
+  border-top: 0px;
+  border-radius: 0;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.white_table_graph.fixed_filter_bar > div:nth-child(2) > div {
+  background-color: unset;
+  border: 1px solid #e5e9ed;
+  border-top: 0px;
+  border-radius: 0;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 
 /*