From c2d00123e599224a1357c77b485a34ca880b184f Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Mon, 25 Mar 2024 13:29:49 +0100
Subject: [PATCH] 13146-Change header notifications styles

---
 pandora_console/general/header.php            | 17 +---
 .../include/functions_notifications.php       | 92 ++++++++++---------
 pandora_console/include/styles/pandora.css    | 69 ++++++++++----
 .../include/styles/pandora_black.css          |  6 ++
 4 files changed, 106 insertions(+), 78 deletions(-)

diff --git a/pandora_console/general/header.php b/pandora_console/general/header.php
index 5502fec94f..396098359c 100644
--- a/pandora_console/general/header.php
+++ b/pandora_console/general/header.php
@@ -599,21 +599,12 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
     function filter_notification() {
         let notification_type = '';
         $('.notification-item').hide();
-        $(".checkbox_filter_notifications:checkbox:checked").each(function() {
-            notification_type = $(this).val();
-            console.log(notification_type);
-            $('.notification-item[value='+notification_type+']').show();
-            if (notification_type == 'All'){
-                $('.notification-item').show();
-            }
-        });
+        notification_type = $("#notifications_filter_options").val()
 
-        if (notification_type == 'All'){
+        if (notification_type === 'All') {
             $('.notification-item').show();
-        }
-
-        if (notification_type == ''){
-            $('.notification-item').hide();
+        } else {
+            $('.notification-item[value='+notification_type+']').show();
         }
     }
 
diff --git a/pandora_console/include/functions_notifications.php b/pandora_console/include/functions_notifications.php
index f16e8fd25b..30b30539d5 100644
--- a/pandora_console/include/functions_notifications.php
+++ b/pandora_console/include/functions_notifications.php
@@ -1066,39 +1066,39 @@ function notification_filter()
     }
 
     $types_list = array_unique($types_list);
-    $notification_filter = "<ul id='menu-filter_notification'>";
+    $notification_filter = '';
+    $filter_options = [];
 
-    $notification_filter .= "<li>
-                                <input type='checkbox' name='filter_menu' id='filter_menu'>
-                                <label for='filter_menu' id='filter_menu_label'>".__('Filter').'</label>';
-
-    $notification_filter .= "<ul class='sublevel-filter_notification'>";
     foreach ($types_list as $type) {
         if ($type === 'All') {
-            $checked = 'checked';
+            $checked = 'All';
         } else {
             $checked = '';
         }
 
         switch ($type) {
+            case 'All':
+                $type_name = __('Show all');
+            break;
+
             case 'HISTORYDB':
-                $type_name = 'HISTORY DB';
+                $type_name = __('History DB');
             break;
 
             case 'PANDORADB':
-                $type_name = 'PANDORA DB';
+                $type_name = __('Pandora DB');
             break;
 
             case 'UPDATEMANAGER':
-                $type_name = 'WARP UPDATE';
+                $type_name = __('Warp update');
             break;
 
             case 'ALLOWOVERRIDE':
-                $type_name = 'ALLOW OVERRIDE';
+                $type_name = __('Allow override');
             break;
 
             case 'DISCOVERYTASK':
-                $type_name = 'DISCOVERY TASK';
+                $type_name = __('Discovery task');
             break;
 
             default:
@@ -1106,29 +1106,31 @@ function notification_filter()
             break;
         }
 
-        $notification_filter .= "<li><div class='item-filter'>
-                                <input type='checkbox' 
-                                class='checkbox_filter_notifications' 
-                                value=".$type." 
-                                name='filter_".$type."' 
-                                ".$checked."
-                                id='filter_".$type."'>
-                                <label for='filter_".$type."'>".$type_name.'</label>
-                                </div>
-                            </li>';
+        $filter_options[$type] = $type_name;
     }
 
