#9663 menu redesing 5

pandora_console/general/new_main_menu.php

@@ -40,7 +40,7 @@ $tab_active = '';
 
 
 // Start of full lateral menu.
-echo sprintf('<div id="menu_full" class="menu_full_%s">', 'classic');
+echo sprintf('<div id="menu_full" class="menu_full_%s">', $menuTypeClass);
 
 $url_logo = ui_get_full_url('index.php');
 if (is_reporting_console_node() === true) {
@@ -60,19 +60,34 @@ html_print_div(
                 ),
             ],
             true
-        ).html_print_image(
+        ).'<div id="button_collapse" class="button_'.$menuTypeClass.'" style="cursor: pointer"></div>',
-            '/images/menu/contraer.svg',
-            true
-        ),
     ]
 );
 
+$display_classic = '';
+$display_collapsed = 'display: none;';
+if ($menuTypeClass === 'collapsed') {
+    $display_classic = 'display: none;';
+    $display_collapsed = '';
+}
+
+
 // Tabs.
-echo '<div id="menu_tabs" class="tabs">';
+echo '<div id="menu_tabs">';
-echo '<ul class="tabs_ul">';
+// Tabs classic.
+echo '<ul class="tabs_ul" style="'.$display_classic.'">';
 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 '</ul>';
+echo '<div class="div_border_line" style="'.$display_classic.'"><div id="tab_line_1" class="border_line"></div><div id="tab_line_2" class="border_line"></div></div>';
+// Tabs collapse.
+echo '<div class="tabs_collapsed" style="'.$display_collapsed.'">';
+echo '<div class="tabs_collapsed_container">';
+echo '<div id="tab_collapsed_display" class="tabs_collapsed_display"></div>';
+echo '<div id="tab_collapsed_management" class="tabs_collapsed_management"></div>';
+echo '</div></div>';
+
+echo '</div>';
 
 echo '<div id="div_display">';
 require 'operation/menu.php';
@@ -80,37 +95,135 @@ echo '</div>';
 echo '<div id="div_management">';
 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');
+            $('#tab_collapsed_display').removeClass('tabs_collapsed_display');
+            $('#tab_collapsed_display').addClass('tabs_collapsed_oval');
         } else {
             $('#tab_line_1').addClass('tabs_selected');
+            $('#tab_collapsed_management').removeClass('tabs_collapsed_management');
+            $('#tab_collapsed_management').addClass('tabs_collapsed_oval');
         }
 
-        $('#tab_display').click(function() {
+        $('#tab_display,#tab_collapsed_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_collapsed_management').removeClass('tabs_collapsed_management');
+            $('#tab_collapsed_management').addClass('tabs_collapsed_oval');
+            $('#tab_collapsed_display').removeClass('tabs_collapsed_oval');
+            $('#tab_collapsed_display').addClass('tabs_collapsed_display');
         });
 
