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:
parent
5b19e34f50
commit
c8dd9c3b95
4 changed files with 39 additions and 8 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue