13135-Add options Menu tabs in Visual styles

pandora_console/godmode/setup/setup_visuals.php

@@ -148,7 +148,6 @@ $table_behaviour->data[$row][] = html_print_label_input_block(
     __('Display text when proc modules have state critical'),
     html_print_input_text('render_proc_fail', $config['render_proc_fail'], '', 25, 25, true)
 );
-$row++;
 
 if (enterprise_installed() === true) {
     $row++;
@@ -162,6 +161,29 @@ if (enterprise_installed() === true) {
     );
 }
 
+$row++;
+// Tabs menus.
+$tabs_menu_options = [];
+$tabs_menu_options['both'] = __('Show both (tabs and menu)');
+$tabs_menu_options['icons'] = __('Show only icons');
+$tabs_menu_options['menu'] = __('Show only menu');
+$table_behaviour->data[$row][] = html_print_label_input_block(
+    __('Tabs menu'),
+    html_print_select(
+        $tabs_menu_options,
+        'tabs_menu',
+        $config['tabs_menu'],
+        '',
+        '',
+        '',
+        true,
+        false,
+        false,
+        '',
+        false
+    )
+);
+
 
 // ----------------------------------------------------------------------
 // ----------------------------------------------------------------------

pandora_console/include/functions_config.php

@@ -1443,6 +1443,10 @@ function config_update_config()
                         );
                     }
 
+                    if (config_update_value('tabs_menu', get_parameter('tabs_menu', 'both'), true) === false) {
+                        $error_update[] = __('Tabs menu');
+                    }
+
                     // --------------------------------------------------
                     // CUSTOM VALUES POST PROCESS
                     // --------------------------------------------------
@@ -3944,6 +3948,10 @@ function config_process_config()
         config_update_value('control_session_timeout', 'check_activity');
     }
 
+    if (isset($config['tabs_menu']) === false) {
+        config_update_value('tabs_menu', 'both');
+    }
+
     // Finally, check if any value was overwritten in a form.
     config_update_config();
 }

pandora_console/include/functions_ui.php