-        $('#tab_management').click(function() {
+        $('#tab_management,#tab_collapsed_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');
-        })
+            $('#tab_collapsed_display').removeClass('tabs_collapsed_display');
+            $('#tab_collapsed_display').addClass('tabs_collapsed_oval');
+            $('#tab_collapsed_management').removeClass('tabs_collapsed_oval');
+            $('#tab_collapsed_management').addClass('tabs_collapsed_management');
+        });
+
+        $('#button_collapse').click(function() {
+            if ($('#menu_full').hasClass('menu_full_classic')) {
+                localStorage.setItem("menuType", "collapsed");
+                $('ul.submenu').css('left', '80px');
+                var menuType_val = localStorage.getItem("menuType");
+                $.ajax({
+                    type: "POST",
+                    url: "ajax.php",
+                    data: {
+                        menuType: menuType_val,
+                        page: "include/functions_menu"
+                    },
+                    dataType: "json"
+                });
+                $('.tabs_ul').hide();
+                $('.div_border_line').hide();
+                $('.tabs_collapsed').show();
+
+                $(".title_menu_classic").children('div[class*=icon_]').each(function() {
+                    $(this).removeClass('w15p').addClass('w100p');
+                });
+
+                $(".title_menu_classic").children('div[class*=arrow_]').each(function() {
+                    $(this).hide();
+                });
+
+                $(".title_menu_classic").children('span').each(function() {
+                    $(this).hide();
+                });
+
+                $('ul.submenu').css('position', 'fixed');
+                $('ul.submenu').css('left', '60px');
+
+                $('li.selected').each(function() {
+                    $(`#sub${this.id}`).hide();
+                })
+            } else if ($('#menu_full').hasClass('menu_full_collapsed')) {
+                localStorage.setItem("menuType", "classic");
+                $('ul.submenu').css('left', '280px');
+                var menuType_val = localStorage.getItem("menuType");
+                $.ajax({
+                    type: "POST",
+                    url: "ajax.php",
+                    data: {
+                        menuType: menuType_val,
+                        page: "include/functions_menu"
+                    },
+                    dataType: "json"
+                });
+                $('.tabs_ul').show();
+                $('.div_border_line').show();
+                $('.tabs_collapsed').hide();
+
+                $(".title_menu_classic").children('div[class*=icon_]').each(function() {
+                    $(this).removeClass('w100p').addClass('w15p');
+                });
+
+                $(".title_menu_classic").children('div[class*=arrow_]').each(function() {
+                    $(this).show();
+                });
+
+                $(".title_menu_classic").children('span').each(function() {
+                    $(this).show();
+                });
+
+                $('ul.submenu').css('position', '');
+                $('ul.submenu').css('left', '80px');
+
+                $('li.selected').each(function() {
+                    $(`#sub${this.id}`).show();
+                })
+            }
+
+            $('.logo_full').toggle();
+            $('.logo_icon').toggle();
+            $('#menu_full').toggleClass('menu_full_classic menu_full_collapsed');
+            $('#button_collapse').toggleClass('button_classic button_collapsed');
+            $('div#page').toggleClass('page_classic page_collapsed');
+            $('#header_table').toggleClass('header_table_classic header_table_collapsed');
+            $('li.menu_icon').toggleClass("no_hidden_menu menu_icon_collapsed");
+        });
 
         const id_selected = '<?php echo $menu1_selected; ?>';
         if (id_selected != '') {
-            $(`ul#subicon_${id_selected}`).show();
+            var menuType_val = localStorage.getItem("menuType");
+            if (menuType_val === 'classic') {
+                $(`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');
@@ -138,12 +251,15 @@ echo '</div>';
         }
 
         var click_display = "<?php echo $config['click_display']; ?>";
+        console.log(click_display);
 
         $('.title_menu_classic').click(function() {
             const table_hover = $(this).parent();
             const id = table_hover[0].id;
             const classes = $(`#${id}`).attr('class');
 
+            var menuType_val = localStorage.getItem("menuType");
+
             if (classes.includes('selected') === true) {
                 $(`#${id}`).removeClass('selected');
                 $(`ul#sub${id}`).hide();
@@ -153,13 +269,23 @@ echo '</div>';
                 // Span.
                 table_hover.children().first().children().eq(1).removeClass('span_selected');
             } else {
-                $(`#${id}`).addClass('selected');
+                if (menuType_val === 'collapsed') {
-                $(`ul#sub${id}`).show();
+                    // hide all submenus.
-                // Arrow.
+                    $('ul[id^=sub]').hide();
-                $(this).children().last().removeClass('arrow_menu_down');
+                    $(`ul#sub${id}`).show();
-                $(this).children().last().addClass('arrow_menu_up');
+                    // Unselect all.
-                // Span.
+                    $(`li[id^=icon_]`).removeClass('selected');
-                $(this).children().eq(1).addClass('span_selected');
+                    $(`#${id}`).addClass('selected');
+                    get_menu_items(table_hover);
+                } else {
+                    $(`ul#sub${id}`).show();
+                    $(`#${id}`).addClass('selected');
+                    // Arrow.
+                    $(this).children().last().removeClass('arrow_menu_down');
+                    $(this).children().last().addClass('arrow_menu_up');
+                    // Span.
+                    $(this).children().eq(1).addClass('span_selected');
+                }
             }
         });
 
@@ -192,5 +318,38 @@ echo '</div>';
         $('.sub_subMenu').click(function (event) {
             event.stopPropagation();
         });
+
+        /**
+         * Get the menu items to be positioned.
+         *
+         * @param string item It is the selector of the current element.
+         *
+         * @return Add the top position in a inline style.
+         */
+        function get_menu_items(item) {
+            var item_height = parseInt(item.css('min-height'));
+            var id_submenu = item.attr('id');
+            var index = item.index();
+
+            var top_submenu = menu_calculate_top(index, item_height);
+            top_submenu = top_submenu+'px';
+            $('#'+id_submenu+' ul.submenu').css('position', 'fixed');
+            $('#'+id_submenu+' ul.submenu').css('top', top_submenu);
+            $('#'+id_submenu+' ul.submenu').css('left', '60px');
+        }
+
+
+        /**
+         * Positionate the submenu elements. Add a negative top.
+         *
+         * @param int index It is the position of li.menu_icon in the ul.
+         * @param int item_height It is the height of a menu item (35).
+         *
+         * @return (int) The position (in px).
+         */
+        function menu_calculate_top(index, item_height) {
+            const result = index * item_height;
+            return 135 + result;
+        }
     });
 </script>

