Add federation scope to the user avatar

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

settings/css/settings.css

@@ -7,14 +7,14 @@ input#openid, input#webdav { width:20em; }
 
 /* PERSONAL */
 
-#avatar {
+#avatarform {
 	width: 160px;
 	padding-right: 0;
 }
-#avatar .avatardiv {
+#avatarform .avatardiv {
 	margin-bottom: 10px;
 }
-#avatar .warning {
+#avatarform .warning {
 	width: 100%;
 }
 #uploadavatarbutton,
@@ -26,7 +26,7 @@ input#openid, input#webdav { width:20em; }
 .jcrop-holder {
 	z-index: 500;
 }
-#avatar #cropper {
+#avatarform #cropper {
 	float: left;
 	z-index: 500;
 	/* float cropper above settings page to prevent unexpected flowing from dynamically sized element */
@@ -82,6 +82,7 @@ input#openid, input#webdav { width:20em; }
 	height: 20px;
 	min-width: 200px;
 }
+#avatarform > h2 span,
 #personal-settings-container > div h2 span[class^="icon-"] {
 	display: inline-block;
 	margin-left: 5px;
@@ -120,7 +121,7 @@ input#openid, input#webdav { width:20em; }
 	padding-right: 0;
 	min-width: 60%;
 }
-#avatar,
+#avatarform,
 #passwordform {
 	margin-bottom: 0;
 	padding-bottom: 0;

settings/js/federationsettingsview.js

@@ -30,19 +30,26 @@
 				'phone',
 				'email',
 				'website',
-				'address'
+				'address',
+				'avatar'
 			];
 
 			var self = this;
 			_.each(this._inputFields, function(field) {
+				var scopeOnly = field === 'avatar';
+
 				// Initialize config model
-				self._config.set(field, $('#' + field).val());
+				if (!scopeOnly) {
+					self._config.set(field, $('#' + field).val());
+				}
 				self._config.set(field + 'Scope', $('#' + field + 'scope').val());
 
 				// Set inputs whenever model values change
-				self.listenTo(self._config, 'change:' + field, function () {
-					self.$('#' + field).val(self._config.get(field));
-				});
+				if (!scopeOnly) {
+					self.listenTo(self._config, 'change:' + field, function () {
+						self.$('#' + field).val(self._config.get(field));
+					});
+				}
 				self.listenTo(self._config, 'change:' + field + 'Scope', function () {
 					self._onScopeChanged(field, self._config.get(field + 'Scope'));
 				});
@@ -54,8 +61,8 @@
 		render: function() {
 			var self = this;
 			_.each(this._inputFields, function(field) {
-				var $heading = self.$('#' + field + 'form > h2');
-				var $icon = self.$('#' + field + 'form > h2 > span');
+				var $heading = self.$('#' + field + 'form h2');
+				var $icon = self.$('#' + field + 'form h2 > span');
 				var scopeMenu = new OC.Settings.FederationScopeMenu();
 
 				self.listenTo(scopeMenu, 'select:scope', function(scope) {
@@ -65,8 +72,9 @@
 				$icon.on('click', _.bind(scopeMenu.show, scopeMenu));
 
 				// Fix absolute position according to the heading text length
-				// TODO: fix position without magic numbers
-				var pos = ($heading.width() - $heading.find('label').width()) - 68;
+				// TODO: find alternative to those magic number
+				var diff = field === 'avatar' ? 104 : 68;
+				var pos = ($heading.width() - $heading.find('label').width()) - diff;
 				scopeMenu.$el.css('right', pos);
 
 				self._onScopeChanged(field, self._config.get(field + 'Scope'));
@@ -76,6 +84,9 @@
 		_registerEvents: function() {
 			var self = this;
 			_.each(this._inputFields, function(field) {
+				if (field === 'avatar') {
+					return;
+				}
 				self.$('#' + field).keyUpDelayedOrEnter(_.bind(self._onInputChanged, self));
 			});
 		},

settings/js/personal.js

@@ -192,7 +192,7 @@ function avatarResponseHandler (data) {
 	if (typeof data === 'string') {
 		data = JSON.parse(data);
 	}
-	var $warning = $('#avatar .warning');
+	var $warning = $('#avatarform .warning');
 	$warning.hide();
 	if (data.status === "success") {
 		updateAvatar();
@@ -271,7 +271,7 @@ $(document).ready(function () {
 	});
 
 	var federationSettingsView = new OC.Settings.FederationSettingsView({
-		el: '#personal-settings-container'
+		el: '#personal-settings'
 	});
 	federationSettingsView.render();
 
@@ -412,7 +412,7 @@ $(document).ready(function () {
 
 	// Load the big avatar
 	if (oc_config.enable_avatars) {
-		$('#avatar .avatardiv').avatar(OC.currentUser, 145);
+		$('#avatarform .avatardiv').avatar(OC.currentUser, 145);
 	}
 
 	// Show token views

settings/templates/personal.php

@@ -32,10 +32,14 @@
 	</div>
 </div>
 
+<div id="personal-settings">
 <?php if ($_['enableAvatars']): ?>
 <div id="personal-settings-avatar-container">
-	<form id="avatar" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
-		<h2><?php p($l->t('Profile picture')); ?></h2>
+	<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-loading"/>
+		</h2>
 		<div id="displayavatar">
 			<div class="avatardiv"></div>
 			<div class="warning hidden"></div>
@@ -54,6 +58,7 @@
 			<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>
+		<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
 	</form>
 </div>
 <?php endif; ?>
@@ -187,6 +192,7 @@ if($_['displayNameChangeSupported']) {
 <?php
 }
 ?>
+</div>
 
 <div id="groups" class="section">
 	<h2><?php p($l->t('Groups')); ?></h2>