-    $notification_filter .= "<li><div class='item-filter'>";
+    $filter_select = html_print_select(
+        $filter_options,
+        'notifications_filter_options',
+        $checked,
+        '',
+        '',
+        0,
+        true,
+        false,
+        false,
+        'w150px'
+    );
+
     $notification_filter .= html_print_div(
         [
             'class'   => 'action-buttons w100p',
-            'content' => html_print_submit_button(
-                __('Filter'),
+            'content' => $filter_select.html_print_submit_button(
+                __('Apply filter'),
                 'btn_submit',
                 false,
                 [
-                    'class'   => 'mini sub filter',
-                    'icon'    => 'search mini',
+                    'class'   => 'link font_14px link-bold text-nowrap',
                     'onClick' => 'filter_notification()',
                 ],
                 true
@@ -1137,14 +1139,6 @@ function notification_filter()
         true
     );
 
-    $notification_filter .= '</div>
-                            </li>';
-
-    $notification_filter .= '</ul>';
-
-    $notification_filter .= '</li>';
-
-    $notification_filter .= '</ul>';
     return $notification_filter;
 }
 
@@ -1161,19 +1155,23 @@ function notifications_print_dropdown()
         $mess = [];
     }
 
-    $redirection_notifications = html_print_menu_button(
+    $redirection_notifications = html_print_button(
+        __('See all notifications'),
+        'see_all_notifications',
+        false,
+        'window.location="'.ui_get_full_url('index.php?sec=message_list&sec2=operation/messages/message_list').'"',
         [
-            'href'    => 'javascript:',
-            'class'   => 'notification_menu_actions',
-            'text'    => __('View all messages'),
-            'onClick' => "window.location='".ui_get_full_url('index.php?sec=message_list&sec2=operation/messages/message_list')."'",
+            'mode'  => 'secondary',
+            'class' => 'bolder',
+            'icon'  => 'unset',
         ],
         true
     );
+
     $notification_menu = html_print_menu_button(
         [
             'href'    => 'javascript:',
-            'class'   => 'notification_menu_actions',
+            'class'   => 'notification_menu_actions link-bold font_14px',
             'text'    => __('Mark all as read'),
             'onClick' => 'mark_all_notification_as_read()',
         ],
@@ -1187,9 +1185,13 @@ function notifications_print_dropdown()
                 <div class='notificaion_menu_container'>
                     <div class='menu_tab filter_notification'>%s</div>
                     <div class='menu_tab notification_menu'>%s</div>
-                    <div class='menu_tab notification_menu'>%s</div>
                 </div>
-                %s
+                <div class='notifications-div'>
+                    %s
+                </div>
+                <center>
+                    <div class='mrgn_top_10px mrgn_btn_10px'>%s</div>
+                </center>
             </div>
         </div>
         <div
@@ -1200,14 +1202,14 @@ function notifications_print_dropdown()
         ",
         $notification_filter,
         $notification_menu,
-        $redirection_notifications,
         array_reduce(
             $mess,
             function ($carry, $message) {
                 return $carry.notifications_print_dropdown_element($message);
             },
             ''
-        )
+        ),
+        $redirection_notifications
     );
 }
 
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 478e2158ee..28a6af4e81 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -4976,14 +4976,14 @@ div#dialog_messages table th:last-child {
 
 #notification-wrapper {
   background: white;
-  border: #a5a5a5 solid 1px;
+  border: 1px solid #e5e9ed;
   z-index: 900000;
   position: absolute;
   width: 550px;
   margin-top: 55px;
-  border-radius: 5px;
-  max-height: 530px;
+  border-radius: 8px;
   position: fixed;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13);
 }
 
 #notification-wrapper::before {
@@ -4991,29 +4991,38 @@ div#dialog_messages table th:last-child {
   display: block;
   position: absolute;
   width: 0px;
-  height: 0;
-  border-color: transparent;
-  border-width: 12px;
-  border-style: solid;
-  bottom: 100%;
+  height: 16px;
+  width: 16px;
+  bottom: calc(100% - 8px);
   left: calc(58% - 7px);
-  margin-left: -12px;
-  border-bottom-color: white;
+  margin-left: -9px;
+  border-left: 1px solid #e5e9ed;
+  transform: rotate(45deg);
+  border-left: 1px solid #e5e9ed;
+  border-top: 1px solid #e5e9ed;
+  background-color: var(--secondary-color);
+  transform: rotate(45deg);
 }
 
-#notification-wrapper-inner {
-  max-height: 400px;
+#notification-wrapper-inner center {
+  border-top: 1px solid #e5e9ed;
+}
+
+.notifications-div {
+  max-height: calc(100vh - 200px);
   overflow: auto;
 }
 
+.notifications-div::-webkit-scrollbar {
+  display: none;
+}
+
 #notification-wrapper-shadow {
   height: 100%;
   width: 100%;
-  background: #111;
   position: fixed;
   z-index: 9009;
   top: 0;
-  opacity: 0.3;
 }
 
 .notification-item {
@@ -5026,6 +5035,10 @@ div#dialog_messages table th:last-child {
   padding: 5px;
 }
 
+.notification-item:last-child {
+  border-bottom: 0;
+}
+
 .notification-item > * {
   padding-left: 7px;
   pointer-events: none;
@@ -10571,7 +10584,7 @@ button.submitButton:active {
   border: 2px solid #57ea82;
 }
 
-button.buttonButton > div,
+button.buttonButton > div:not(.unset),
 button.submitButton > div {
   background-color: #fff;
   width: 2rem;
@@ -12660,11 +12673,12 @@ form.cfv_status_agent input:checked + label:before {
 
 .notificaion_menu_container {
   display: flex;
-  padding-top: 10px;
-  padding-left: 15px;
-}
-.notification_menu {
-  width: 100px;
+  padding: 10px 15px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e5e9ed;
 }
 
 .filter_notification {
@@ -13847,3 +13861,18 @@ button.disabled {
 .tabs-show {
   display: list-item;
 }
+
+.link-bold {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.link-bold:hover {
+  opacity: 0.9;
+  color: var(--primary-color);
+}
+
+.text-nowrap {
+  text-wrap: nowrap;
+}
diff --git a/pandora_console/include/styles/pandora_black.css b/pandora_console/include/styles/pandora_black.css
index a3025c3a33..decda97a59 100644
--- a/pandora_console/include/styles/pandora_black.css
+++ b/pandora_console/include/styles/pandora_black.css
@@ -1885,3 +1885,9 @@ a.pandora_pagination,
 #score-bar .labels-bar div {
   color: white;
 }
+
+a.link-bold {
+  color: var(--primary-color) !important;
+  text-decoration: none;
+  font-weight: bold;
+}