From e69f3dbc5a08e0afb93638990246c60c1993d5a9 Mon Sep 17 00:00:00 2001
From: Daniel Valadas <info@danielvaladas.com>
Date: Wed, 9 Aug 2023 11:31:18 -0400
Subject: [PATCH] Fixed an issue where ServerSummary would not hide (#5792)

Closes #5771

Some browser change (affecting most Chromium based browsers) made it so that the Server Summary panel would no longer hide after showing. This simplifies the css and improves the javascript to circumvent the issue.
---
 .../admin/personaBar/css/main.css             |  12 +-
 .../admin/personaBar/scripts/serversummary.js | 193 +++++++++---------
 2 files changed, 102 insertions(+), 103 deletions(-)

diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
index f914fb2a004..1671be9f4b1 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
@@ -2062,9 +2062,9 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     top: 0;
     opacity: 0;
     display: none;
+    visibility: hidden;
     box-sizing: border-box;
-    animation: summarymenu 200ms linear;
-    animation-fill-mode: forwards;
+    animation: summarymenu 200ms linear forwards;
     text-align: left;
     cursor: default;
 }
@@ -2080,15 +2080,11 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 @keyframes summarymenu {
     0% {
         opacity: 0;
-        display: none;
-    }
-    1% {
-        opacity: 0;
-        display: block;
+        visibility: hidden;
     }
     100% {
         opacity: 1;
-        display: block;
+        visibility: visible;
     }
 }
 
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js
index 1c748f4a897..e0fbd1bbb54 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js
@@ -1,95 +1,98 @@
-'use strict';
-define(['jquery', 'knockout', 'jquery.hoverIntent.min'], function ($, ko) {
-  var mainFrame = window.parent.document.getElementById("personaBar-iframe");
-  var personaBarWidth = 80;
-  var util = null;
-
-  var getSummaryContainer = function () {
-    var $summary = $('.server-summary');
-    if (!$summary.length) {
-      $summary = $('' +
-        '<div class="server-summary hoverSummaryMenu">' +
-        '<ul>' +
-        '<li class="border version-info"><label data-bind="html: ProductName"></label><span data-bind="html: ProductVersion"></span></li>' +
-        '<li class="border new-version-info" data-bind="visible: !Update.UpToDate, css: { \'critical\': Update.Critical }"><label data-bind="html: resx.LatestVersion"></label>' +
-        '<span><a target="_blank" data-bind="attr: { \'href\': Update.Url }, html: Update.Version"></a><span class="update-critical" data-bind="visible: Update.Critical, html: resx.Critical"></span></span></li>' +
-        '<li class="border framework" data-bind="visible: FrameworkVersion.length > 0"><label data-bind="html: resx.Framework"></label><span data-bind="html: FrameworkVersion"></span></li>' +
-        '<li class="border server-name" data-bind="visible: ServerName.length > 0"><label data-bind="html: resx.ServerName"></label><span data-bind="html: ServerName"></span></li>' +
-        '<li class="separator"></li>' +
-        '<li class="doc-center"><a href="https://dnndocs.com/" data-bind="html: resx.Documentation, visible: visibleCheck(\'DocCenterVisible\')" target="_blank"></a></li>' +
-        '<li id="Logout" class="logout" data-bind="html: resx.nav_Logout"></li>' +
-        '</ul>' +
-        '</div>');
-
-      $('#personabar').find('.personabarLogo').append($summary);
-    }
-
-    return $summary;
-  }
-  var showServerSummary = function () {
-    mainFrame.style.width = '100%';
-    $('.hoverSummaryMenu, .hovermenu').hide();
-    getSummaryContainer().addClass('shown');
-  }
-
-  var hideServerSummary = function () {
-    if (!$('.hovermenu:visible').length && !$('.socialpanel:visible').length) {
-      mainFrame.style.width = personaBarWidth + "px";
-    }
-    getSummaryContainer().removeClass('shown');
-  }
-
-  var getServerInfo = function (callback) {
-    util.sf.moduleRoot = "personaBar";
-    util.sf.controller = "ServerSummary";
-    util.sf.getsilence("GetServerInfo", {}, function (data) {
-      if (typeof callback === "function") {
-        callback(data);
-      }
-    });
-  }
-
-  var initialize = function () {
-    if (!util.resx) {
-      setTimeout(initialize, 500);
-      return;
-    }
-    var $logo = $('#personabar').find('.personabarLogo');
-    var $summaryContainer = getSummaryContainer();
-
-    getServerInfo(function (info) {
-      var viewModel = $.extend({}, info, {
-        resx: util.resx.PersonaBar, visibleCheck: function (name) {
-          return info[name];
-        }
-      });
-      try {
-        ko.applyBindings(viewModel, $summaryContainer[0]);
-      } catch (ex) {
-
-      }
-    });
-
-    $logo.hoverIntent({
-      over: function () {
-        showServerSummary();
-      },
-      out: function () {
-        hideServerSummary();
-      },
-      timeout: 200
-    });
-  }
-
-  return {
-    init: function (utility) {
-      util = utility;
-
-      initialize();
-    },
-    load: function () {
-    },
-    leave: function () {
-    }
-  }
-});
+'use strict';
+define(['jquery', 'knockout', 'jquery.hoverIntent.min'], function ($, ko) {
+  var mainFrame = window.parent.document.getElementById("personaBar-iframe");
+  var personaBarWidth = 80;
+  var util = null;
+
+  var getSummaryContainer = function () {
+    var $summary = $('.server-summary');
+    if (!$summary.length) {
+      $summary = $('' +
+        '<div class="server-summary hoverSummaryMenu">' +
+        '<ul>' +
+        '<li class="border version-info"><label data-bind="html: ProductName"></label><span data-bind="html: ProductVersion"></span></li>' +
+        '<li class="border new-version-info" data-bind="visible: !Update.UpToDate, css: { \'critical\': Update.Critical }"><label data-bind="html: resx.LatestVersion"></label>' +
+        '<span><a target="_blank" data-bind="attr: { \'href\': Update.Url }, html: Update.Version"></a><span class="update-critical" data-bind="visible: Update.Critical, html: resx.Critical"></span></span></li>' +
+        '<li class="border framework" data-bind="visible: FrameworkVersion.length > 0"><label data-bind="html: resx.Framework"></label><span data-bind="html: FrameworkVersion"></span></li>' +
+        '<li class="border server-name" data-bind="visible: ServerName.length > 0"><label data-bind="html: resx.ServerName"></label><span data-bind="html: ServerName"></span></li>' +
+        '<li class="separator"></li>' +
+        '<li class="doc-center"><a href="https://dnndocs.com/" data-bind="html: resx.Documentation, visible: visibleCheck(\'DocCenterVisible\')" target="_blank"></a></li>' +
+        '<li id="Logout" class="logout" data-bind="html: resx.nav_Logout"></li>' +
+        '</ul>' +
+        '</div>');
+
+      $('#personabar').find('.personabarLogo').append($summary);
+    }
+
+    return $summary;
+  }
+  var showServerSummary = function () {
+      mainFrame.style.width = '100%';
+      var container = getSummaryContainer();
+      container.show();
+      container.addClass('shown');
+  }
+
+  var hideServerSummary = function () {
+    if (!$('.hovermenu:visible').length && !$('.socialpanel:visible').length) {
+      mainFrame.style.width = personaBarWidth + "px";
+    }
+      var container = getSummaryContainer();
+      container.removeClass('shown');
+      container.hide();
+  }
+
+  var getServerInfo = function (callback) {
+    util.sf.moduleRoot = "personaBar";
+    util.sf.controller = "ServerSummary";
+    util.sf.getsilence("GetServerInfo", {}, function (data) {
+      if (typeof callback === "function") {
+        callback(data);
+      }
+    });
+  }
+
+  var initialize = function () {
+    if (!util.resx) {
+      setTimeout(initialize, 500);
+      return;
+    }
+    var $logo = $('#personabar').find('.personabarLogo');
+    var $summaryContainer = getSummaryContainer();
+
+    getServerInfo(function (info) {
+      var viewModel = $.extend({}, info, {
+        resx: util.resx.PersonaBar, visibleCheck: function (name) {
+          return info[name];
+        }
+      });
+      try {
+        ko.applyBindings(viewModel, $summaryContainer[0]);
+      } catch (ex) {
+
+      }
+    });
+
+    $logo.hoverIntent({
+      over: function () {
+        showServerSummary();
+      },
+      out: function () {
+        hideServerSummary();
+      },
+      timeout: 200
+    });
+  }
+
+  return {
+    init: function (utility) {
+      util = utility;
+
+      initialize();
+    },
+    load: function () {
+    },
+    leave: function () {
+    }
+  }
+});