SharedWithDisplayName + SharedWithAvatar

Signed-off-by: Maxence Lange <maxence@nextcloud.com>
Signed-off-by: Morris Jobke <hey@morrisjobke.de>

3 files changed, 63 insertions, 7 deletions

diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index 1e873a7208e..c8709083c5f 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -25,7 +25,7 @@
 			'<ul id="shareWithList" class="shareWithList">' +
 			'{{#each sharees}}' +
 				'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
-					'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" data-displayname="{{shareWithDisplayName}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
+					'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" data-avatar="{{shareWithAvatar}}" data-displayname="{{shareWithDisplayName}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
 					'<span class="username" title="{{shareWithTitle}}">{{shareWithDisplayName}}</span>' +
 					'<span class="sharingOptionsGroup">' +
 						'{{#if editPermissionPossible}}' +
@@ -188,6 +188,7 @@
 		getShareeObject: function(shareIndex) {
 			var shareWith = this.model.getShareWith(shareIndex);
 			var shareWithDisplayName = this.model.getShareWithDisplayName(shareIndex);
+			var shareWithAvatar = this.model.getShareWithAvatar(shareIndex);
 			var shareWithTitle = '';
 			var shareType = this.model.getShareType(shareIndex);
 			var sharedBy = this.model.getSharedBy(shareIndex);
@@ -211,6 +212,10 @@
 				shareWithTitle = shareWith + " (" + t('core', 'email') + ')';
 			} else if (shareType === OC.Share.SHARE_TYPE_CIRCLE) {
 				shareWithTitle = shareWith;
+				// Force "shareWith" in the template to a safe value, as the
+				// original "shareWith" returned by the model may contain
+				// problematic characters like "'".
+				shareWith = 'circle-' + shareIndex;
 			}
 
 			if (sharedBy !== oc_current_user) {
@@ -238,10 +243,11 @@
 				hasDeletePermission: this.model.hasDeletePermission(shareIndex),
 				shareWith: shareWith,
 				shareWithDisplayName: shareWithDisplayName,
+				shareWithAvatar: shareWithAvatar,
 				shareWithTitle: shareWithTitle,
 				shareType: shareType,
 				shareId: this.model.get('shares')[shareIndex].id,
-				modSeed: shareType !== OC.Share.SHARE_TYPE_USER && shareType !== OC.Share.SHARE_TYPE_CIRCLE,
+				modSeed: shareType !== OC.Share.SHARE_TYPE_USER && (shareType !== OC.Share.SHARE_TYPE_CIRCLE || shareWithAvatar),
 				isRemoteShare: shareType === OC.Share.SHARE_TYPE_REMOTE,
 				isMailShare: shareType === OC.Share.SHARE_TYPE_EMAIL,
 				isCircleShare: shareType === OC.Share.SHARE_TYPE_CIRCLE,
@@ -351,9 +357,16 @@
 
 				this.$('.avatar').each(function () {
 					var $this = $(this);
+
 					if ($this.hasClass('imageplaceholderseed')) {
 						$this.css({width: 32, height: 32});
-						$this.imageplaceholder($this.data('seed'));
+						if ($this.data('avatar')) {
+							$this.css('border-radius', '0%');
+							$this.css('background', 'url(' + $this.data('avatar') + ') no-repeat');
+							$this.css('background-size', '31px');
+						} else {
+							$this.imageplaceholder($this.data('seed'));
+						}
 					} else {
 						//                         user,   size,  ie8fix, hidedefault,  callback, displayname
 						$this.avatar($this.data('username'), 32, undefined, undefined, undefined, $this.data('displayname'));
diff --git a/core/js/shareitemmodel.js b/core/js/shareitemmodel.js
index e7824aca33a..93feba9c889 100644
--- a/core/js/shareitemmodel.js
+++ b/core/js/shareitemmodel.js
@@ -43,6 +43,7 @@
 	 * @property {string} token
 	 * @property {string} share_with
 	 * @property {string} share_with_displayname
+	 * @property {string} share_with_avatar
 	 * @property {string} mail_send
 	 * @property {Date} expiration optional?
 	 * @property {number} stime optional?
@@ -405,6 +406,20 @@
 			return share.share_with_displayname;
 		},
 
+
+		/**
+		 * @param shareIndex
+		 * @returns {string}
+		 */
+		getShareWithAvatar: function(shareIndex) {
+			/** @type OC.Share.Types.ShareInfo **/
+			var share = this.get('shares')[shareIndex];
+			if(!_.isObject(share)) {
+				throw "Unknown Share";
+			}
+			return share.share_with_avatar;
+		},
+
 		/**
 		 * @param shareIndex
 		 * @returns {string}
diff --git a/core/js/tests/specs/sharedialogviewSpec.js b/core/js/tests/specs/sharedialogviewSpec.js
index d3639159849..265bfbca973 100644
--- a/core/js/tests/specs/sharedialogviewSpec.js
+++ b/core/js/tests/specs/sharedialogviewSpec.js
@@ -427,7 +427,21 @@ describe('OC.Share.ShareDialogView', function() {
 					share_type: OC.Share.SHARE_TYPE_REMOTE,
 					share_with: 'foo@bar.com/baz',
 					share_with_displayname: 'foo@bar.com/baz'
-
+				},{
+					id: 103,
+					item_source: 123,
+					permissions: 31,
+					share_type: OC.Share.SHARE_TYPE_CIRCLE,
+					share_with: 'circle-0',
+					share_with_displayname: 'Circle (Personal circle, user0)',
+					share_with_avatar: 'path/to/the/avatar'
+				},{
+					id: 104,
+					item_source: 123,
+					permissions: 31,
+					share_type: OC.Share.SHARE_TYPE_CIRCLE,
+					share_with: 'circle-1',
+					share_with_displayname: 'Circle (Public circle, user0)',
 				}]
 			});
 		});
@@ -439,10 +453,10 @@ describe('OC.Share.ShareDialogView', function() {
 			});
 
 			it('test correct function calls', function() {
-				expect(avatarStub.calledTwice).toEqual(true);
+				expect(avatarStub.calledThrice).toEqual(true);
 				expect(placeholderStub.callCount).toEqual(4);
-				expect(dialog.$('.shareWithList').children().length).toEqual(3);
-				expect(dialog.$('.avatar').length).toEqual(4);
+				expect(dialog.$('.shareWithList').children().length).toEqual(5);
+				expect(dialog.$('.avatar').length).toEqual(6);
 			});
 
 			it('test avatar owner', function() {
@@ -469,6 +483,20 @@ describe('OC.Share.ShareDialogView', function() {
 				expect(args.length).toEqual(1);
 				expect(args[0]).toEqual('foo@bar.com/baz ' + OC.Share.SHARE_TYPE_REMOTE);
 			});
+
+			it('test avatar for circle', function() {
+				var avatarElement = dialog.$('.avatar').eq(4);
+				expect(avatarElement.css('background')).toContain('path/to/the/avatar');
+			});
+
+			it('test avatar for circle without avatar', function() {
+				var args = avatarStub.getCall(2).args;
+				expect(args.length).toEqual(6);
+				// Note that "data-username" is set to "circle-{shareIndex}",
+				// not to the "shareWith" field.
+				expect(args[0]).toEqual('circle-4');
+				expect(args[5]).toEqual('Circle (Public circle, user0)');
+			});
 		});
 	});
 	describe('get suggestions', function() {