MID-6271 async panels + ajax loader icon improved

Evolveum · May 12, 2022 · 63fb61b · 63fb61b
1 parent 0e9d840
commit 63fb61b
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 171 deletions.
diff --git a/gui/admin-gui/src/frontend/js/midpoint-theme.js b/gui/admin-gui/src/frontend/js/midpoint-theme.js
@@ -8,13 +8,13 @@
 export default class MidPointTheme {
 
     constructor() {
-        var self = this;
+        const self = this;
 
         $(window).on('load', function() {
             //dom not only ready, but everything is loaded MID-3668
             $("body").removeClass("custom-hold-transition");
 
-            // initAjaxStatusSigns();
+           self.initAjaxStatusSigns();
 
             Wicket.Event.subscribe('/ajax/call/failure', function( attrs, jqXHR, textStatus, jqEvent, errorThrown ) {
                 console.error("Ajax call failure:\n" + JSON.stringify(attrs.target.location)
@@ -151,10 +151,6 @@ export default class MidPointTheme {
         });
     }
 
-    abc() {
-        alert('abc');
-    }
-
     // I'm not sure why sidebar has 15px padding -> and why I had to use 10px constant here [lazyman]
     fixContentHeight() {
         if ($(".main-footer").length > 0) {
@@ -184,13 +180,18 @@ export default class MidPointTheme {
     }
 
     initAjaxStatusSigns() {
-        document.getElementsByTagName('body')[0].onclick = clickFuncWicket6;
-        hideAjaxStatusSign();
+        document.getElementsByTagName('body')[0].onclick = this.clickFuncWicket6;
+
+        this.hideAjaxStatusSign();
+
+        const self = this;
+
         Wicket.Event.subscribe('/ajax/call/beforeSend', function( attributes, jqXHR, settings ) {
-            showAjaxStatusSign();
+            self.showAjaxStatusSign();
         });
+
         Wicket.Event.subscribe('/ajax/call/complete', function( attributes, jqXHR, textStatus) {
-            hideAjaxStatusSign();
+            self.hideAjaxStatusSign();
         });
     }
 
@@ -205,19 +206,9 @@ export default class MidPointTheme {
             for (i = 0; i < tooltips.length; ++i) {
                 tooltips[i].style.display = 'none';
             }
-            // document.querySelectorAll("[role='tooltip']").style.display = 'none';
         };
     }
 
-    hideAjaxStatusSignAndUnblock() {
-        hideAjaxStatusSign();
-        // $("#div").fadeIn();
-        // $('html, body').css({
-        //     overflow: 'auto',
-        //     height: 'auto'
-        // });
-    }
-
     /**
      * InlineMenu initialization function
      */

diff --git a/gui/admin-gui/src/frontend/scss/midpoint-theme.scss b/gui/admin-gui/src/frontend/scss/midpoint-theme.scss
@@ -398,54 +398,13 @@ th.cog, td.cog {
 }
 
 // Summary panel (panel above the edit user/role/org forms)
-
-//@mixin info-box-summary-panel($color) {
-//	border-top: 3px solid $color;
-//    min-height: 95px;
-//}
-//
-//.info-box.summary-panel-user {
-//  @include info-box-summary-panel($object-user-color);
-//}
-//
-//.info-box.summary-panel-role {
-//  @include info-box-summary-panel($object-role-color);
-//}
-//
-//.info-box.summary-panel-org {
-//  @include info-box-summary-panel($object-org-color);
-//}
-//
-//.info-box.summary-panel-service {
-//  @include info-box-summary-panel($object-service-color);
-//}
-//
-//.info-box.summary-panel-resource {
-//  @include info-box-summary-panel($object-resource-color);
-//}
-//
-//.info-box.summary-panel-shadow {
-//  @include info-box-summary-panel($object-shadow-color);
-//}
-//
-//.info-box.summary-panel-task {
-//  @include info-box-summary-panel($object-task-color);
-//}
-
 @mixin info-box-icon-summary-panel($color){
 	color: #FFF !important;
 	background-color: $color;
-	//padding: 3px;
-	//white-space: nowrap;
-	//text-align: center;
-	//line-height: 0px;
-    //border-radius: 0;
 }
 
 .info-box-icon.summary-panel-user {
   @include info-box-icon-summary-panel($object-user-color);
-  //line-height: 105px;
-  //height: 105px;
 }
 
 .info-box-icon.summary-panel-role {
@@ -659,15 +618,6 @@ th.cog, td.cog {
 	margin-top: 3px;
 }
 
-.navbar-ajax {
-	float: left;
-
-	& #ajax_busy {
-		margin-top: 12px;
-		margin-left: 8px;
-	}
-}
-
 .page-title {
 	color: #fff;
 	background-color: transparent;

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/page/PageBase.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/page/PageBase.html
@@ -25,8 +25,8 @@
                     </div>
                 </li>
                 <li class="nav-item">
-                    <div class="navbar-ajax">
-                        <img id="ajax_busy" src="img/ajax-loader.gif" style="display: inline; visibility: hidden;"/>
+                    <div class="ml-3 mt-2">
+                        <i id="ajax_busy" class="fas fa-sync fa-spin fa-lg" style="display: inline; visibility: hidden;"></i>
                     </div>
                 </li>
             </ul>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/AsyncUpdatePanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/AsyncUpdatePanel.java
@@ -21,6 +21,8 @@
 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.ajax.AjaxSelfUpdatingTimerBehavior;
+import org.apache.wicket.behavior.AttributeAppender;
+import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.markup.html.image.Image;
 import org.apache.wicket.model.IModel;
 import org.apache.wicket.model.Model;
@@ -41,8 +43,6 @@ public abstract class AsyncUpdatePanel<V, T extends Serializable> extends BasePa
 
     private static final Trace LOGGER = TraceManager.getTrace(AsyncUpdatePanel.class);
 
-    private static final ResourceReference PRELOADER = new PackageResourceReference(ImgResources.class, "ajax-loader.gif");
-
     public static final int DEFAULT_TIMER_DURATION = 2; // seconds
 
     private IModel<V> callableParameterModel;
@@ -124,16 +124,7 @@ protected boolean isLoadingVisible() {
     }
 
     protected Component getLoadingComponent(final String markupId) {
-        Image image = new Image(markupId, PRELOADER);
-        image.add(new VisibleEnableBehaviour() {
-
-            @Override
-            public boolean isVisible() {
-                return isLoadingVisible();
-            }
-        });
-
-        return image;
+        return new Label(markupId);
     }
 
     protected abstract Component getMainComponent(final String markupId);

diff --git a/...rc/main/java/com/evolveum/midpoint/web/page/admin/home/component/AsyncDashboardPanel.html b/...rc/main/java/com/evolveum/midpoint/web/page/admin/home/component/AsyncDashboardPanel.html
@@ -13,9 +13,11 @@
             <h3 class="card-title"><i class="mr-2" wicket:id="icon"/> <span wicket:id="title"/></h3>
         </div>
         <div class="card-body" wicket:id="dashboardContent">
-            <div wicket:id="preloaderContainer" style="margin: 10px 0; text-align: center;">
-                <img wicket:id="preloader"/>
-                <wicket:message key="AsyncDashboardPanel.loading"/>
+            <div class="m-3" wicket:id="preloaderContainer">
+                <div class="text-center">
+                    <i wicket:id="preloader" class="fas fa-sync fa-spin fa-lg text-secondary"></i>
+                </div>
+                <div class="m-2 text-center"><wicket:message key="AsyncDashboardPanel.loading"/></div>
             </div>
             <div wicket:id="content"/>
         </div>