Fix long display names

apps/files/css/files.css

@@ -681,6 +681,82 @@ html.ie8 .column-mtime .selectedActions {
 	opacity: 1 !important;
 }
 
+#fileList .shared-with-recipient:not(:last-of-type):after {
+	content: ",";
+	margin-right: 5px;
+}
+
+#fileList .shared-with-recipient {
+	display: inline-block;
+}
+
+.shared-with-hidden-count {
+	font-style: normal;
+}
+
+@media only screen and (min-width: 1500px) {
+
+	#fileList .shared-with-recipient:nth-child(n+4) {
+		width: 0;
+		height: 0;
+		opacity: 0;
+		display: block;
+		float: left;
+		counter-increment: shared-with-recipient;
+	}
+
+	#fileList .shared-with-recipient:nth-child(3):after {
+		display: none;
+	}
+
+	#fileList .shared-with-recipient:nth-child(3) ~ .shared-with-hidden-count:after {
+		content: "+" counter(shared-with-recipient);
+		margin-left: 3px;
+	}
+
+}
+
+@media only screen and (min-width: 1366px) and (max-width: 1499px){
+
+	#fileList .shared-with-recipient:nth-child(n+3) {
+		width: 0;
+		height: 0;
+		opacity: 0;
+		display: block;
+		float: left;
+		counter-increment: shared-with-recipient;
+	}
+
+	#fileList .shared-with-recipient:nth-child23):after {
+		display: none;
+	}
+
+	#fileList .shared-with-recipient:nth-child23) ~ .shared-with-hidden-count:after {
+		content: "+" counter(shared-with-recipient);
+		margin-left: 3px;
+	}
+}
+
+@media only screen and (min-width: 0px) and (max-width: 1365px){
+
+	#fileList .shared-with-recipient:nth-child(n+2) {
+		width: 0;
+		height: 0;
+		opacity: 0;
+		display: block;
+		float: left;
+		counter-increment: shared-with-recipient;
+	}
+
+	#fileList .shared-with-recipient:first-child:after {
+		display: none;
+	}
+
+	#fileList .shared-with-recipient:nth-child(2) ~ .shared-with-hidden-count:after {
+		content: "+" counter(shared-with-recipient);
+		margin-left: 3px;
+	}
+}
 
 #selectedActionsList a.download.disabled,
 #fileList tr a.action.action-download.disabled {
@@ -695,7 +771,6 @@ html.ie8 .column-mtime .selectedActions {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 	filter: alpha(opacity=30);
 	opacity: .3;
-	/* add whitespace to bottom of files list to correctly show dropdowns */
 	height: 300px;
 }
 .summary:hover,
@@ -704,6 +779,7 @@ html.ie8 .column-mtime .selectedActions {
 table tr.summary td {
 	background-color: transparent;
 }
+
 .summary td {
 	border-bottom: none;
 	vertical-align: top;

apps/files_sharing/js/share.js

@@ -211,7 +211,7 @@
 			var recipients = _.pluck(shareModel.get('shares'), 'share_with_displayname');
 			// note: we only update the data attribute because updateIcon()
 			if (recipients.length) {
-				$tr.attr('data-share-recipients', OCA.Sharing.Util.formatRecipients(recipients));
+				$tr.attr('data-share-recipients', recipients.join(', '));
 			}
 			else {
 				$tr.removeAttr('data-share-recipients');
@@ -235,31 +235,6 @@
 				return true;
 			}
 			return false;
-		},
-
-		/**
-		 * Formats a recipients array to be displayed.
-		 * The first four recipients will be shown and the
-		 * other ones will be shown as "+x" where "x" is the number of
-		 * remaining recipients.
-		 *
-		 * @param {Array.<String>} recipients recipients array
-		 * @param {int} count optional total recipients count (in case the array was shortened)
-		 * @return {String} formatted recipients display text
-		 */
-		formatRecipients: function(recipients, count) {
-			var maxRecipients = 4;
-			var text;
-			if (!_.isNumber(count)) {
-				count = recipients.length;
-			}
-			// TODO: use natural sort
-			recipients = _.first(recipients, maxRecipients).sort();
-			text = recipients.join(', ');
-			if (count > maxRecipients) {
-				text += ', +' + (count - maxRecipients);
-			}
-			return text;
 		}
 	};
 })();

apps/files_sharing/js/sharedfilelist.js

@@ -346,13 +346,7 @@
 					}
 
 					if (recipient) {
-						// limit counterparts for output
-						if (data.recipientsCount < 4) {
-							// only store the first ones, they will be the only ones
-							// displayed
-							data.recipients[recipient] = true;
-						}
-						data.recipientsCount++;
+						data.recipients[recipient] = true;
 					}
 
 					data.shareTypes[file.share.type] = true;
@@ -368,11 +362,7 @@
 					// array of sorted names
 					data.mountType = 'shared';
 					data.recipients = _.keys(data.recipients);
-					data.recipientsDisplayName = OCA.Sharing.Util.formatRecipients(
-						data.recipients,
-						data.recipientsCount
-					);
-					delete data.recipientsCount;
+					data.recipientsDisplayName = data.recipients.join(', ');
 					if (self._sharedWithUser) {
 						// only for outgoing shres
 						delete data.shareTypes;

apps/files_sharing/tests/js/shareSpec.js

@@ -166,7 +166,7 @@ describe('OCA.Sharing.Util tests', function() {
 			}]);
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
-			expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Two');
+			expect($action.find('>span').text().trim()).toEqual('Shared with User One User Two');
 			expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
