Merge pull request #43 from InteropIO/bugfix/G4E-7363-notifications-p…

…anel-is-not-hiding-every-time-when-auto-hide-panel-is-on

Bugfix/G4E-7363 notifications panel is not hiding every time when auto hide panel is on

js/connect-related.js

@@ -65,6 +65,7 @@ gluePromise.then((glue) => {
   trackConnection();
   trackNotificationCount();
   trackWindowZoom();
+  trackNotificationPanelVisibilityChange();
 });
 
 function trackWindowZoom() {
@@ -201,6 +202,31 @@ async function trackDisplayChange() {
   });
 }
 
+async function trackNotificationPanelVisibilityChange() {
+  const notificationPanel = q('#notification-panel');
+  const isPanelVisible = await glue.notifications.panel.isVisible();
+
+  if (isPanelVisible) {
+    notificationPanel.classList.add('app-active');
+  }
+
+  if (typeof glue.notifications.panel.onVisibilityChanged !== 'function') {
+    return;
+  }
+
+  const unSubscribe = glue.notifications.panel.onVisibilityChanged(
+    (isVisible) => {
+      if (isVisible) {
+        notificationPanel.classList.add('app-active');
+      } else {
+        notificationPanel.classList.remove('app-active');
+      }
+    }
+  );
+
+  return () => unSubscribe();
+}
+
 function windowCenter() {
   glue.windows.my().center();
 }
@@ -391,13 +417,12 @@ async function trackNotificationsConfigurationChange() {
 
 async function openNotificationPanel() {
   const glue = await gluePromise;
-  const isPanelVisible = await glue.notifications.panel.isVisible();
+  const panelApp = glue.windows.find(
+    'io-connect-notifications-panel-application'
+  );
 
-  if (isPanelVisible) {
-    await glue.notifications.panel.hide();
-  } else {
-    await glue.notifications.panel.show();
-  }
+  await glue.notifications.panel.show();
+  await panelApp.focus();
 }
 
 async function openFeedbackForm() {

js/utils.js

@@ -381,14 +381,15 @@ function handleDropDownClicks() {
 
 async function handleNotificationClick() {
   const enableNotifications = getSetting('enableNotifications');
+  const notificationPanel = q('#notification-panel');
 
   if (enableNotifications) {
     notificationEnabledObs.subscribe((data) => {
-      q('#notification-panel').classList[data ? 'remove' : 'add']('d-none');
+      notificationPanel.classList[data ? 'remove' : 'add']('d-none');
     });
   }
 
-  q('#notification-panel').addEventListener('click', (e) => {
+  notificationPanel.addEventListener('click', (e) => {
     e.preventDefault();
     e.stopPropagation();
     e.stopImmediatePropagation();

scss/mixin.scss

@@ -8,7 +8,7 @@
   }
 
   @mixin divider($theme) {
-    &::before {
+    &::after {
       @if $theme == "dark" {
         background-color: rgba(255, 255, 255, 0.075);
       } @else {
@@ -23,7 +23,7 @@
     }
 
     &:hover {
-      &::before {
+      &::after {
         background-color: transparent;
       }
     }