Design for KEYCLOAK-238
This commit is contained in:
Gabriel Cardoso
parent
6fe9a03997
commit
d1693c9c7e
5 changed files with 143 additions and 7 deletions
|
|
@ -752,7 +752,6 @@ table.list {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* Break Points */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ textarea {
|
|||
padding: 0 0.545454545454545em;
|
||||
height: 2.36363636363636em;
|
||||
/* 26px */
|
||||
|
||||
border: 1px #b6b6b6 solid;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -853,6 +854,10 @@ input[type="email"].tiny {
|
|||
margin-top: 3em;
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
.form-actions.inside {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.form-actions .primary,
|
||||
.form-actions .destructive {
|
||||
float: right;
|
||||
|
|
@ -928,3 +933,51 @@ input[type="email"].tiny {
|
|||
.breadcrumb > li + li:before {
|
||||
content: "» ";
|
||||
}
|
||||
/* Input file button */
|
||||
.button-input-file {
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.button-input-file .transparent {
|
||||
position: absolute;
|
||||
width: 30em;
|
||||
height: 30em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-input-file:hover .button {
|
||||
background-image: none;
|
||||
}
|
||||
.uploaded-file {
|
||||
font-weight: bold;
|
||||
margin-right: 0.90909090909091em;
|
||||
padding-top: 0.454545em;
|
||||
float: left;
|
||||
}
|
||||
.link-input-file {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
.link-input-file:hover .link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-input-file .link {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.link-input-file .transparent {
|
||||
position: absolute;
|
||||
width: 30em;
|
||||
height: 30em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-input-file .link:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -987,6 +987,11 @@ input[type="email"] {
|
|||
margin-top: 3em;
|
||||
margin-bottom: 5em;
|
||||
|
||||
&.inside {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.primary,
|
||||
.destructive {
|
||||
float: right;
|
||||
|
|
@ -1090,3 +1095,61 @@ input[type="email"] {
|
|||
content: "» ";
|
||||
}
|
||||
}
|
||||
|
||||
/* Input file button */
|
||||
|
||||
.button-input-file {
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.transparent {
|
||||
position: absolute;
|
||||
width: 30em;
|
||||
height: 30em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover .button {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.uploaded-file {
|
||||
font-weight: bold;
|
||||
margin-right: 0.90909090909091em;
|
||||
padding-top: 0.454545em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.link-input-file {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 0.1em;
|
||||
|
||||
&:hover .link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
position: absolute;
|
||||
width: 30em;
|
||||
height: 30em;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,7 +99,7 @@ module.controller('RealmCreateCtrl', function($scope, Current, Realm, $upload, $
|
|||
$location.url("/realms");
|
||||
})
|
||||
.error(function() {
|
||||
Notifications.error("Error uploading.");
|
||||
Notifications.error("The realm can not be uploaded. Please verify the file.");
|
||||
|
||||
});
|
||||
//.then(success, error, progress);
|
||||
|
|
|
|||
|
|
@ -10,15 +10,36 @@
|
|||
<legend uncollapsed><span class="text">Import Realm</span></legend>
|
||||
<div class="form-group">
|
||||
<label for="name">Choose JSON File: </label>
|
||||
|
||||
<div class="controls">
|
||||
<input type="file" ng-file-select="onFileSelect($files)" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload
|
||||
</button>
|
||||
<div class="form-actions inside">
|
||||
<button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- THIS APPEARS INITIALLY
|
||||
|
||||
<div class="form-group clearfix">
|
||||
<label for="upload">Upload JSON File</label>
|
||||
<div class="controls button-input-file">
|
||||
<a class="button" href="#"><span class="icon-upload">Icon: Upload</span>Choose a JSON File...</a>
|
||||
<input type="file" ng-file-select="onFileSelect($files)" class="transparent" id="upload">
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- THE DIV ABOVE IS REPLACED BY THIS AFTER CHOOSING A FILE
|
||||
|
||||
<div class="form-group clearfix">
|
||||
<label for="upload">Upload JSON File </label>
|
||||
<span class="uploaded-file">a-new-realm-uploaded.json</span>
|
||||
<div class="link-input-file">
|
||||
<button class="link">Change</button>
|
||||
<input type="file" ng-file-select="onFileSelect($files)" class="transparent" id="upload">
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</fieldset>
|
||||
</form>
|
||||
<form name="realmForm" novalidate>
|
||||
|
|
|
|||
Loading…
Reference in a new issue