chg: [helper:overlay] Better support of themes and added blur

webroot/css/main.css

@@ -21,6 +21,10 @@
     color:black;
 }
 
+.loading-overlay-container {
+    backdrop-filter: blur(1px);
+}
+
 @media(min-width:768px) {
     #wrapper {
         padding-left: 0;
@@ -100,9 +104,9 @@ input[type="checkbox"]:disabled.change-cursor {
 }
 
 .grow-on-hover:hover {
-    -webkit-transform: translateZ(0) scale(1.03, 1.03);
-    -moz-transform: translateZ(0) scale(1.03, 1.03);
-    transform: translateZ(0) scale(1.03, 1.03);
+    -webkit-transform: translateZ(0) scale(1.02, 1.02);
+    -moz-transform: translateZ(0) scale(1.02, 1.02);
+    transform: translateZ(0) scale(1.02, 1.02);
     box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
 }
 

webroot/css/themes/theme-darkly.css

@@ -289,6 +289,10 @@
   border: 1px solid #454545;
   box-shadow: none; }
 
+.loading-overlay {
+  background-color: #222;
+  opacity: 0.65; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #375a7f; }

webroot/css/themes/theme-default.css

@@ -289,6 +289,10 @@
   border: none;
   box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
 
+.loading-overlay {
+  background-color: #f8f9fa;
+  opacity: 0.75; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #212529; }

webroot/css/themes/theme-flatly.css

@@ -289,6 +289,10 @@
   border: none;
   box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
 
+.loading-overlay {
+  background-color: #ecf0f1;
+  opacity: 0.75; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #2c3e50; }

webroot/css/themes/theme-minty.css

@@ -289,6 +289,10 @@
   border: none;
   box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
 
+.loading-overlay {
+  background-color: #ecf0f1;
+  opacity: 0.65; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #2c3e50; }

webroot/css/themes/theme-quartz.css

@@ -289,6 +289,10 @@
   border: none;
   box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.25); }
 
+.loading-overlay {
+  background-color: #e9e9e8;
+  opacity: 0.35; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #e83283; }

webroot/css/themes/theme-slate.css

@@ -285,6 +285,10 @@
   border: 1px solid #454545;
   box-shadow: none; }
 
+.loading-overlay {
+  background-color: #272b30;
+  opacity: 0.65; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #3a3f44; }

webroot/css/themes/theme-vapor.css

@@ -289,6 +289,10 @@
   border: 1px solid #454545;
   box-shadow: none; }
 
+.loading-overlay {
+  background-color: #170229;
+  opacity: 0.65; }
+
 /* Top navbar */
 .top-navbar {
   background-color: #6f42c1; }

webroot/js/bootstrap-helper.js

@@ -859,7 +859,7 @@ class OverlayFactory {
      * @namespace
      * @property {string}  text - A small text indicating the reason of the overlay
      * @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} variant - The variant of the overlay
-     * @property {number}  opacity        - The opacity of the overlay
+     * @property {number|string}  opacity        - The opacity of the overlay
      * @property {boolean} rounded        - If the overlay should be rounded
      * @property {boolean}  auto           - Whether overlay and spinner options should be adapted automatically based on the node
      * @property {string=('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'|'white'|'transparent')} spinnerVariant - The variant of the spinner
@@ -868,8 +868,8 @@ class OverlayFactory {
      */
     static defaultOptions = {
         text: '',
-        variant: 'light',
-        opacity: 0.85,
+        variant: '',
+        opacity: '',
         blur: '2px',
         rounded: false,
         auto: true,
@@ -881,7 +881,7 @@ class OverlayFactory {
     }
 
     static overlayWrapper = '<div aria-busy="true" class="position-relative"/>'
-    static overlayContainer = '<div class="position-absolute text-nowrap" style="inset: 0px; z-index: 1100;"/>'
+    static overlayContainer = '<div class="position-absolute text-nowrap loading-overlay-container" style="inset: 0px; z-index: 1100;"/>'
     static overlayBg = '<div class="position-absolute loading-overlay" style="inset: 0px;"/>'
     static overlaySpinner = '<div class="position-absolute" style="top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);"><span aria-hidden="true" class=""><!----></span></div></div>'
     static overlayText = '<span class="ml-1 align-text-top"></span>'
@@ -903,7 +903,9 @@ class OverlayFactory {
         this.$overlayContainer = $(OverlayFactory.overlayContainer)
         this.$overlayBg = $(OverlayFactory.overlayBg)
             .addClass([`bg-${this.options.variant}`, (this.options.rounded ? 'rounded' : '')])
-            .css('opacity', this.options.opacity)
+        if (this.options.opacity !== '') {
+            this.$overlayBg.css('opacity', this.options.opacity)
+        }
         this.$overlaySpinner = $(OverlayFactory.overlaySpinner)
         this.$overlaySpinner.children().addClass(`spinner-${this.options.spinnerType}`)
         if (this.options.spinnerSmall) {

webroot/theme/scss/theme-darkly.scss

@@ -8,6 +8,9 @@ $panelBgColor: #363636;
 $panelShadow: none;
 $panelBorder: 1px solid #454545;
 
+$loadingOverlayDefaultColor: $gray-900 !default;
+$loadingOverlayDefaultOpacity: 0.65 !default;
+
 $topNavbarColor: $primary;
 $navbarActiveColor: #d6d6d6;
 // $headerBreadcrumbLinksBoxshadow: 0 1px 0 rgba(255, 255, 255, 0.07),

webroot/theme/scss/theme-default.scss

@@ -8,6 +8,9 @@ $panelBgColor: $white !default;
 $panelShadow: 0 0 35px 0 rgba(154, 161, 171, 0.25) !default;
 $panelBorder: none !default;
 
+$loadingOverlayDefaultColor: $light !default;
+$loadingOverlayDefaultOpacity: 0.75 !default;
+
 $topNavbarColor: $dark !default;
 $navbarActiveColor: #d6d6d6 !default;
 $headerBreadcrumbLinksBoxshadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12) !default;
@@ -36,6 +39,11 @@ $calloutShadow: $panelShadow !default;
     box-shadow: $panelShadow;
 }
 
+.loading-overlay {
+    background-color: $loadingOverlayDefaultColor;
+    opacity: $loadingOverlayDefaultOpacity;
+}
+
 /* Top navbar */
 .top-navbar {
     background-color: $topNavbarColor;

webroot/theme/scss/theme-minty.scss

@@ -7,6 +7,8 @@ $theme: "app-flatly";
 $topNavbarColor: $primary;
 $navbarActiveColor: #d6d6d6;
 
+$loadingOverlayDefaultOpacity: 0.65 !default;
+
 $sidebarBgColor: $light;
 $sidebarTextColor: $gray-800;
 $sidebarActiveColor: $success;

webroot/theme/scss/theme-quartz.scss

@@ -7,6 +7,9 @@ $theme: "app-slate";
 $panelBgColor: $card-bg;
 $panelBorder: none;
 
+$loadingOverlayDefaultColor: $light !default;
+$loadingOverlayDefaultOpacity: 0.35 !default;
+
 $topNavbarColor: $primary;
 $navbarActiveColor: #d6d6d6;
 $headerBreadcrumbLinksBGColor: $secondary;

webroot/theme/scss/theme-slate.scss

@@ -11,6 +11,9 @@ $panelBgColor: #363636;
 $panelShadow: none;
 $panelBorder: 1px solid #454545;
 
+$loadingOverlayDefaultColor: $gray-900 !default;
+$loadingOverlayDefaultOpacity: 0.65 !default;
+
 $topNavbarColor: $primary;
 $navbarActiveColor: #d6d6d6;
 // $headerBreadcrumbLinksBoxshadow: 0 1px 0 rgba(255, 255, 255, 0.07),

webroot/theme/scss/theme-vapor.scss

@@ -8,6 +8,9 @@ $panelBgColor: #363636;
 $panelShadow: none;
 $panelBorder: 1px solid #454545;
 
+$loadingOverlayDefaultColor: $dark !default;
+$loadingOverlayDefaultOpacity: 0.65 !default;
+
 $topNavbarColor: $primary;
 
 $sidebarBgColor: $dark;