Merge branch 'dev' into enhancement/improve_visibility_wizards_tab

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Changelog
 ## --- [4.2.0] - 2023/TBD
 ### New features
-- Finish and Activate Arcadia notification backend ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/621) | [Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/626))
+- Finish and Activate Arcadia notification backend ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/621) | [Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/626) | [Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/632))
 ### Bug fixes
 - PWA: Removed the custom offline page in favour of browser default ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/607))
 - Fix hidden servers appearing visible on public mobile status page ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/612))

app/frontend/templates/notify.html

@@ -1,7 +1,6 @@
 <ul class="navbar-nav ml-auto">
-  <li class="nav-item dropdown">
+  <li class="nav-item dropdown notif-li">
-    <a class="nav-link count-indicator dropdown-toggle" id="notifDropdown" href="#" data-toggle="dropdown"
+    <a class="nav-link count-indicator dropdown-toggle" id="notifDropdown" href="#" aria-expanded="false">
-      aria-expanded="false">
       <i class="fas fa-broadcast-tower
         {% if data.get('update_available') %}
             text-danger
@@ -21,12 +20,10 @@
 
   <li class="nav-item dropdown user-dropdown">
     <a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
-      <img class="img-xs rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}"
+      <img class="img-xs rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}" alt="Profile image"> </a>
-        alt="Profile image"> </a>
     <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
       <div class="dropdown-header text-center">
-        <img class="img-md rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}"
+        <img class="img-md rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}" alt="Profile image">
-          alt="Profile image">
         <p class="mb-1 mt-3 font-weight-semibold">{{ data['user_data']['username'] }}</p>
         <p class="font-weight-light text-muted mb-0">Roles: </p>
         {% for r in data['user_role'] %}
@@ -38,23 +35,19 @@
         <p class="font-weight-light text-muted mb-0">Email: {{ data['user_data']['email'] }}</p>
       </div>
       {% if data['user_data']['preparing'] %}
-      <span class="dropdown-item" id="support_progress"><i
+      <span class="dropdown-item" id="support_progress"><i class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
-          class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
         data['lang']) }}<br><br></span>
       <span class="dropdown-item" id="support_progress">
         <div class="support_progress" style="height: 15px; width: 100%;">
-          <div class="progress-bar progress-bar-striped progress-bar-animated" id="logs_progress_bar" role="progressbar"
+          <div class="progress-bar progress-bar-striped progress-bar-animated" id="logs_progress_bar" role="progressbar" style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
-            style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
         </div>
       </span>
       {% else %}
-      <a class="dropdown-item" id="support_logs"><i
+      <a class="dropdown-item" id="support_logs"><i class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
-          class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs',
         data['lang']) }}</i></a>
       {% end %}
       {% if data['superuser'] %}
-      <a class="dropdown-item" href="/panel/activity_logs"><i
+      <a class="dropdown-item" href="/panel/activity_logs"><i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary"></i>{{ translate('notify',
-          class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary"></i>{{ translate('notify',
         'activityLog', data['lang']) }}</a>
       {% end %}
       <a class="dropdown-item" href="/logout"><i class="dropdown-item-icon mdi mdi-power text-primary"></i>{{
@@ -79,6 +72,7 @@
   .clear-button:hover {
     cursor: pointer;
   }
+
   /* Hide scrollbar for Chrome, Safari and Opera */
   .notif-div::-webkit-scrollbar {
     display: none;
@@ -86,8 +80,10 @@
 
   /* Hide scrollbar for IE, Edge and Firefox */
   .notif-div {
-  -ms-overflow-style: none;  /* IE and Edge */
+    -ms-overflow-style: none;
-  scrollbar-width: none;  /* Firefox */
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
   }
 </style>
 <script>
@@ -104,14 +100,17 @@
     }
     if (data.length > 0) {
       localStorage.setItem("notif-count", data.length);
+      $("#notif-count").show()
       $("#notif-count").html(data.length);
       $("#announcements").html(text);
     } else {
       $("#announcements").html(`<p style='margin-top: 15px;' class='text-center'><i class="fa fa-bell-slash" aria-hidden="true"></i>
 </p>`);
+      $("#notif-count").hide()
     }
     $(".clear-button").on("click", function (event) {
       console.log("CLEAR BUTTON")
+      event.stopPropagation();
       let uuid = event.target.getAttribute("data-id");
       $(`#${uuid}`).remove();
       send_clear(uuid);
@@ -162,6 +161,28 @@
       bootbox.alert(responseData.error)
     }
   }
+
+  /* Open / Close with Button */
+  $('li.dropdown.notif-li a').on('click', function (event) {
+    $(this).parent().toggleClass("show");
+    $('div.notif-div').toggleClass("show");
+    if ($('li.dropdown.notif-li a').attr('aria-expanded') === 'false') {
+      $('li.dropdown.notif-li a').attr('aria-expanded', "true");
+    }
+    else {
+      $('li.dropdown.notif-li a').attr('aria-expanded', "false");
+    }
+  });
+
+  /* Close when clicking ouside */
+  $('body').on('click', function (e) {
+    if (!$('li.dropdown.notif-li').is(e.target) && $('li.dropdown.notif-li').has(e.target).length === 0 && $('show').has(e.target).length === 0) {
+      $('li.notif-li').removeClass("show");
+      $('li.dropdown.notif-li a').attr('aria-expanded', "false");
+      $('div.notif-div').removeClass("show");
+    }
+  });
+
   $(document).ready(function () {
     getAnnouncements();
   })