Details
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
index 999c6b4..adcfbd9 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
@@ -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);
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html
index 671b73b..fa61c55 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html
@@ -10,16 +10,37 @@
<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>
+-->
+ </fieldset>
</form>
<form name="realmForm" novalidate>
<fieldset>
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
index 55fa9dd..6f6782a 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
@@ -752,7 +752,6 @@ table.list {
}
-
/* Break Points */
@media (max-width: 1200px) {
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 8bc818d..69e20af 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
@@ -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;
+}
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 e23f0ca..6516187 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
@@ -987,6 +987,11 @@ input[type="email"] {
margin-top: 3em;
margin-bottom: 5em;
+ &.inside {
+ margin-top: 0;
+ margin-bottom: 1em;
+ }
+
.primary,
.destructive {
float: right;
@@ -1089,4 +1094,62 @@ input[type="email"] {
> li + li:before {
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;
+ }
}
\ No newline at end of file
