realm refactoring finished

This commit is contained in:
Viliam Rockai 2014-02-10 13:27:03 +01:00 committed by Stian Thorgersen
parent 56e572a9a6
commit 586e295ec4
15 changed files with 141 additions and 89 deletions

View file

@ -1,3 +1,11 @@
body {
background-color: #F9F9F9;
}
#content {
background-color: #FFFFFF;
}
html, body, body > .container, #view, #content-area{ html, body, body > .container, #view, #content-area{
height: 100%; height: 100%;
} }
@ -299,9 +307,9 @@ legend .kc-icon-collapse {
/* Relam selector from the top menu */ /* Realm selector from the top menu */
.header .navbar-primary li > .select-rcue { .header .navbar-primary li > .select-kc {
background-color: #555A5E; background-color: #555A5E;
background-image: url("../img/sprite-arrow-down.svg"); background-image: url("../img/sprite-arrow-down.svg");
background-position: right -26px; background-position: right -26px;
@ -315,17 +323,17 @@ legend .kc-icon-collapse {
padding-left: 0; padding-left: 0;
vertical-align: middle; vertical-align: middle;
} }
.header .navbar-primary li .select-rcue:hover { .header .navbar-primary li .select-kc:hover {
border-color: #7E8385; border-color: #7E8385;
} }
.header .navbar-primary li .select-rcue select { .header .navbar-primary li .select-kc select {
color: #FFFFFF; color: #FFFFFF;
} }
.header .navbar-primary li .select-rcue select:-moz-focusring { .header .navbar-primary li .select-kc select:-moz-focusring {
color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #FFFFFF; text-shadow: 0 0 0 #FFFFFF;
} }
.header .navbar-primary li .select-rcue select option { .header .navbar-primary li .select-kc select option {
background-color: #FFFFFF; background-color: #FFFFFF;
color: #333333; color: #333333;
} }
@ -351,7 +359,7 @@ legend .kc-icon-collapse {
/* and from forms */ /* and from forms */
.select-rcue { .select-kc {
background: url("../img/select-arrow.png") no-repeat scroll right center #FFFFFF; background: url("../img/select-arrow.png") no-repeat scroll right center #FFFFFF;
border: 1px solid #B6B6B6; border: 1px solid #B6B6B6;
border-radius: 2px; border-radius: 2px;
@ -364,22 +372,22 @@ legend .kc-icon-collapse {
overflow: hidden; overflow: hidden;
padding: 0 0.9em 0 0; padding: 0 0.9em 0 0;
} }
.select-rcue:hover { .select-kc:hover {
border-color: #62AFDB; border-color: #62AFDB;
} }
.select-rcue:focus { .select-kc:focus {
border-color: #62AFDB; border-color: #62AFDB;
box-shadow: 0 0 5px #62AFDB; box-shadow: 0 0 5px #62AFDB;
} }
.select-rcue.error { .select-kc.error {
background-color: #F8E7E7; background-color: #F8E7E7;
border-color: #BA1212; border-color: #BA1212;
transition: all 0.33s ease-in-out 0s; transition: all 0.33s ease-in-out 0s;
} }
.select-rcue.error:focus { .select-kc.error:focus {
box-shadow: 0 0 5px #BA1212; box-shadow: 0 0 5px #BA1212;
} }
.select-rcue select { .select-kc select {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border: medium none; border: medium none;
font-family: "Open Sans",sans-serif; font-family: "Open Sans",sans-serif;
@ -391,11 +399,11 @@ legend .kc-icon-collapse {
padding: 5px 0.545455em; padding: 5px 0.545455em;
width: 150%; width: 150%;
} }
.select-rcue option { .select-kc option {
line-height: 2em; line-height: 2em;
padding: 0.363636em 0.909091em; padding: 0.363636em 0.909091em;
} }
.select-rcue option:hover { .select-kc option:hover {
background-color: #D5ECF9; background-color: #D5ECF9;
} }
@ -455,3 +463,53 @@ legend .kc-icon-collapse {
.changing-selectors .middle-buttons button span { .changing-selectors .middle-buttons button span {
margin-right: 0; margin-right: 0;
} }
/* Input file button */
.kc-button-input-file {
float: left;
overflow: hidden;
position: relative;
}
.kc-button-input-file .transparent {
bottom: 0;
cursor: pointer;
height: 30em;
opacity: 0;
position: absolute;
right: 0;
width: 30em;
}
.kc-button-input-file:hover .button {
background-image: none;
}
.kc-uploaded-file {
float: left;
font-weight: bold;
margin-right: 0.909091em;
padding-top: 0.454545em;
}
.kc-link-input-file {
display: inline-block;
margin-top: 0.1em;
overflow: hidden;
position: relative;
}
.kc-link-input-file:hover .link {
text-decoration: underline;
}
.kc-link-input-file .link {
font-size: 1.1em;
}
.kc-link-input-file .transparent {
bottom: 0;
cursor: pointer;
height: 30em;
opacity: 0;
position: absolute;
right: 0;
width: 30em;
}
.kc-link-input-file .link:hover {
cursor: pointer;
}

View file

@ -781,7 +781,7 @@ module.directive('kcNavigation', function ($compile, Notifications) {
scope: { scope: {
kcCurrent: '@', kcCurrent: '@',
kcRealm: '=', kcRealm: '=',
kcSocial: '@' kcSocial: '='
}, },
restrict: 'E', restrict: 'E',
replace: true, replace: true,

View file

@ -107,7 +107,7 @@
<div class="form-group input-select"> <div class="form-group input-select">
<label for="applications">Application</label> <label for="applications">Application</label>
<div class="input-group"> <div class="input-group">
<div class="select-rcue"> <div class="select-kc">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications"> <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
<option value="" selected> Select an Application...</option> <option value="" selected> Select an Application...</option>
</select> </select>

View file

@ -55,7 +55,7 @@
<div class="form-group input-select"> <div class="form-group input-select">
<label for="applications">Application</label> <label for="applications">Application</label>
<div class="input-group"> <div class="input-group">
<div class="select-rcue"> <div class="select-kc">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications|remove:application:'id')"> <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications|remove:application:'id')">
<option value="" selected> Select an Application </option> <option value="" selected> Select an Application </option>
</select> </select>

View file

@ -53,7 +53,7 @@
<div class="form-group input-select"> <div class="form-group input-select">
<label for="applications">Application</label> <label for="applications">Application</label>
<div class="input-group"> <div class="input-group">
<div class="select-rcue"> <div class="select-kc">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications)"> <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications)">
<option value="" selected> Select an Application </option> <option value="" selected> Select an Application </option>
</select> </select>

View file

@ -1,55 +1,52 @@
<div id="wrapper" class="container"> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div class="row"> <div id="content-area" class="col-sm-9" role="main">
<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div> <div id="content">
<div id="content-area" class="col-md-9" role="main"> <h2>Add Realm</h2>
<div id="content"> <p class="subtitle"><span class="required">*</span> Required fields</p>
<h2 class="pull-left">Add Realm</h2>
<p class="subtitle"><span class="required">*</span> Required fields</p>
<form name="uploadForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Import Realm</span></legend>
<div class="form-group clearfix">
<label for="name">Upload JSON File </label>
<div class="controls button-input-file" data-ng-show="!files || files.length == 0">
<a href="#" class="button"><span class="icon-upload">Icon: Upload</span>Choose a JSON File...</a>
<input id="import-file" type="file" class="transparent" ng-file-select="onFileSelect($files)">
</div>
<span class="uploaded-file" data-ng-show="files.length > 0">{{files[0].name}}</span>
<button class="link" data-ng-show="files.length > 0" data-ng-click="changeFileSelect();">Change</button>
</div>
<div class="form-actions inside"> <form class="form-horizontal" name="realmForm" novalidate>
<button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload</button> <fieldset>
<legend uncollapsed><span class="text">Import Realm</span></legend>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Upload JSON File </label>
<div class="col-sm-4">
<div class="controls kc-button-input-file" data-ng-show="!files || files.length == 0">
<a href="#" class="kc-button"><span class="kc-icon-upload">Icon: Upload</span>Choose a JSON File...</a>
<input id="import-file" type="file" class="transparent" ng-file-select="onFileSelect($files)">
</div> </div>
</fieldset> <span class="kc-uploaded-file" data-ng-show="files.length > 0">{{files[0].name}}</span>
</form> <button class="kc-link" data-ng-show="files.length > 0" data-ng-click="changeFileSelect();">Change</button>
<form name="realmForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Create Realm</span></legend>
<div class="form-group">
<label for="name">Name <span class="required">*</span></label>
<div class="controls">
<input type="text" id="name" name="name" data-ng-model="realm.realm" autofocus
required>
</div>
</div>
<div class="form-group">
<label for="enabled" class="control-label">Enabled</label>
<input ng-model="realm.enabled" name="enabled" id="enabled" onoffswitch />
</div>
</fieldset>
<div class="form-actions">
<button type="submit" kc-save class="primary" data-ng-show="changed">Save
</button>
<button type="submit" data-ng-click="cancel()">Cancel
</button>
</div> </div>
</div>
<div class="form-actions inside">
<button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload</button>
</div>
</fieldset>
</form>
</form> <form class="form-horizontal" name="realmForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Create Realm</span></legend>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name <span class="required">*</span></label>
<div class="col-sm-4">
<input type="text" id="name" name="name" data-ng-model="realm.realm" autofocusrequired>
</div>
</div>
<div class="form-group">
<label for="enabled" class="col-sm-2 control-label">Enabled</label>
<div class="col-sm-4">
<input ng-model="realm.enabled" name="enabled" id="enabled" onoffswitch />
</div>
</div>
</fieldset>
<div class="pull-right form-actions">
<button kc-cancel data-ng-click="cancel()">Cancel</button>
<button kc-save data-ng-show="changed">Save</button>
</div> </div>
</div>
<div id="container-right-bg"></div> </form>
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="credentials" data-kc-realm="realm.realm"></data-kc-navigation> <data-kc-navigation data-kc-current="credentials" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
@ -43,7 +43,7 @@
<tr ng-show="(allPolicies|remove:policy:'name').length > 0"> <tr ng-show="(allPolicies|remove:policy:'name').length > 0">
<th colspan="5" class="rcue-table-actions"> <th colspan="5" class="rcue-table-actions">
<div class="actions"> <div class="actions">
<div class="select-rcue"> <div class="select-kc">
<select ng-model="selectedPolicy" <select ng-model="selectedPolicy"
ng-options="(p.name|capitalize) for p in (allPolicies|remove:policy:'name')" ng-options="(p.name|capitalize) for p in (allPolicies|remove:policy:'name')"
data-ng-change="addPolicy(selectedPolicy); selectedPolicy = null"> data-ng-change="addPolicy(selectedPolicy); selectedPolicy = null">

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="defRoles" data-kc-realm="realm.realm"></data-kc-navigation> <data-kc-navigation data-kc-current="defRoles" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li> <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
@ -46,7 +46,7 @@
<div class="form-group input-select"> <div class="form-group input-select">
<label for="applications">Application</label> <label for="applications">Application</label>
<div class="input-group"> <div class="input-group">
<div class="select-rcue"> <div class="select-kc">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications"> <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
<option value="" selected> Select an Application...</option> <option value="" selected> Select an Application...</option>
</select> </select>

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="keys" data-kc-realm="realm.realm"></data-kc-navigation> <data-kc-navigation data-kc-current="keys" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li> <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="email" data-kc-realm="realm.realm"></data-kc-navigation> <data-kc-navigation data-kc-current="email" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li> <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="social" data-kc-realm="realm.realm" data-kc-social="social"></data-kc-navigation> <data-kc-navigation data-kc-current="social" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li> <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
@ -16,13 +16,13 @@
<form name="realmForm" novalidate> <form name="realmForm" novalidate>
<fieldset> <fieldset>
<div> <div>
<table> <table class="table">
<caption class="hidden">Table of social providers</caption> <caption class="hidden">Table of social providers</caption>
<thead> <thead>
<tr> <tr>
<th colspan="5" class="rcue-table-actions"> <th colspan="5" class="rcue-table-actions">
<div class="actions"> <div class="actions">
<div class="select-rcue"> <div class="select-kc">
<select ng-model="newProviderId" <select ng-model="newProviderId"
ng-options="(p|capitalize) for p in (allProviders|remove:configuredProviders)" ng-options="(p|capitalize) for p in (allProviders|remove:configuredProviders)"
data-ng-change="addProvider(newProviderId); newProviderId = null"> data-ng-change="addProvider(newProviderId); newProviderId = null">
@ -63,12 +63,9 @@
</div> </div>
</fieldset> </fieldset>
<div class="form-actions"> <div class="pull-right form-actions">
<button type="submit" kc-save class="primary" data-ng-show="changed">Save <button type="submit" kc-reset data-ng-show="changed">Clear changes</button>
changes <button type="submit" kc-save class="primary" data-ng-show="changed">Save changes</button>
</button>
<button type="submit" kc-reset data-ng-show="changed">Clear changes
</button>
</div> </div>
</form> </form>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="token" data-kc-realm="realm.realm"></data-kc-navigation> <data-kc-navigation data-kc-current="token" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li> <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
@ -19,7 +19,7 @@
max="31536000" data-ng-model="realm.tokenLifespan" max="31536000" data-ng-model="realm.tokenLifespan"
id="tokenLifespan" name="tokenLifespan"/> id="tokenLifespan" name="tokenLifespan"/>
</div> </div>
<div class="col-sm-2 select-rcue"> <div class="col-sm-2 select-kc">
<select name="tokenLifespanUnit" data-ng-model="realm.tokenLifespanUnit" > <select name="tokenLifespanUnit" data-ng-model="realm.tokenLifespanUnit" >
<option data-ng-selected="!realm.tokenLifespanUnit">Seconds</option> <option data-ng-selected="!realm.tokenLifespanUnit">Seconds</option>
<option>Minutes</option> <option>Minutes</option>
@ -37,7 +37,7 @@
<div class="col-sm-2"> <div class="col-sm-2">
<input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespan" id="accessCodeLifespan" name="accessCodeLifespan"> <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespan" id="accessCodeLifespan" name="accessCodeLifespan">
</div> </div>
<div class="col-sm-2 select-rcue"> <div class="col-sm-2 select-kc">
<select name="accessCodeLifespanUnit" data-ng-model="realm.accessCodeLifespanUnit"> <select name="accessCodeLifespanUnit" data-ng-model="realm.accessCodeLifespanUnit">
<option data-ng-selected="!realm.accessCodeLifespanUnit">Seconds</option> <option data-ng-selected="!realm.accessCodeLifespanUnit">Seconds</option>
<option>Minutes</option> <option>Minutes</option>
@ -55,7 +55,7 @@
<div class="col-sm-2"> <div class="col-sm-2">
<input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespanUserAction" id="accessCodeLifespanUserAction" name="accessCodeLifespanUserAction"> <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespanUserAction" id="accessCodeLifespanUserAction" name="accessCodeLifespanUserAction">
</div> </div>
<div class="col-sm-2 select-rcue"> <div class="col-sm-2 select-kc">
<select name="accessCodeLifespanUserActionUnit" data-ng-model="realm.accessCodeLifespanUserActionUnit"> <select name="accessCodeLifespanUserActionUnit" data-ng-model="realm.accessCodeLifespanUserActionUnit">
<option data-ng-selected="!realm.accessCodeLifespanUserActionUnit">Seconds</option> <option data-ng-selected="!realm.accessCodeLifespanUserActionUnit">Seconds</option>
<option>Minutes</option> <option>Minutes</option>

View file

@ -103,7 +103,7 @@
<div class="form-group input-select"> <div class="form-group input-select">
<label for="applications">Application</label> <label for="applications">Application</label>
<div class="input-group"> <div class="input-group">
<div class="select-rcue"> <div class="select-kc">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications"> <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
<option value="" selected> Select an Application...</option> <option value="" selected> Select an Application...</option>
</select> </select>

View file

@ -1,6 +1,6 @@
<div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div> <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-sm-9" role="main"> <div id="content-area" class="col-sm-9" role="main">
<data-kc-navigation data-kc-current="roles" data-kc-realm="realm.realm"></data-kc-navigation> <data-kc-navigation data-kc-current="roles" data-kc-realm="realm.realm" data-kc-social="realm.social"></data-kc-navigation>
<div id="content"> <div id="content">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li> <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>

View file

@ -52,7 +52,7 @@
<div class="form-group input-select"> <div class="form-group input-select">
<label for="applications">Application</label> <label for="applications">Application</label>
<div class="input-group"> <div class="input-group">
<div class="select-rcue"> <div class="select-kc">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications"> <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
<option value="" selected> Select an Application...</option> <option value="" selected> Select an Application...</option>
</select> </select>