keycloak-uncached

KEYCLOAK-146: Added Loading screen while waiting for data. (Also

11/11/2013 1:06:19 PM

Details

diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/index.html b/admin-ui/src/main/resources/META-INF/resources/admin/index.html
index 9487218..4be31ec 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/index.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/index.html
@@ -73,8 +73,10 @@
         </button>
     </div>
 
-    <div id="loading">
-        <i class="icon-spinner icon-spin"></i> Loading...
+    <div id="loading" class="loading-backdrop">
+        <div class="loading">
+            <span>Loading...</span>
+        </div>
     </div>
 </div>
 
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-menu.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-menu.html
index 16f7b78..87e0ed1 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-menu.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-menu.html
@@ -1,5 +1,5 @@
 <ul data-ng-hide="createRealm">
-    <li data-ng-class="(!path[2] || path[1] == 'role' || path[2] == 'roles' || path[2] == 'token-settings' || path[2] == 'social-settings' || path[2] == 'required-credentials') && 'active'"><a href="#/realms/{{realm.id}}">Settings</a></li>
+    <li data-ng-class="(!path[2] || path[1] == 'role' || path[2] == 'roles' || path[2] == 'token-settings' || path[2] == 'social-settings' || path[2] == 'required-credentials' || path[2] == 'smtp-settings') && 'active'"><a href="#/realms/{{realm.id}}">Settings</a></li>
     <li data-ng-class="(path[2] == 'users' || path[1] == 'user') && 'active'"><a href="#/realms/{{realm.id}}/users">Users</a>
     </li>
     <li data-ng-class="(path[2] == 'applications' || path[1] == 'application') && 'active'"><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
index 6b3ca67..1cea3b5 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
@@ -55,9 +55,19 @@ body {
   color: #fff;
   font-weight: bold;
 }
+.loading-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1031;
+  background-color: #FFFFFF;
+  opacity: 0.75;
+}
 .loading {
   position: fixed;
-  z-index: 1000;
+  z-index: 1032;
   top: 50%;
   left: 50%;
   width: 6em;
@@ -75,10 +85,14 @@ body {
   border-radius: 0.4em;
 }
 .loading span {
-  font-size: 1.1em;
+  background: url(img/loader.gif) no-repeat center top;
+  font-size: 1.2em;
   color: #666;
   display: inline-block;
   padding-top: 0.36363636363636em;
+  margin-top: -2.27272727272727em;
+  margin-left: -2.27272727272727em;
+  padding-top: 2.90909090909091em;
 }
 /* Header */
 .header.rcue {
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
index 0109fe5..d5bfdf2 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
@@ -74,9 +74,20 @@ body {
     }
 }
 
+.loading-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1031;
+  background-color: #FFFFFF;
+  opacity: 0.75;
+}
+
 .loading {
     position: fixed;
-    z-index: 1000;
+    z-index: 1032;
     top: 50%;
     left: 50%;
     width: 6em;
@@ -93,12 +104,16 @@ body {
         padding: 0.3em;
         border-radius: 0.4em;
     }
-    
+
     span {
-        font-size: 1.1em;
+        background: url(img/loader.gif) no-repeat center top;
+        font-size: 1.2em;
         color: #666;
         display: inline-block;
         padding-top: 0.36363636363636em;
+        margin-top: -2.27272727272727em;
+        margin-left: -2.27272727272727em;
+        padding-top: 2.90909090909091em;
     }
 }