Fixed share dropdown checkbox wrapping

The "show cruds" button is now embedded into the last label/checkbox
group and wraps with it.

Added ellipsis to prevent long names to exceed the dropdown's width.

2 files changed, 43 insertions, 28 deletions

diff --git a/core/css/share.css b/core/css/share.css
index 1ad7bf8d888..d8140242e06 100644
--- a/core/css/share.css
+++ b/core/css/share.css
@@ -21,26 +21,36 @@
 	padding:.5em;
 }
 
-#shareWithList li {
-	padding-top: 10px;
-	padding-bottom: 10px;
-	font-weight: bold;
-}
-
-#shareWithList li:first-child {
-	white-space:normal;
-}
-
-#shareWithList .cruds {
-	margin-left:-10px;
-}
-
-#shareWithList .unshare img, #shareWithList .showCruds img {
-	vertical-align:text-bottom; /* properly align icons */
-}
-
+	#shareWithList li {
+		padding-top: 10px;
+		padding-bottom: 10px;
+		font-weight: bold;
+		line-height: 21px;
+		white-space: normal;
+	}
+
+	#shareWithList .unshare img, #shareWithList .showCruds img {
+		vertical-align:text-bottom; /* properly align icons */
+	}
+
+	#shareWithList label input[type=checkbox]{
+		margin-left: 0;
+	}
+	#shareWithList .username{
+		padding-right: .5em;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		max-width: 254px;
+		display: inline-block;
+		overflow: hidden;
+		vertical-align: middle;
+	}
+	#shareWithList li label{
+		margin-right: .5em;
+	}
 #dropdown label {
 	font-weight:400;
+	white-space: nowrap;
 }
 
 #dropdown input[type="checkbox"] {
diff --git a/core/js/share.js b/core/js/share.js
index d064a399e55..a8f28a4ec05 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -372,24 +372,21 @@ OC.Share={
 				shareChecked = 'checked="checked"';
 			}
 			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')+'" src="'+OC.imagePath('core', 'actions/delete')+'"/></a>';
-			if(shareWith.length > 14){
-				html += escapeHTML(shareWithDisplayName.substr(0,11) + '...');
-			}else{
-				html += escapeHTML(shareWithDisplayName);
-			}
+			html += '<span class="username">' + escapeHTML(shareWithDisplayName) + '</span>';
 			var mailNotificationEnabled = $('input:hidden[name=mailNotificationEnabled]').val();
 			if (mailNotificationEnabled === 'yes') {
 				var checked = '';
 				if (mailSend === '1') {
 					checked = 'checked';
 				}
-				html += '<label><input type="checkbox" name="mailNotification" class="mailNotification" ' + checked + ' />'+t('core', 'notify by email')+'</label>';
+				html += '<label><input type="checkbox" name="mailNotification" class="mailNotification" ' + checked + ' />'+t('core', 'notify by email')+'</label> ';
 			}
 			if (possiblePermissions & OC.PERMISSION_CREATE || possiblePermissions & OC.PERMISSION_UPDATE || possiblePermissions & OC.PERMISSION_DELETE) {
-				html += '<label><input type="checkbox" name="edit" class="permissions" '+editChecked+' />'+t('core', 'can edit')+'</label>';
+				html += '<label><input type="checkbox" name="edit" class="permissions" '+editChecked+' />'+t('core', 'can edit')+'</label> ';
 			}
-			html += '<a href="#" class="showCruds"><img class="svg" alt="'+t('core', 'access control')+'" src="'+OC.imagePath('core', 'actions/triangle-s')+'"/></a>';
+			showCrudsButton = '<a href="#" class="showCruds"><img class="svg" alt="'+t('core', 'access control')+'" src="'+OC.imagePath('core', 'actions/triangle-s')+'"/></a>';
 			html += '<div class="cruds" style="display:none;">';
 				if (possiblePermissions & OC.PERMISSION_CREATE) {
 					html += '<label><input type="checkbox" name="create" class="permissions" '+createChecked+' data-permissions="'+OC.PERMISSION_CREATE+'" />'+t('core', 'create')+'</label>';
@@ -405,7 +402,15 @@ OC.Share={
 				}
 			html += '</div>';
 			html += '</li>';
-			$(html).appendTo('#shareWithList');
+			html = $(html).appendTo('#shareWithList');
+			// insert cruds button into last label element
+			var lastLabel = html.find('>label:last');
+			if (lastLabel.exists()){
+				lastLabel.append(showCrudsButton);
+			}
+			else{
+				html.find('.cruds').before(showCrudsButton);
+			}
 			$('#expiration').show();
 		}
 	},
@@ -512,7 +517,7 @@ $(document).ready(function() {
 	});
 
 	$(document).on('click', '#dropdown .showCruds', function() {
-		$(this).parent().find('.cruds').toggle();
+		$(this).closest('li').find('.cruds').toggle();
 		return false;
 	});