@@ -271,9 +271,9 @@ describe('OCA.Sharing.Util tests', function() {
 				]
 			});
 
-			expect($tr.attr('data-share-recipients')).toEqual('Group One, Group Two, User One, User Two');
+			expect($tr.attr('data-share-recipients')).toEqual('User One, User Two, Group One, Group Two');
 
-			expect($action.find('>span').text().trim()).toEqual('Shared with Group One, Group Two, User One, User Two');
+			expect($action.find('>span').text().trim()).toEqual('Shared with User One User Two Group One Group Two');
 			expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 		});
@@ -304,9 +304,8 @@ describe('OCA.Sharing.Util tests', function() {
 				]
 			});
 
-			expect($tr.attr('data-share-recipients')).toEqual('User One, User Three, User Two');
+			expect($tr.attr('data-share-recipients')).toEqual('User One, User Two, User Three');
 
-			expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Three, User Two');
 			expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 		});
@@ -398,53 +397,7 @@ describe('OCA.Sharing.Util tests', function() {
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 		});
 	});
-	describe('formatRecipients', function() {
-		it('returns a single recipient when one passed', function() {
-			expect(OCA.Sharing.Util.formatRecipients(['User one']))
-				.toEqual('User one');
-		});
-		it('returns two recipients when two passed', function() {
-			expect(OCA.Sharing.Util.formatRecipients(['User one', 'User two']))
-				.toEqual('User one, User two');
-		});
-		it('returns four recipients with plus when five passed', function() {
-			var recipients = [
-				'User one',
-				'User two',
-				'User three',
-				'User four',
-				'User five'
-			];
-			expect(OCA.Sharing.Util.formatRecipients(recipients))
-				.toEqual('User four, User one, User three, User two, +1');
-		});
-		it('returns four recipients with plus when ten passed', function() {
-			var recipients = [
-				'User one',
-				'User two',
-				'User three',
-				'User four',
-				'User five',
-				'User six',
-				'User seven',
-				'User eight',
-				'User nine',
-				'User ten'
-			];
-			expect(OCA.Sharing.Util.formatRecipients(recipients))
-				.toEqual('User four, User one, User three, User two, +6');
-		});
-		it('returns four recipients with plus when four passed with counter', function() {
-			var recipients = [
-				'User one',
-				'User two',
-				'User three',
-				'User four'
-			];
-			expect(OCA.Sharing.Util.formatRecipients(recipients, 10))
-				.toEqual('User four, User one, User three, User two, +6');
-		});
-	});
+
 	describe('Excluded lists', function() {
 		function createListThenAttach(listId) {
 			var fileActions = new OCA.Files.FileActions();

core/js/share.js

@@ -242,7 +242,7 @@ OC.Share = _.extend(OC.Share || {}, {
 		var _parent = this;
 		return $.map(recipients, function(recipient) {
 			recipient = _parent._formatRemoteShare(recipient);
-			return recipient;
+			return '<span class="shared-with-recipient">' + recipient + '</span>';
 		});
 	},
 	/**
@@ -296,11 +296,15 @@ OC.Share = _.extend(OC.Share || {}, {
 			// even if reshared, only show "Shared by"
 			if (owner) {
 				message = this._formatRemoteShare(owner);
+				action.html('<span class="shared-by"> ' + message + '</span>').prepend(icon);
 			}
 			else if (recipients) {
-				message = t('core', 'Shared with {recipients}', {recipients: this._formatShareList(recipients.split(", ")).join(", ")}, 0, {escape: false});
+				message = t('core', 'Shared with {recipients}', {recipients: this._formatShareList(recipients.split(", ")).join(' ')}, 0, {escape: false});
+				action.html('<span class="shared-with"> ' + message + '<i class="shared-with-hidden-count" aria-hidden="true"></i></span>').prepend(icon);
+			}
+			else {
+				action.html('<span>' + message + '</span>').prepend(icon);
 			}
-			action.html('<span> ' + message + '</span>').prepend(icon);
 			if (owner || recipients) {
 				action.find('.remoteAddress').tipsy({gravity: 's'});
 			}

core/js/tests/specs/shareSpec.js

@@ -151,7 +151,7 @@ describe('OC.Share tests', function() {
 			});
 		});
 
-		describe('displaying the recipoients', function() {
+		describe('displaying the recipients', function() {
 			function checkRecipients(input, output, title) {
 				var $action;
 
@@ -216,24 +216,24 @@ describe('OC.Share tests', function() {
 			it('display multiple remote recipients', function() {
 				checkRecipients(
 					'One@someserver.com, two@otherserver.com',
-					'Shared with One@…, two@…',
+					'Shared with One@… two@…',
 					['One@someserver.com', 'two@otherserver.com']
 				);
 				checkRecipients(
 					'One@someserver.com/, two@otherserver.com',
-					'Shared with One@…, two@…',
+					'Shared with One@… two@…',
 					['One@someserver.com', 'two@otherserver.com']
 				);
 				checkRecipients(
 					'One@someserver.com/root/of/owncloud, two@otherserver.com',
-					'Shared with One@…, two@…',
+					'Shared with One@… two@…',
 					['One@someserver.com', 'two@otherserver.com']
 				);
 			});
 			it('display mixed recipients', function() {
 				checkRecipients(
 					'One, two@otherserver.com',
-					'Shared with One, two@…',
+					'Shared with One two@…',
 					['two@otherserver.com']
 				);
 			});