#12497 dots

pandora_console/godmode/setup/setup.php

@@ -386,6 +386,28 @@ switch ($section) {
     break;
 }
 
+$menu_tabs = [];
+// Agent details.
+$menu_tab_url = '<a href="index.php?sec=gsetup&sec2=godmode/setup/setup&section=general">'.__('General setup').'</a>';
+array_push($menu_tabs, $menu_tab_url);
+// Agent details.
+$menu_tab_url = '<a href="index.php?sec=view&sec2=operation/agentes/estado_agente">'.__('Agent detail').'</a>';
+array_push($menu_tabs, $menu_tab_url);
+
+// Manage agents.
+$menu_tab_url = '<a href="index.php?sec=gagente&sec2=godmode/agentes/modificar_agente">'.__('Manage agents').'</a>';
+array_push($menu_tabs, $menu_tab_url);
+
+// Events.
+$menu_tab_url = '<a href="index.php?sec=eventos&sec2=operation/events/events">'.__('View events').'</a>';
+array_push($menu_tabs, $menu_tab_url);
+
+// Events.
+$menu_tab_url = '<a href="index.php?sec=reporting&sec2=godmode/reporting/reporting_builder">'.__('Custom reports').'</a>';
+array_push($menu_tabs, $menu_tab_url);
+
+$dots = dot_tab($menu_tabs);
+
 // Header.
 ui_print_standard_header(
     __('Setup').' &raquo; '.$subpage,
@@ -403,7 +425,9 @@ ui_print_standard_header(
             'link'  => '',
             'label' => $subpage,
         ],
-    ]
+    ],
+    [],
+    $dots
 );
 
 if (isset($config['error_config_update_config'])) {

pandora_console/include/functions_html.php

@@ -7740,3 +7740,45 @@ function print_email_test_modal_window($id)
 
     echo '<div id="email_test_'.$id.'" title="'.__('Check mail configuration').'" class="invisible">'.html_print_table($table_mail_test, true).$submitButton.'</div>';
 }
+
+
+function dot_tab(array $tabs=[], array $jump_to=[])
+{
+    $tabs_link = '<div class="dot-tab-link">';
+    if (isset($tabs) === true) {
+        foreach ($tabs as $value) {
+            $tabs_link .= $value;
+        }
+    }
+
+    $tabs_link .= '</div>';
+
+    $tabs_jump_to = '';
+    if (isset($jump_to) === true) {
+        foreach ($jump_to as $value) {
+            $tabs_jump_to .= $value;
+        }
+    }
+
+    $output = '
+		<div class="dot-tab">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div class="dot-tab-menu-overlay">
+				<div class="dot-tab-menu">
+					'.$tabs_link;
+    if ($tabs_jump_to !== '') {
+        $output .= '<div class="dot-tab-jump-to">
+					<span class="muted-text ml15">'.__('Jump to').':</span>
+					'.$tabs_jump_to.'
+					</div>';
+    }
+
+    $output .= '</div>
+			</div>
+		</div>
+	';
+
+    return $output;
+}

pandora_console/include/functions_ui.php

@@ -5230,7 +5230,8 @@ function ui_print_standard_header(
     bool $godmode=false,
     array $options=[],
     array $breadcrumbs=[],
-    array $fav_menu_config=[]
+    array $fav_menu_config=[],
+    string $dots='',
 ) {
     // For standard breadcrumbs.
     ui_require_css_file('discovery');
@@ -5269,7 +5270,8 @@ function ui_print_standard_header(
         '',
         $headerInformation->printHeader(true),
         false,
-        $fav_menu_config
+        $fav_menu_config,
+        $dots
     );
     if ($return !== true) {
         echo $output;
@@ -5310,7 +5312,8 @@ function ui_print_page_header(
     $alias='',
     $breadcrumbs='',
     $hide_left_small=false,
-    $fav_menu_config=[]
+    $fav_menu_config=[],
+    $dots='',
 ) {
     global $config;
 
@@ -5441,12 +5444,22 @@ function ui_print_page_header(
             }
         }
 
-        $buffer .= '</ul></div>';
+        $buffer .= '</ul>';
+        if (isset($dots) === true) {
+            $buffer .= '<div id="menu_dots">'.$dots.'</div>';
+        }
+
+        $buffer .= '</div>';
     } else {
         if ($options != '') {
             $buffer .= '<div id="menu_tab"><ul class="mn"><li>';
             $buffer .= $options;
-            $buffer .= '</li></ul></div>';
+            $buffer .= '</li></ul>';
+            if (isset($dots) === true) {
+                $buffer .= '<div id="menu_dots">'.$dots.'</div>';
+            }
+
+            $buffer .= '</div>';
         }
     }
 

pandora_console/include/styles/pandora.css

@@ -2003,6 +2003,7 @@ div.title_line {
 #menu_tab {
   margin-right: 20px;
   margin-top: 50px;
+  display: flex;
 }
 
 #menu_tab .mn,
@@ -13592,3 +13593,82 @@ button.disabled {
 .ui-draggable-handle {
   z-index: 2 !important;
 }
+
+/* Dot tab */
+#menu_dots {
+  margin-left: 10px;
+}
+
+.dot-tab {
+  width: 24px;
+  height: 24px;
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+}
+
+.dot-tab:hover {
+  background-color: var(--background-main-color);
+}
+
+.dot-tab > div:nth-child(1),
+.dot-tab > div:nth-child(2),
+.dot-tab > div:nth-child(3) {
+  background-color: var(--text-color);
+  width: 4px;
+  height: 4px;
+}
+
+.dot-tab-menu-overlay {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  padding: 30px 10px 10px 10px;
+}
+
+.dot-tab-menu {
+  background-color: var(--secondary-color);
+  border: 1px solid var(--border-color-4);
+  border-radius: 6px;
+  min-width: 170px;
+  min-height: 20px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13);
+  padding: 10px 0px;
+  display: none;
+}
+
+.dot-tab:hover .dot-tab-menu {
+  display: block;
+}
+
+.dot-tab-menu a {
+  font-size: 14px;
+  line-height: 23px;
+  padding: 5px 15px;
+  display: block;
+  white-space: nowrap;
+}
+
+.dot-tab-menu a:hover {
+  background-color: var(--table-hover-background);
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+.dot-tab-menu .dot-tab-link > a {
+  font-weight: 900;
+  color: black;
+}
+
+.dot-tab-menu .dot-tab-jump-to {
+  border-top: 1px solid var(--border-color-4);
+  margin-top: 10px;
+  padding-top: 15px;
+}