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.
dnnsoftware · Aug 9, 2023 · e69f3db · e69f3db
1 parent 5b83388
commit e69f3db
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 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
@@ -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
@@ -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 () {
+    }
+  }
+});