@@ -5419,6 +5419,18 @@ function ui_print_page_header(
 
     if (is_array($options)) {
         $buffer .= '<div id="menu_tab"><ul class="mn">';
+
+        $menu_dots_class = 'menu-dots-hide';
+        if (isset($dots) === true && $dots !== '' && $config['tabs_menu'] !== 'icons') {
+            $menu_dots_class = 'menu-dots-show';
+        }
+
+        if (isset($dots) === true && $dots !== '') {
+            $buffer .= '<li class="nomn menu-dots-li '.$menu_dots_class.'">';
+            $buffer .= '<div id="menu_dots">'.$dots.'</div>';
+            $buffer .= '</li>';
+        }
+
         foreach ($options as $key => $option) {
             if (empty($option)) {
                 continue;
@@ -5428,6 +5440,13 @@ function ui_print_page_header(
                 // $buffer .= '</li>';
             } else {
                 if (is_array($option)) {
+                    if ($config['tabs_menu'] === 'menu' && (isset($dots) === true && $dots !== '')) {
+                        $tabs_class = 'tabs-hide';
+                        if (isset($option['active']) === true && (bool) $option['active'] === true) {
+                            $tabs_class = 'tabs-show';
+                        }
+                    }
+
                     $class = 'nomn';
                     if (isset($option['active'])) {
                         if ($option['active']) {
@@ -5444,7 +5463,7 @@ function ui_print_page_header(
                         $class .= ($godmode) ? ' tab_godmode' : ' tab_operation';
                     }
 
-                    $buffer .= '<li class="'.$class.' ">';
+                    $buffer .= '<li class="'.$class.' '.$tabs_class.'">';
                     $buffer .= $option['text'];
                     if (isset($option['sub_menu'])) {
                         $buffer .= $option['sub_menu'];
@@ -5460,11 +5479,19 @@ function ui_print_page_header(
         }
 
         $buffer .= '</ul>';
-        if (isset($dots) === true) {
-            $buffer .= '<div id="menu_dots">'.$dots.'</div>';
-        }
-
         $buffer .= '</div>';
+
+        if (is_metaconsole() === false) {
+            $buffer .= '
+            <script>
+                menuTabsShowHide();
+                
+                $(window).on("resize", function() {
+                menuTabsShowHide();
+                });
+            </script>
+        ';
+        }
     } else {
         if ($options != '') {
             $buffer .= '<div id="menu_tab"><ul class="mn"><li>';

pandora_console/include/javascript/pandora.js

@@ -2705,3 +2705,34 @@ function show_email_test(id) {
     }
   });
 }
+
+function menuTabsShowHide() {
+  const dotsLi = $(".menu-dots-li");
+  if (dotsLi.length) {
+    const tabsLi = $("#menu_tab .nomn:not(.menu-dots-li)");
+    const menuTabWidth = $("#menu_tab_frame_view").width();
+    const menuTabLeftWidth = $(".menu_tab_left_bc").width();
+    const menuTabsRightCount = $("#menu_tab > ul.mn > li").length * 46;
+    const margins = 50;
+
+    const menuTabFree = menuTabWidth - (menuTabLeftWidth + margins);
+
+    if (menuTabFree >= menuTabsRightCount) {
+      // Big.
+      if ($(dotsLi).hasClass("menu-dots-show") === true) {
+        if ($(tabsLi).hasClass("tabs-hide") === false) {
+          $(tabsLi).show();
+        }
+      } else {
+        $(dotsLi).hide();
+        if ($(tabsLi).hasClass("tabs-hide") === false) {
+          $(tabsLi).show();
+        }
+      }
+    } else {
+      // Small.
+      $(dotsLi).show();
+      $(tabsLi).hide();
+    }
+  }
+}

pandora_console/include/styles/pandora.css

@@ -1986,6 +1986,7 @@ div.title_line {
   justify-content: space-between;
   overflow: hidden;
   margin-left: 20px;
+  min-width: fit-content;
 }
 
 .breadcrumbs_container {
@@ -2025,6 +2026,11 @@ div.title_line {
   margin: 0px 0px 0px 0px;
 }
 
+#menu_tab > ul.mn {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+
 #menu_tab .mn li {
   float: right;
   position: relative;
@@ -4040,7 +4046,7 @@ div.div_groups_status {
   min-height: 53px;
 }
 
-#menu_tab li:hover {
+#menu_tab li:hover:not(.menu-dots-li) {
   box-shadow: inset 0px 4px var(--primary-color);
 }
 
@@ -13732,6 +13738,12 @@ button.disabled {
 }
 
 /* Dot tab */
+#menu_tab li.nomn.menu-dots-li:hover a {
+  color: var(--text-color);
+  padding: 5px 15px;
+  text-align: left;
+}
+
 #menu_dots {
   margin-left: 10px;
 }
@@ -13768,6 +13780,7 @@ button.disabled {
   top: 20px;
   right: -20px;
   padding: 0px 10px 10px 10px;
+  text-align: left;
 }
 
 .dot-tab-menu {
@@ -13778,7 +13791,10 @@ button.disabled {
   min-height: 20px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13);
   padding: 10px 0px;
+  z-index: 1;
+  position: relative;
   display: none;
+  text-align: left;
 }
 
 .dot-tab:hover .dot-tab-menu {
@@ -13791,6 +13807,7 @@ button.disabled {
   padding: 5px 15px;
   display: block;
   white-space: nowrap;
+  text-align: left;
 }
 
 .dot-tab-menu a:hover {
@@ -13799,6 +13816,11 @@ button.disabled {
   text-decoration: none;
 }
 
+.dot-tab-menu .dot-tab-link {
+  max-height: calc(100vh - (60px + 49px + 65px + 15px));
+  overflow-y: auto;
+}
+
 .dot-tab-menu .dot-tab-link > a {
   font-weight: 900;
   color: black;
@@ -13809,3 +13831,19 @@ button.disabled {
   margin-top: 10px;
   padding-top: 15px;
 }
+
+.menu-dots-hide {
+  display: none;
+}
+
+.menu-dots-show {
+  display: list-item;
+}
+
+.tabs-hide {
+  display: none;
+}
+
+.tabs-show {
+  display: list-item;
+}