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

(Also includes a fix for SMTP not marking "Settings" as active)
This commit is contained in:
ammendonca 2013-11-11 15:06:19 +00:00
parent 5b19e34f50
commit c8dd9c3b95
4 changed files with 39 additions and 8 deletions

View file

@ -55,9 +55,19 @@ body {
color: #fff; color: #fff;
font-weight: bold; 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 { .loading {
position: fixed; position: fixed;
z-index: 1000; z-index: 1032;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 6em; width: 6em;
@ -75,10 +85,14 @@ body {
border-radius: 0.4em; border-radius: 0.4em;
} }
.loading span { .loading span {
font-size: 1.1em; background: url(img/loader.gif) no-repeat center top;
font-size: 1.2em;
color: #666; color: #666;
display: inline-block; display: inline-block;
padding-top: 0.36363636363636em; padding-top: 0.36363636363636em;
margin-top: -2.27272727272727em;
margin-left: -2.27272727272727em;
padding-top: 2.90909090909091em;
} }
/* Header */ /* Header */
.header.rcue { .header.rcue {

View file

@ -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 { .loading {
position: fixed; position: fixed;
z-index: 1000; z-index: 1032;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 6em; width: 6em;
@ -95,10 +106,14 @@ body {
} }
span { span {
font-size: 1.1em; background: url(img/loader.gif) no-repeat center top;
font-size: 1.2em;
color: #666; color: #666;
display: inline-block; display: inline-block;
padding-top: 0.36363636363636em; padding-top: 0.36363636363636em;
margin-top: -2.27272727272727em;
margin-left: -2.27272727272727em;
padding-top: 2.90909090909091em;
} }
} }

View file

@ -73,8 +73,10 @@
</button> </button>
</div> </div>
<div id="loading"> <div id="loading" class="loading-backdrop">
<i class="icon-spinner icon-spin"></i> Loading... <div class="loading">
<span>Loading...</span>
</div>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
<ul data-ng-hide="createRealm"> <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 data-ng-class="(path[2] == 'users' || path[1] == 'user') && 'active'"><a href="#/realms/{{realm.id}}/users">Users</a>
</li> </li>
<li data-ng-class="(path[2] == 'applications' || path[1] == 'application') && 'active'"><a href="#/realms/{{realm.id}}/applications">Applications</a></li> <li data-ng-class="(path[2] == 'applications' || path[1] == 'application') && 'active'"><a href="#/realms/{{realm.id}}/applications">Applications</a></li>