Merge pull request #140 from cardosogabriel/master

Design for KEYCLOAK-238
This commit is contained in:
Bill Burke 2013-12-17 15:17:19 -08:00
commit dd84679e3f
5 changed files with 143 additions and 7 deletions

View file

@ -752,7 +752,6 @@ table.list {
}
/* Break Points */
@media (max-width: 1200px) {

View file

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

View file

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

View file

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

View file

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