Details
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
index 84aa0c6..fcb89f1 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
@@ -4,22 +4,27 @@
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav" data-ng-hide="createRealm">
<ul class="rcue-tabs">
- <li class="active"><a href="#/realms/{{realm.id}}">Settings</a></li>
+ <li class="active"><a href="#/realms/{{realm.id}}">General</a></li>
<li data-ng-show="realm.social"><a href="#">Social</a></li>
<li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
- <li><a href="#/realms/{{realm.id}}/required-credentials">Required Credentials</a></li>
- <li><a href="#/realms/{{realm.id}}/token-settings">Token Settings</a></li>
+ <li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
+ <li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
</ul>
</div>
<div id="content">
- <h2 class="pull-left" data-ng-show="createRealm">New Realm</h2>
- <h2 class="pull-left" data-ng-hide="createRealm">Realm: <span>{{realm.realm}}</span></h2>
+ <ol class="breadcrumb" data-ng-hide="createRealm">
+ <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+ <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+ <li class="active">General</li>
+ </ol>
+ <h2 class="pull-left" data-ng-show="createRealm">Add Realm</h2>
+ <h2 class="pull-left" data-ng-hide="createRealm"><span>{{realm.realm}}</span> General Settings</h2>
<p class="subtitle" data-ng-show="createRealm"><span class="required">*</span> Required fields</p>
<form name="realmForm" novalidate>
<fieldset>
- <legend uncollapsed><span class="text">Required Settings</span> </legend>
+ <legend uncollapsed><span class="text">Required Settings</span></legend>
<div class="form-group">
- <label for="name">Name </label><span class="required" data-ng-show="createRealm">*</span>
+ <label for="name">Name <span class="required" data-ng-show="createRealm">*</span></label>
<div class="controls">
<input type="text" id="name" name="name" data-ng-model="realm.realm" autofocus
@@ -107,7 +112,6 @@
<div class="form-actions" data-ng-show="!createRealm">
<button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
- changes
</button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button>
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 5d0c1c4..1c2ccba 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] == 'required-credentials') && 'active'"><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+ <li data-ng-class="(!path[2] || path[1] == 'role' || path[2] == 'roles' || path[2] == 'token-settings' || path[2] == 'required-credentials') && '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/src/main/resources/META-INF/resources/admin/partials/role-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
index a819452..f2d0a3e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
@@ -4,32 +4,47 @@
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav">
<ul class="rcue-tabs">
- <li><a href="#/create/role/{{realm.id}}">New Realm Role</a></li>
- <li class="active"><a href="#/realms/{{realm.id}}/roles">Realm Roles</a></li>
- <li><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+ <li><a href="#/realms/{{realm.id}}">General</a></li>
+ <li data-ng-show="realm.social"><a href="#">Social</a></li>
+ <li class="active"><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
+ <li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
+ <li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
</ul>
</div>
<div id="content">
- <h2 class="pull-left">Realm Roles</h2>
+ <ol class="breadcrumb" data-ng-hide="createRealm">
+ <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+ <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+ <li class="active">Roles</li>
+ </ol>
+ <h2 class="pull-left"><span>{{realm.realm}}</span> Roles</h2>
<table>
- <caption data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
+ <caption class="hidden" data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
<caption data-ng-show="!roles || roles.length == 0">No configured realm roles...</caption>
<thead>
- <tr data-ng-show="roles && roles.length > 5">
- <th class="rcue-table-actions" colspan="2">
- <div class="search-comp clearfix">
- <input type="text" placeholder="Search..." class="search">
- <button class="icon-search tooltipRightTrigger"
- data-original-title="Search by role name.">
- Icon: search
- </button>
- </div>
- </th>
- </tr>
- <tr>
- <th>Role Name</th>
- <th>Description</th>
- </tr>
+ <tr>
+ <th class="rcue-table-actions" colspan="2">
+ <div class="actions">
+ <a class="button" href="#/create/role/{{realm.id}}">Add</a>
+ <!-- <button class="remove disabled">Remove</button> -->
+ </div>
+ </th>
+ </tr>
+ <tr data-ng-show="roles && roles.length > 5">
+ <th class="rcue-table-actions" colspan="2">
+ <div class="search-comp clearfix">
+ <input type="text" placeholder="Search..." class="search">
+ <button class="icon-search tooltipRightTrigger"
+ data-original-title="Search by role name.">
+ Icon: search
+ </button>
+ </div>
+ </th>
+ </tr>
+ <tr>
+ <th>Role Name</th>
+ <th>Description</th>
+ </tr>
</thead>
<tfoot data-ng-show="roles && roles.length > 5"> <!-- todo -->
<tr>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
index d4ffcce..902394d 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
@@ -4,36 +4,48 @@
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav">
<ul class="rcue-tabs" >
- <li><a href="#/create/user/{{realm.id}}">New User</a></li>
- <li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
- <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}} Attributes</a></li>
- <li><a href="#">{{user.username}} Credentials</a></li>
- <li class="active"><a href="#">{{user.username}} Role Mappings</a></li>
+ <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">Attributes</a></li>
+ <li><a href="#">Credentials</a></li>
+ <li class="active"><a href="#">Role Mappings</a></li>
</ul>
</div>
<div id="content">
- <h2 class="pull-left">User Role Mappings for <span>{{user.username}}</span></h2>
- <p class="subtitle"></p>
+ <ol class="breadcrumb">
+ <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+ <li><a href="#/realms/{{realm.id}}/users">Users</a></li>
+ <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}}</a></li>
+ <li class="active">Role Mappings</li>
+ </ol>
+ <h2 class="pull-left"><span>{{user.username}}'s</span> Role Mappings</h2>
+ <p class="subtitle">All fields required</p>
<form name="realmForm" novalidate>
- <fieldset>
- <legend uncollapsed><span class="text">Realm Roles</span> </legend>
+ <fieldset class="border-top">
<div class="form-group">
- <div class="controls">
- <select multiple size="5"
- ng-multiple="true"
- ng-model="selectedRealmRoles"
- ng-options="r.name for r in realmRoles">
- </select>
- <button type="submit" ng-click="addRealmRole()">---></button>
- <button type="submit" ng-click="deleteRealmRole()"><---</button>
- <select multiple size=5
+ <div class="controls changing-selectors">
+ <div class="select-title">
+ <label for="available">Available Roles</label>
+ <select id="available" class="form-control" multiple size="5"
+ ng-multiple="true"
+ ng-model="selectedRealmRoles"
+ ng-options="r.name for r in realmRoles">
+ </select>
+ </div>
+ <div class="middle-buttons">
+ <button type="submit" ng-click="addRealmRole()" data-original-title="Move right" class="tooltipRightTrigger"><span class="icon-arrow-right">Move right</span></button>
+ <button type="submit" ng-click="deleteRealmRole()" data-original-title="Move left" class="tooltipRightTrigger"><span class="icon-arrow-left">Move left</span></button>
+ </div>
+ <div class="select-title">
+ <label for="assigned">Assigned Roles</label>
+ <select id="assigned" class="form-control" multiple size=5
ng-multiple="true"
ng-model="selectedRealmMappings"
ng-options="r.name for r in realmMappings">
- </select>
+ </select>
+ </div>
</div>
</div>
</fieldset>
+
<fieldset ng-show="applications.length > 0">
<legend collapsed><span class="text">Application Roles</span> </legend>
<div class="form-group input-select">
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.css
index 2576209..a23e981 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.css
@@ -29,12 +29,19 @@ a:hover {
text-decoration: underline;
}
/* Styles from Gabriel */
+a:hover,
+a:focus {
+ color: #0099d3;
+}
strong {
font-weight: bold;
}
.hidden {
display: none;
}
+.feedback.show {
+ display: inline-block !important;
+}
.pull-right {
float: right;
}
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.less
index 9af7c45..ee48322 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.less
@@ -33,6 +33,11 @@ a:hover {
/* Styles from Gabriel */
+a:hover,
+a:focus {
+ color: #0099d3;
+}
+
strong {
font-weight: bold;
}
@@ -41,6 +46,10 @@ strong {
display: none;
}
+.feedback.show {
+ display: inline-block!important;
+}
+
.pull-right {
float: right;
}
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
index 5394d3b..6b3afd3 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
@@ -712,3 +712,66 @@ input[type="email"].tiny {
font-size: 1.1em;
margin-right: 0.90909090909091em;
}
+.changing-selectors .select-title {
+ display: inline-block;
+}
+.changing-selectors .select-title label {
+ font-size: 1.1em;
+ margin-left: 0.2em;
+ margin-bottom: 0.3em;
+ margin-top: 0.5em;
+ display: block;
+ font-weight: normal;
+}
+.changing-selectors select {
+ min-height: 150px;
+ font-size: 1.1em;
+ padding: 0.545454545454545em;
+ min-width: 18.1818181818182em;
+ border: 1px #b6b6b6 solid;
+ border-radius: 2px;
+ box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
+ color: #333;
+ max-width: 200px;
+ width: auto;
+ min-width: 150px;
+ display: inline-block;
+}
+.changing-selectors select:hover {
+ border-color: #62afdb;
+}
+.changing-selectors select option {
+ padding: 0.36363636363636em 0.45454545454545em;
+ display: block;
+}
+.changing-selectors select option[disabled="disabled"] {
+ color: #aaa;
+}
+.changing-selectors .middle-buttons {
+ display: inline-block;
+ width: 4.5em;
+ margin-left: 0.8em;
+ margin-right: 0.8em;
+ vertical-align: middle;
+}
+.changing-selectors .middle-buttons button:first-child {
+ margin-bottom: 0.5em;
+}
+.changing-selectors .middle-buttons button.disabled span {
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+}
+.changing-selectors .middle-buttons button span {
+ margin-right: 0;
+}
+.breadcrumb {
+ background: none;
+ margin: 5px 0 5px 0;
+ padding: 0;
+}
+.breadcrumb li a {
+ font-size: 1.1em;
+}
+.breadcrumb > li + li:before {
+ content: "» ";
+}
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
index 516dd6f..962e7b1 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
@@ -851,5 +851,92 @@ input[type="email"] {
font-size: 1.1em;
margin-right: 0.90909090909091em;
}
+}
+
+.changing-selectors {
+
+ .select-title {
+
+ display: inline-block;
+
+ label {
+ font-size: 1.1em;
+ margin-left: 0.2em;
+ margin-bottom: 0.3em;
+ margin-top: 0.5em;
+ display: block;
+ font-weight: normal;
+ }
+
+ }
+ select {
+ min-height: 150px;
+ font-size: 1.1em;
+ padding: 0.545454545454545em;
+ min-width: 18.1818181818182em;
+ border: 1px #b6b6b6 solid;
+ border-radius: 2px;
+ box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1);
+ color: #333;
+ max-width: 200px;
+ width: auto;
+ min-width: 150px;
+ display: inline-block;
+
+ &:hover {
+ border-color: #62afdb;
+ }
+
+ option {
+ padding: 0.36363636363636em 0.45454545454545em;
+ display: block;
+
+ &[disabled="disabled"] {
+ color: #aaa;
+ }
+ }
+ }
+
+ .middle-buttons {
+ display: inline-block;
+ width: 4.5em;
+ margin-left: 0.8em;
+ margin-right: 0.8em;
+ vertical-align: middle;
+
+ button {
+
+ &:first-child {
+ margin-bottom: 0.5em;
+ }
+
+ &.disabled span {
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ }
+
+ span {
+ margin-right: 0;
+ }
+ }
+ }
+}
+
+.breadcrumb {
+
+ background: none;
+ margin: 5px 0 5px 0;
+ padding: 0;
+
+ li {
+
+ a {
+ font-size: 1.1em;
+ }
+ }
+
+ > li + li:before {
+ content: "» ";
+ }
}
\ No newline at end of file
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
index 1b0f3da..15a1f34 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
@@ -88,25 +88,26 @@ table tbody tr:hover {
table tbody tr {
border-top: 1px solid #ededed;
}
-table tbody tr.selected {
- background-color: #eaf5fb;
-}
-table tbody tr.selected td:first-child {
- background-image: url(img/icon-row-selected.svg);
- background-position: 0.2em center;
- background-repeat: no-repeat;
-}
table tbody tr:hover {
cursor: default;
}
+table tbody tr td {
+ vertical-align: middle;
+}
table tbody tr td.token-cell {
padding: 0 0.7em;
+ line-height: 0;
}
table tbody tr td.token-cell .token {
padding-top: 0.18181818181818em;
padding-bottom: 0.18181818181818em;
- margin-top: 7px;
+ margin-top: 6px;
+ margin-bottom: 5px;
+}
+table tbody tr td.token-cell button {
+ float: left;
margin-bottom: 7px;
+ margin-top: 8px;
}
table tbody.selectable-rows tr:hover {
cursor: pointer;
@@ -115,6 +116,16 @@ table tbody.selectable-rows tr:hover {
table tbody.selectable-rows tr:first-child td {
padding-top: 9px;
}
+table tbody.selectable-rows tr.selected,
+table tbody.selectable-rows tr.selected:hover {
+ background-color: #eaf5fb;
+}
+table tbody.selectable-rows tr.selected td:first-child,
+table tbody.selectable-rows tr.selected:hover td:first-child {
+ background-image: url(img/icon-row-selected.svg);
+ background-position: 0.2em center;
+ background-repeat: no-repeat;
+}
table tfoot tr {
border-top: 1px solid #cecece;
}
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.less
index 0a35bc5..6426f29 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.less
@@ -120,28 +120,29 @@ table {
border-top: 1px solid #ededed;
- &.selected {
- background-color: #eaf5fb;
-
- td:first-child {
- background-image: url(img/icon-row-selected.svg);
- background-position: 0.2em center;
- background-repeat: no-repeat;
- }
- }
-
&:hover {
cursor: default;
}
+ td {
+ vertical-align: middle;
+ }
+
td.token-cell {
padding: 0 0.7em;
+ line-height: 0;
.token {
padding-top: 0.18181818181818em;
padding-bottom: 0.18181818181818em;
- margin-top: 7px;
+ margin-top: 6px;
+ margin-bottom: 5px;
+ }
+
+ button {
+ float: left;
margin-bottom: 7px;
+ margin-top: 8px;
}
}
}
@@ -156,6 +157,17 @@ table {
tr:first-child td {
padding-top: 9px;
}
+
+ tr.selected,
+ tr.selected:hover {
+ background-color: #eaf5fb;
+
+ td:first-child {
+ background-image: url(img/icon-row-selected.svg);
+ background-position: 0.2em center;
+ background-repeat: no-repeat;
+ }
+ }
}
}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
index 9e8a6a0..f3fadb5 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
@@ -625,7 +625,7 @@ input[type="email"].tiny {
line-height: 1.45454545454545em;
}
.tokenfield.form-control .token .close {
- text-indent: -9999999em;
+ text-indent: -99999em;
width: 1.6em;
height: 1.6em;
line-height: 1.6em;
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
index fcfb0cc..1a35f74 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
@@ -5,7 +5,7 @@
height: 16px;
background-image: url(img/sprites.png); /* Modified by Gabriel */
background-repeat: no-repeat;
- text-indent: -9999999em;
+ text-indent: -99999em;
margin-right: 0.5em;
vertical-align: text-top;
}
