Merge pull request #140 from cardosogabriel/master

Design for KEYCLOAK-238

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) {

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

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

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

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">
+                        <div class="form-actions inside">
-                            <button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload
+                            <button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload</button>
-                            </button>
                         </div>
-                     </fieldset>
+                        
+                        
+                        <!-- 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>
                     <fieldset>