pandora_console/include/functions_menu.php

@@ -431,9 +431,13 @@ function menu_print_menu(&$menu)
 
         // Print out the first level.
         $output .= '<li title="'.$main['text'].'" class="'.implode(' ', $classes).' '.$seleccionado.' flex_li" id="icon_'.$id.'">';
+        if ($menuTypeClass === 'collapsed') {
+            $div = '<div class="icon_'.$id.' w100p"></div><span class="w55p" style="display: none">'.$main['text'].'</span><div class="arrow_menu_down w30p" style="display: none"></div>';
+        } else {
+            $div = '<div class="icon_'.$id.' w15p"></div><span class="w55p">'.$main['text'].'</span><div class="arrow_menu_down w30p"></div>';
+        }
 
-        $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_classic">%s</div>', $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) {

pandora_console/include/styles/menu2.css

@@ -21,13 +21,6 @@
   overflow-x: hidden;
 }
 
-#div_management {
-  display: none;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
 #div_display::-webkit-scrollbar {
   -webkit-appearance: none;
 }
@@ -52,6 +45,37 @@
   border-radius: 10px;
 }
 
+#div_management {
+  display: none;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#div_management::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+#div_management::-webkit-scrollbar:vertical {
+  width: 5px;
+}
+
+#div_management::-webkit-scrollbar-button:increment,
+#div_management::-webkit-scrollbar-button {
+  display: none;
+}
+
+#div_management::-webkit-scrollbar-thumb {
+  background-color: #6c7587;
+  border-radius: 2.5px;
+  opacity: 0.5;
+  height: 50px;
+}
+
+#div_management::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
 .operation li,
 .godmode li {
   display: flex;
@@ -519,7 +543,7 @@ ul li {
 
 .menu_full_collapsed,
 .button_collapsed {
-  width: 60px;
+  width: 80px;
 }
 
 .menu_full_classic .title_menu_classic {
@@ -531,19 +555,27 @@ ul li {
 }
 
 .menu_full_collapsed .title_menu_collapsed {
-  display: none !important;
+  display: flex !important;
 }
 
 .button_classic {
-  background-image: url(../../images/button_collapse_menu.png);
+  background-image: url(../../images/menu/contraer.svg);
   background-repeat: no-repeat;
   background-position: center;
+  height: 35px;
+  width: 35px;
 }
 
 .button_collapsed {
-  background-image: url(../../images/button_classic_menu.png);
+  background-image: url(../../images/menu/contraer.svg);
   background-repeat: no-repeat;
   background-position: center;
+  height: 35px;
+  width: 35px;
+  -webkit-transform: rotate(-180deg);
+  -moz-transform: rotate(-180deg);
+  -ms-transform: rotate(-180deg);
+  transform: rotate(-180deg);
 }
 
 /* Menu height: 601px, 720px, 735px */
@@ -575,7 +607,7 @@ ul li {
 }
 
 .page_collapsed {
-  padding-left: 60px;
+  padding-left: 80px;
 }
 
 .header_table_classic {
@@ -584,8 +616,8 @@ ul li {
 }
 
 .header_table_collapsed {
-  padding-left: 80px;
+  padding-left: 115px;
-  /* 60 + 35 */
+  /* 80 + 35 */
 }
 
 /*
@@ -653,3 +685,46 @@ ul li {
   color: #1d7874 !important;
   font-weight: bold;
 }
+
+.tabs_collapsed {
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tabs_collapsed_container {
+  background-color: #002f33;
+  border-radius: 16px;
+  width: 60px;
+  height: 32px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.tabs_collapsed_display {
+  background-image: url(../../images/eye.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 21px;
+  height: 21px;
+}
+
+.tabs_collapsed_management {
+  background-image: url(../../images/cog.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 21px;
+  height: 21px;
+}
+
+.tabs_collapsed_oval {
+  background-color: #ffffff;
+  border-radius: 100%;
+  opacity: 0.33;
+  width: 8px;
+  height: 8px;
+  cursor: pointer;
+  margin: 6px;
+}