Merge pull request #1828 from nextcloud/avatar-picker-improvements

Avatar picker improvements

settings/css/settings.css

@@ -30,9 +30,37 @@ input#openid, input#webdav { width:20em; }
 }
 #avatar #cropper {
 	float: left;
-	background-color: #fff;
 	z-index: 500;
-	position: relative;
+	/* float cropper above settings page to prevent unexpected flowing from dynamically sized element */
+	position: fixed;
+	background-color: rgba(0, 0, 0, .2);
+	box-sizing: border-box;
+	top: 45px;
+	left: 0;
+	width: 100%;
+	height: calc(100% - 45px);
+}
+#avatar #cropper .inner-container {
+	z-index: 2001; /* above the top bar if needed */
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: #fff;
+	color: #333;
+	border-radius: 3px;
+	box-shadow: 0 0 7px #888;
+	padding: 15px;
+}
+
+#avatar #cropper .inner-container .jcrop-holder {
+	box-shadow: 0 0 7px #888;
+}
+#avatar #cropper .inner-container .button {
+	margin-top: 15px;
+}
+#avatar #cropper .inner-container .primary {
+	float: right;
 }
 
 #displaynameform,

settings/js/personal.js

@@ -112,7 +112,10 @@ function updateAvatar (hidedefault) {
 		$('#header .avatardiv').addClass('avatardiv-shown');
 	}
 	$displaydiv.css({'background-color': ''});
-	$displaydiv.avatar(OC.currentUser, 145, true);
+	$displaydiv.avatar(OC.currentUser, 145, true, null, function() {
+		$displaydiv.removeClass('loading');
+		$('#displayavatar img').show();
+	});
 	$.get(OC.generateUrl(
 		'/avatar/{user}/{size}',
 		{
@@ -129,24 +132,27 @@ function updateAvatar (hidedefault) {
 
 function showAvatarCropper () {
 	var $cropper = $('#cropper');
-	$cropper.prepend("<img>");
-	var $cropperImage = $('#cropper img');
+	var $cropperImage = $('<img/>');
+	$cropperImage.css('opacity', 0); // prevent showing the unresized image
+	$cropper.children('.inner-container').prepend($cropperImage);
 
 	$cropperImage.attr('src',
 		OC.generateUrl('/avatar/tmp') + '?requesttoken=' + encodeURIComponent(oc_requesttoken) + '#' + Math.floor(Math.random() * 1000));
 
-	// Looks weird, but on('load', ...) doesn't work in IE8
-	$cropperImage.ready(function () {
-		$('#displayavatar').hide();
-		$cropper.show();
-
+	$cropperImage.load(function () {
+		var img = $cropperImage.get()[0];
+		var selectSize = Math.min(img.width, img.height);
+		var offsetX = (img.width - selectSize) / 2;
+		var offsetY = (img.height - selectSize) / 2;
 		$cropperImage.Jcrop({
 			onChange: saveCoords,
 			onSelect: saveCoords,
 			aspectRatio: 1,
-			boxHeight: 500,
-			boxWidth: 500,
-			setSelect: [0, 0, 300, 300]
+			boxHeight: Math.min(500, $('#app-content').height() -100),
+			boxWidth: Math.min(500, $('#app-content').width()),
+			setSelect: [offsetX, offsetY, selectSize, selectSize]
+		}, function() {
+			$cropper.show();
 		});
 	});
 }
@@ -293,6 +299,8 @@ $(document).ready(function () {
 			avatarResponseHandler(response);
 		},
 		submit: function(e, data) {
+			$('#displayavatar img').hide();
+			$('#displayavatar .avatardiv').addClass('loading');
 			data.formData = _.extend(data.formData || {}, {
 				requesttoken: OC.requestToken
 			});
@@ -319,6 +327,8 @@ $(document).ready(function () {
 		OC.dialogs.filepicker(
 			t('settings', "Select a profile picture"),
 			function (path) {
+				$('#displayavatar img').hide();
+				$('#displayavatar .avatardiv').addClass('loading');
 				$.ajax({
 					type: "POST",
 					url: OC.generateUrl('/avatar/'),
@@ -356,6 +366,8 @@ $(document).ready(function () {
 	});
 
 	$('#abortcropperbutton').click(function () {
+		$('#displayavatar .avatardiv').removeClass('loading');
+		$('#displayavatar img').show();
 		cleanCropper();
 	});
 

settings/templates/personal.php

@@ -50,8 +50,10 @@
 	</div>
 
 	<div id="cropper" class="hidden">
-		<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
-		<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
+		<div class="inner-container">
+			<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
+			<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
+		</div>
 	</div>
 </form>
 <?php endif; ?>