libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

Breadcrumbs, User roles and changes in realms

Browse source
This commit is contained in:
Gabriel Cardoso 2013-10-15 16:39:43 -03:00
parent 26156df8f8
commit 8694b717cc
12 changed files with 290 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.css
View file

@ -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;
}

9
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/base.less
View file

@ -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;
}

63
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
View file

@ -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: "» ";
}

87
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
View file

@ -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: "» ";
}
}

29
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
View file

@ -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;
}

34
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.less
View file

@ -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;
}
}
}
}

20
admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
View file

@ -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>

2
admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-menu.html
View file

@ -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>

55
admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
View file

@ -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>

50
admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
View file

@ -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()">---&gt;</button>
<button type="submit" ng-click="deleteRealmRole()">&lt;---</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">

2
forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css
View file

@ -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;

2
forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css
View file

@ -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;
}