Merge pull request #13866 from rullzer/avatar_share_dialog

Avatars in share dialog

Author: Vincent Petry

core/css/share.css

@@ -68,6 +68,12 @@
 	overflow: hidden;
 	vertical-align: middle;
 }
+#shareWithList .avatar {
+	margin-right: 2px;
+	display: inline-block;
+	overflow: hidden;
+	vertical-align: middle;
+}
 #shareWithList li label{
 	margin-right: 8px;
 }

core/js/config.php

@@ -74,6 +74,7 @@
 			'session_keepalive'	=> \OCP\Config::getSystemValue('session_keepalive', true),
 			'version'			=> implode('.', OC_Util::getVersion()),
 			'versionstring'		=> OC_Util::getVersionString(),
+			'enable_avatars'	=> \OC::$server->getConfig()->getSystemValue('enable_avatars', true),
 		)
 	),
 	"oc_appconfig" => json_encode(

core/js/core.json

@@ -9,7 +9,8 @@
 	],
 	"libraries": [
 		"jquery-showpassword.js",
-		"jquery-tipsy.js"
+		"jquery-tipsy.js",
+		"jquery.avatar.js"
 	],
 	"modules": [
 		"compatibility.js",

core/js/share.js

@@ -358,9 +358,17 @@ OC.Share={
 		var html = '<div id="dropdown" class="drop shareDropDown" data-item-type="'+itemType+'" data-item-source="'+itemSource+'">';
 		if (data !== false && data.reshare !== false && data.reshare.uid_owner !== undefined) {
 			if (data.reshare.share_type == OC.Share.SHARE_TYPE_GROUP) {
-				html += '<span class="reshare">'+t('core', 'Shared with you and the group {group} by {owner}', {group: data.reshare.share_with, owner: data.reshare.displayname_owner})+'</span>';
+				html += '<span class="reshare">'+t('core', 'Shared with you and the group {group} by {owner}', {group: data.reshare.share_with, owner: data.reshare.displayname_owner});
+				if (oc_config.enable_avatars === true) {
+					html += ' <div id="avatar-share-owner" style="display: inline-block"></div>';
+				}
+				html += '</span>';
 			} else {
-				html += '<span class="reshare">'+t('core', 'Shared with you by {owner}', {owner: data.reshare.displayname_owner})+'</span>';
+				html += '<span class="reshare">'+t('core', 'Shared with you by {owner}', {owner: data.reshare.displayname_owner});
+				if (oc_config.enable_avatars === true) {
+					html += ' <div id="avatar-share-owner" style="display: inline-block"></div>';
+				}
+				html += '</span>';
 			}
 			html += '<br />';
 			// reduce possible permissions to what the original share allowed
@@ -437,6 +445,12 @@ OC.Share={
 			html += '</div>';
 			dropDownEl = $(html);
 			dropDownEl = dropDownEl.appendTo(appendTo);
+
+			//Get owner avatars
+			if (oc_config.enable_avatars === true && data !== false && data.reshare !== false && data.reshare.uid_owner !== undefined) {
+				$('#avatar-share-owner').avatar(data.reshare.uid_owner, 32);
+			}
+
 			// Reset item shares
 			OC.Share.itemShares = [];
 			OC.Share.currentShares = {};
@@ -650,6 +664,13 @@ OC.Share={
 			var html = '<li style="clear: both;" data-share-type="'+escapeHTML(shareType)+'" data-share-with="'+escapeHTML(shareWith)+'" title="' + escapeHTML(shareWith) + '">';
 			var showCrudsButton;
 			html += '<a href="#" class="unshare"><img class="svg" alt="'+t('core', 'Unshare')+'" title="'+t('core', 'Unshare')+'" src="'+OC.imagePath('core', 'actions/delete')+'"/></a>';
+			if (oc_config.enable_avatars === true) {
+				if (shareType === OC.Share.SHARE_TYPE_USER) {
+					html += '<div id="avatar-' + escapeHTML(shareWith) + '" class="avatar"></div>';
+				} else {
+					html += '<div class="avatar" style="padding-right: 32px"></div>';
+				}
+			}
 			html += '<span class="username">' + escapeHTML(shareWithDisplayName) + '</span>';
 			var mailNotificationEnabled = $('input:hidden[name=mailNotificationEnabled]').val();
 			if (mailNotificationEnabled === 'yes' && shareType !== OC.Share.SHARE_TYPE_REMOTE) {
@@ -681,6 +702,9 @@ OC.Share={
 			html += '</div>';
 			html += '</li>';
 			html = $(html).appendTo('#shareWithList');
+			if (oc_config.enable_avatars === true && shareType === OC.Share.SHARE_TYPE_USER) {
+				$('#avatar-' + escapeHTML(shareWith)).avatar(escapeHTML(shareWith), 32);
+			}
 			// insert cruds button into last label element
 			var lastLabel = html.find('>label:last');
 			if (lastLabel.exists()){

core/js/tests/specs/shareSpec.js

@@ -26,6 +26,8 @@ describe('OC.Share tests', function() {
 		var oldAppConfig;
 		var loadItemStub;
 		var autocompleteStub;
+		var oldEnableAvatars;
+		var avatarStub;
 
 		beforeEach(function() {
 			$('#testArea').append($('<div id="shareContainer"></div>'));
@@ -54,13 +56,19 @@ describe('OC.Share tests', function() {
 				var $el = $('<div></div>').data('ui-autocomplete', {});
 				return $el;
 			});
+
+			oldEnableAvatars = oc_config.enable_avatars;
+			oc_config.enable_avatars = false;
+			avatarStub = sinon.stub($.fn, 'avatar');
 		});
 		afterEach(function() {
 			/* jshint camelcase:false */
 			oc_appconfig.core = oldAppConfig;
 			loadItemStub.restore();
 
 			autocompleteStub.restore();
+			avatarStub.restore();
+			oc_config.enable_avatars = oldEnableAvatars;
 			$('#dropdown').remove();
 		});
 		it('calls loadItem with the correct arguments', function() {
@@ -405,6 +413,80 @@ describe('OC.Share tests', function() {
 				});
 			});
 		});
+		describe('check for avatar', function() {
+			beforeEach(function() {
+				loadItemStub.returns({
+					reshare: [],
+					shares: [{
+						id: 100,
+						item_source: 123,
+						permissions: 31,
+						share_type: OC.Share.SHARE_TYPE_USER,
+						share_with: 'user1',
+						share_with_displayname: 'User One'
+					},{
+						id: 101,
+						item_source: 123,
+						permissions: 31,
+						share_type: OC.Share.SHARE_TYPE_GROUP,
+						share_with: 'group',
+						share_with_displayname: 'group'
+					}]
+				});
+			});
+
+			describe('avatars enabled', function() {
+				beforeEach(function() {
+					oc_config.enable_avatars = true;
+					OC.Share.showDropDown(
+						'file',
+						123,
+						$container,
+						true,
+						31,
+						'shared_file_name.txt'
+					);
+				});
+
+				afterEach(function() {
+					oc_config.enable_avatars = false;
+				});
+
+				it('test correct function call', function() {
+					expect(avatarStub.calledOnce).toEqual(true);
+					var args = avatarStub.getCall(0).args;
+
+
+					expect($('#shareWithList').children().length).toEqual(2);
+
+					expect($('#avatar-user1').length).toEqual(1);
+					expect(args.length).toEqual(2);
+					expect(args[0]).toEqual('user1');
+				});
+
+				it('test no avatar for groups', function() {
+					expect($('#shareWithList').children().length).toEqual(2);
+					expect($('#shareWithList li:nth-child(2) .avatar').attr('id')).not.toBeDefined();
+				});
+			});
+
+			describe('avatars disabled', function() {
+				beforeEach(function() {
+					OC.Share.showDropDown(
+						'file',
+						123,
+						$container,
+						true,
+						31,
+						'shared_file_name.txt'
+					);
+				});
+
+				it('no avatar classes', function() {
+					expect($('.avatar').length).toEqual(0);
+				});
+			});
+		});
 		describe('"sharesChanged" event', function() {
 			var autocompleteOptions;
 			var handler;