Merge pull request #105 from theurere/improve-upload-picture-ui

Update buddypictureupload ui

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,14 @@
     }
     .chooseUploadPicture {
       color: $componentfg4;
+      position: absolute;
+      z-index: 1;
+      left: 50px;
+    }
+    .fa {
+      color: $componentbg;
+      text-shadow: 0 0 5px black;
+      opacity: 0.8;
     }
   }
   .preview {
@@ -55,9 +70,6 @@
     z-index: 1;
     .fa {
       cursor: pointer;
-      color: $componentbg;
-      text-shadow: 0 0 5px black;
-      opacity: 0.8;
       font-size: 40px;
       width: 50px;
       height: 50px;

static/js/directives/buddypictureupload.js

@@ -42,10 +42,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 			};
 
 			var completedUpload = function() {
-				$scope.upload.status = 99;
-				$timeout(function() {
-					$scope.upload.status = 100;
-				}, 500);
+				$scope.upload.status = 100;
 			};
 
 			var setUploadImageDimension = function(data) {
@@ -202,32 +199,43 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html', 'bootst
 			var intervalNum = {
 				num: null
 			};
+			var pxDefaultMovementSpeed = 5;
 
-			var incrementPx = function(num) {
-				return ((Number(num.match(/[\-0-9]+/)) + 5) + 'px');
+			var incrementPx = function(num, pxToMove) {
+				if(pxToMove === undefined) {
+					pxToMove = pxDefaultMovementSpeed;
+				}
+				return ((Number(num.match(/[\-0-9]+/)) + pxToMove) + 'px');
 			};
-			var decrementPx = function(num) {
-				return ((Number(num.match(/[\-0-9]+/)) - 5) + 'px');
+			var decrementPx = function(num, pxToMove) {
+				if(pxToMove === undefined) {
+					pxToMove = pxDefaultMovementSpeed;
+				}
+				return ((Number(num.match(/[\-0-9]+/)) - pxToMove) + 'px');
 			};
-			var moveImageUp = function() {
-				$scope.prevImage.style.top = decrementPx($scope.prevImage.style.top);
+			var moveImageUp = function(pxMove) {
+				$scope.prevImage.style.top = decrementPx($scope.prevImage.style.top, pxMove);
 			};
-			var moveImageDown = function() {
-				$scope.prevImage.style.top = incrementPx($scope.prevImage.style.top);
+			var moveImageDown = function(pxMove) {
+				$scope.prevImage.style.top = incrementPx($scope.prevImage.style.top, pxMove);
 			};
-			var moveImageLeft = function() {
-				$scope.prevImage.style.left = decrementPx($scope.prevImage.style.left);
+			var moveImageLeft = function(pxMove) {
+				$scope.prevImage.style.left = decrementPx($scope.prevImage.style.left, pxMove);
 			};
-			var moveImageRight = function() {
-				$scope.prevImage.style.left = incrementPx($scope.prevImage.style.left);
+			var moveImageRight = function(pxMove) {
+				$scope.prevImage.style.left = incrementPx($scope.prevImage.style.left, pxMove);
 			};
 			var makeImageLarger = function() {
 				$scope.prevImage.style.height = incrementPx($scope.prevImage.style.height);
+				moveImageLeft(1);
 				$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width);
+				moveImageUp(2);
 			};
 			var makeImageSmaller = function() {
 				$scope.prevImage.style.height = decrementPx($scope.prevImage.style.height);
+				moveImageRight(1);
 				$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
+				moveImageDown(2);
 			};
 			var changeImage = function(evt) {
 				if (evt.data.intervalNum.num || !evt.data.action) {
@@ -255,7 +263,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>