#126 Restyle user avatar's file input

TheHive-Project · Feb 21, 2017 · bd112e5 · bd112e5
1 parent 8ada5b4
commit bd112e5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/ui/app/styles/directives/user.css b/ui/app/styles/directives/user.css
@@ -46,3 +46,12 @@
 .avatar.avatar-m .avatar-name {
     margin-left:45px;
 }
+
+.avatar-input {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
diff --git a/ui/app/views/partials/personal-settings.html b/ui/app/views/partials/personal-settings.html
@@ -36,13 +36,15 @@ <h4>Update basic information</h4>
                             <div ng-show="!basicData.avatar">
                                 <div style="width: 100px;">
                                     <img alt="User avatar" src="images/no-avatar.png"/>
-                                    <input type="file" class="mt-xxs form-control" ng-model="avatar" name="avatar"
+                                    <input type="file" class="mt-xxs avatar-input" ng-model="avatar" id="avatar-input" name="avatar"
                                         accept="image/jpg|image/png|image/jpeg"
                                         maxsize="500"
                                         base-sixty-four-input
                                         do-not-parse-if-oversize>
+                                    <label for="avatar-input" class="mt-xxs btn btn-block btn-sm btn-primary">Choose File</label>
                                 </div>
                                 <div class="help-block">Images must not exceed 500 KB. Recommended dimension are 100x100px</div>
+
                             </div>
 
                             <div ng-show="basicData.avatar" style="width: 100px;">