Change pictureupload loader to spinner. Update text. Make picture area with utility buttons unselectable.

src/styles/components/_buddypictureupload.scss

@@ -21,7 +21,13 @@
 
 .buddyPictureUpload {
    position: relative;
-  .previewUpload {
+  .loader {
+    position: absolute;
+    z-index: 1;
+    left: 90px;
+    .fa-spin {
+      color: $componentfg4;
+    }
   }
   .showUploadPicture {
     border: 1px solid #EEEEEE;
@@ -32,6 +38,7 @@
     text-align: center;
     width: 200px;
     background-color: $componentbg;
+    user-select: none;
     &.imgData {
       background-color: black;
       .chooseUploadPicture {
@@ -40,6 +47,9 @@
     }
     .chooseUploadPicture {
       color: $componentfg4;
+      position: absolute;
+      z-index: 1;
+      left: 50px;
     }
   }
   .preview {

static/js/directives/buddypictureupload.js

@@ -255,7 +255,10 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 			$element.find("#larger").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
 			$element.find("#smaller").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
 
-			$('#uploadFile').bootstrapFileInput();
+			// Give translation time to transform title text of [input=file] instances before bootstrap.file-input parses dom.
+			setTimeout(function() {
+				$('#uploadFile').bootstrapFileInput();
+			}, 0);
 		};
 
 		return {

static/partials/buddypictureupload.html

@@ -1,6 +1,9 @@
 <div class="buddyPictureUpload collapse" collapse="!showUploadPicture">
 	<div class="showUploadPicture" ng-class="{imgData: imgData}">
 		<p class="chooseUploadPicture">{{_('Choose a picture')}}</p>
+		<span class="loader" ng-if="upload.status != 100 && upload.status != 0">
+			<i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
+		</span>
 		<div class="imageUtilites">
 			<div class="moveHorizontal">
 				<i id="arrow-left" class="fa fa-long-arrow-left"></i>
@@ -20,14 +23,9 @@
 	<div class="alert alert-warning" ng-if="error.read">{{_('The file couldn\'t be read.')}}<button type="button" class="close" ng-click="error.read = null"><span>&times;</span></button></div>
 	<div class="alert alert-warning" ng-if="error.image">{{_('The file is not an image.')}}<button type="button" class="close" ng-click="error.image = null"><span>&times;</span></button></div>
 	<div class="alert alert-warning" ng-if="error.size">{{_('The file is too large. Max upload size is %d Mb', maxUploadMb)}}<button type="button" class="close" ng-click="error.size = null"><span>&times;</span></button></div>
-	<p ng-if="!imgData">{{_('Please choose a picture to upload, max %d Mb', maxUploadMb)}}</p>
-	<p ng-if="imgData">{{_('Upload a different picture')}}</p>
-	<div><input id="uploadFile" type="file" data-filename-placement="outside"></div>
-	<div ng-if="upload.status != 100 && upload.status != 0">
-		<br>
-		<progressbar class="progress-striped active" value="upload.status"><i>{{upload.status | number:0}}%</i></progressbar>
-	</div>
+	<p>{{_('Please choose a picture to upload.')}}</p>
+	<div><input id="uploadFile" class="btn btn-success" type="file" title="{{_('Browse for picture')}}" data-filename-placement="outside"></div>
 	<br>
 	<a class="btn btn-small btn-default" ng-click="reset()"> {{_('Cancel')}}</a>
-	<a class="btn btn-small btn-primary" ng-click="usePicture()"> {{_('Set as Profile Picture')}}</a>
+	<a class="btn btn-small btn-primary" ng-click="usePicture()" ng-disabled="!imgData"> {{_('Set as Profile Picture')}}</a>
 </div>