Merge pull request #6761 from nextcloud/fix-avatar-loading-state

Fix popover position and avatar loading

3 files changed, 51 insertions, 36 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 221dad33ac3..b6432c5a96e 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -35,12 +35,13 @@ input {
 }
 
 #avatarform {
-	> h2 {
-		position: relative;
-	}
 	.avatardiv {
 		margin: 10px auto;
 	}
+	.federationScopeMenu {
+		/* popover magic fix */
+		margin-right: calc(-50% - 7px);
+	}
 	.warning {
 		width: 100%;
 	}
@@ -117,11 +118,11 @@ input {
 }
 
 .icon-federation-menu {
-	float: right;
 	padding-left: 16px;
 	background-size: 16px;
 	background-position: left 8px;
 	opacity: .3;
+	margin-left: 10px;
 	cursor: pointer;
 
 	.icon-triangle-s {
@@ -163,12 +164,23 @@ input {
 	&:after {
 		clear: both;
 	}
-	> div {
+	&:not(#personal-settings-avatar-container) > div {
 		float: left;
 		width: 300px;
+	}
+	> div {
 		h2 {
 			position: relative;
 			margin-bottom: 5px;
+			display: inline-flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			width: 100%;
+			> label {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
 		}
 		> form span {
 			&[class^="icon-checkmark"], &[class^="icon-error"] {
diff --git a/settings/js/settings/personalInfo.js b/settings/js/settings/personalInfo.js
index 1c634bb2887..3a4542df748 100644
--- a/settings/js/settings/personalInfo.js
+++ b/settings/js/settings/personalInfo.js
@@ -128,6 +128,7 @@ function avatarResponseHandler (data) {
 	var $warning = $('#avatarform .warning');
 	$warning.hide();
 	if (data.status === "success") {
+		$('#displayavatar .avatardiv').removeClass('icon-loading');
 		updateAvatar();
 	} else if (data.data === "notsquare") {
 		showAvatarCropper();
@@ -302,7 +303,7 @@ $(document).ready(function () {
 		},
 		submit: function(e, data) {
 			$('#displayavatar img').hide();
-			$('#displayavatar .avatardiv').addClass('loading');
+			$('#displayavatar .avatardiv').addClass('icon-loading');
 			data.formData = _.extend(data.formData || {}, {
 				requesttoken: OC.requestToken
 			});
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index c0326e97491..854b413171c 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -66,38 +66,40 @@ vendor_style('jcrop/css/jquery.Jcrop');
 </div>
 
 <div id="personal-settings">
-	<div id="personal-settings-avatar-container">
-		<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
-			<h2>
-				<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
-					<span class="icon-triangle-s"></span>
-				</span>
-			</h2>
-			<div id="displayavatar">
-				<div class="avatardiv"></div>
-				<div class="warning hidden"></div>
-				<?php if ($_['avatarChangeSupported']): ?>
-					<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
-					<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
-					<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
-					<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
-					<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
-				<?php else: ?>
-					<?php p($l->t('Picture provided by original account')); ?>
-				<?php endif; ?>
-			</div>
+	<div id="personal-settings-avatar-container" class="personal-settings-container">
+		<div>
+			<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
+				<h2>
+					<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
+						<span class="icon-triangle-s"></span>
+					</span>
+				</h2>
+				<div id="displayavatar">
+					<div class="avatardiv"></div>
+					<div class="warning hidden"></div>
+					<?php if ($_['avatarChangeSupported']): ?>
+						<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
+						<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
+						<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
+						<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
+						<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
+					<?php else: ?>
+						<?php p($l->t('Picture provided by original account')); ?>
+					<?php endif; ?>
+				</div>
 
-			<div id="cropper" class="hidden">
-				<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 id="cropper" class="hidden">
+					<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>
-			</div>
-			<span class="icon-checkmark hidden"></span>
-			<?php if($_['lookupServerUploadEnabled']) { ?>
-			<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
-			<?php } ?>
-		</form>
+				<span class="icon-checkmark hidden"></span>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
+				<?php } ?>
+			</form>
+		</div>
 	</div>
 
 	<div class="personal-settings-container">