Merge pull request #5435 from owncloud/share-improvements

Share improvements

2 files changed, 53 insertions, 52 deletions

diff --git a/core/css/share.css b/core/css/share.css
index 2a21dc6edf6..d8140242e06 100644
--- a/core/css/share.css
+++ b/core/css/share.css
@@ -21,28 +21,41 @@
 	padding:.5em;
 }
 
-#shareWithList li {
-	padding-top:.1em;
-}
-
-#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"] {
 	margin:0 .2em 0 .5em;
+	vertical-align: middle;
 }
 
 a.showCruds {
@@ -99,3 +112,9 @@ a.showCruds:hover,a.unshare:hover {
 	overflow-y:auto;
 	overflow-x:hidden;
 }
+
+.notCreatable {
+	padding-left: 12px;
+	padding-top: 12px;
+	color: #999;
+}
diff --git a/core/js/share.js b/core/js/share.js
index 281cccaaef8..50dbd9b7305 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -200,13 +200,13 @@ OC.Share={
 				}
 			});
 
-			html += '<input id="shareWith" type="text" placeholder="'+t('core', 'Share with')+'" />';
+			html += '<input id="shareWith" type="text" placeholder="'+t('core', 'Share with user or group …')+'" />';
 			html += '<ul id="shareWithList">';
 			html += '</ul>';
 			var linksAllowed = $('#allowShareWithLink').val() === 'yes';
 			if (link && linksAllowed) {
 				html += '<div id="link">';
-				html += '<input type="checkbox" name="linkCheckbox" id="linkCheckbox" value="1" /><label for="linkCheckbox">'+t('core', 'Share with link')+'</label>';
+				html += '<input type="checkbox" name="linkCheckbox" id="linkCheckbox" value="1" /><label for="linkCheckbox">'+t('core', 'Share link')+'</label>';
 				html += '<br />';
 				html += '<input id="linkText" type="text" readonly="readonly" />';
 				html += '<input type="checkbox" name="showPassword" id="showPassword" value="1" style="display:none;" /><label for="showPassword" style="display:none;">'+t('core', 'Password protect')+'</label>';
@@ -363,29 +363,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) + '">';
-			html += '<a href="#" class="unshare" style="display:none;"><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);
-			}
+			var showCrudsButton;
+			html += '<a href="#" class="unshare"><img class="svg" alt="'+t('core', 'Unshare')+'" src="'+OC.imagePath('core', 'actions/delete')+'"/></a>';
+			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 user 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) {
-				if (editChecked == '') {
-					html += '<label style="display:none;">';
-				} else {
-					html += '<label>';
-				}
-				html += '<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" style="display:none;"><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>';
@@ -401,7 +393,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();
 		}
 	},
@@ -507,26 +507,8 @@ $(document).ready(function() {
 		}
 	});
 
-	$(document).on('mouseenter', '#dropdown #shareWithList li', function(event) {
-		// Show permissions and unshare button
-		$(':hidden', this).filter(':not(.cruds)').show();
-	});
-
-	$(document).on('mouseleave', '#dropdown #shareWithList li', function(event) {
-		// Hide permissions and unshare button
-		if (!$('.cruds', this).is(':visible')) {
-			$('a', this).hide();
-			if (!$('input[name="edit"]', this).is(':checked')) {
-				$('input[type="checkbox"]', this).hide();
-				$('label', this).hide();
-			}
-		} else {
-			$('a.unshare', this).hide();
-		}
-	});
-
 	$(document).on('click', '#dropdown .showCruds', function() {
-		$(this).parent().find('.cruds').toggle();
+		$(this).closest('li').find('.cruds').toggle();
 		return false;
 	});