Merge pull request #23391 from owncloud/stable8.2-share-keepoptioncheckboxinblocks

[stable8.2] Keep share checkboxes together

2 files changed, 61 insertions, 42 deletions

diff --git a/core/css/share.css b/core/css/share.css
index 15f8061b068..be210fa8ec7 100644
--- a/core/css/share.css
+++ b/core/css/share.css
@@ -63,6 +63,11 @@
 	white-space: normal;
 }
 
+#shareWithList .shareOption {
+	white-space: nowrap;
+	display: inline-block;
+}
+
 #shareWithList .unshare img, #shareWithList .showCruds img {
 	vertical-align:text-bottom; /* properly align icons */
 }
diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index 5728fbfd210..f18d7fde067 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -16,49 +16,63 @@
 	var TEMPLATE =
 			'<ul id="shareWithList" class="shareWithList">' +
 			'{{#each sharees}}' +
-			'    {{#if isCollection}}' +
-			'    <li data-collection="{{collectionID}}">{{text}}</li>' +
-			'    {{/if}}' +
-			'    {{#unless isCollection}}' +
-			'    <li data-share-type="{{shareType}}" data-share-with="{{shareWith}}" title="{{shareWith}}">' +
-			'        <a href="#" class="unshare"><span class="icon-loading-small hidden"></span><img class="svg" alt="{{unshareLabel}}" title="{{unshareLabel}}" src="{{unshareImage}}" /></a>' +
-			'        {{#if avatarEnabled}}' +
-			'        <div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
-			'        {{/if}}' +
-			'        <span class="username">{{shareWithDisplayName}}</span>' +
-			'        {{#if mailNotificationEnabled}} {{#unless isRemoteShare}}' +
-			'        <input id="mail-{{cid}}-{{shareWith}}" type="checkbox" name="mailNotification" class="mailNotification checkbox" {{#if wasMailSent}}checked="checked"{{/if}} />' +
-			'        <label for="mail-{{cid}}-{{shareWith}}">{{notifyByMailLabel}}</label>' +
-			'        {{/unless}} {{/if}}' +
-			'        {{#if isResharingAllowed}} {{#if sharePermissionPossible}} {{#unless isRemoteShare}}' +
-			'        <input id="canShare-{{cid}}-{{shareWith}}" type="checkbox" name="share" class="permissions checkbox" {{#if hasSharePermission}}checked="checked"{{/if}} data-permissions="{{sharePermission}}" />' +
-			'        <label for="canShare-{{cid}}-{{shareWith}}">{{canShareLabel}}</label>' +
-			'        {{/unless}} {{/if}} {{/if}}' +
-			'        {{#if editPermissionPossible}}' +
-			'        <input id="canEdit-{{cid}}-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
-			'        <label for="canEdit-{{cid}}-{{shareWith}}">{{canEditLabel}}</label>' +
-			'        {{/if}}' +
-			'        {{#unless isRemoteShare}}' +
-			'        <a href="#" class="showCruds"><img class="svg" alt="{{crudsLabel}}" src="{{triangleSImage}}"/></a>' +
-			'        <div class="cruds hidden">' +
-			'            {{#if createPermissionPossible}}' +
-			'            <input id="canCreate-{{cid}}-{{shareWith}}" type="checkbox" name="create" class="permissions checkbox" {{#if hasCreatePermission}}checked="checked"{{/if}} data-permissions="{{createPermission}}"/>' +
-			'            <label for="canCreate-{{cid}}-{{shareWith}}">{{createPermissionLabel}}</label>' +
-			'            {{/if}}' +
-			'            {{#if updatePermissionPossible}}' +
-			'            <input id="canUpdate-{{cid}}-{{shareWith}}" type="checkbox" name="update" class="permissions checkbox" {{#if hasUpdatePermission}}checked="checked"{{/if}} data-permissions="{{updatePermission}}"/>' +
-			'            <label for="canUpdate-{{cid}}-{{shareWith}}">{{updatePermissionLabel}}</label>' +
-			'            {{/if}}' +
-			'            {{#if deletePermissionPossible}} {{#unless isRemoteShare}}' +
-			'            <input id="canDelete-{{cid}}-{{shareWith}}" type="checkbox" name="delete" class="permissions checkbox" {{#if hasDeletePermission}}checked="checked"{{/if}} data-permissions="{{deletePermission}}"/>' +
-			'            <label for="canDelete-{{cid}}-{{shareWith}}">{{deletePermissionLabel}}</label>' +
-			'            {{/unless}} {{/if}}' +
-			'        </div>' +
-			'        {{/unless}}' +
-			'    </li>' +
-			'    {{/unless}}' +
+				'{{#if isCollection}}' +
+				'<li data-collection="{{collectionID}}">{{text}}</li>' +
+				'{{/if}}' +
+				'{{#unless isCollection}}' +
+				'<li data-share-type="{{shareType}}" data-share-with="{{shareWith}}" title="{{shareWith}}">' +
+					'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><img class="svg" alt="{{unshareLabel}}" title="{{unshareLabel}}" src="{{unshareImage}}" /></a>' +
+					'{{#if avatarEnabled}}' +
+					'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
+					'{{/if}}' +
+					'<span class="username">{{shareWithDisplayName}}</span>' +
+					'{{#if mailNotificationEnabled}} {{#unless isRemoteShare}}' +
+					'<span class="shareOption">' +
+						'<input id="mail-{{cid}}-{{shareWith}}" type="checkbox" name="mailNotification" class="mailNotification checkbox" {{#if wasMailSent}}checked="checked"{{/if}} />' +
+						'<label for="mail-{{cid}}-{{shareWith}}">{{notifyByMailLabel}}</label>' +
+					'</span>' +
+					'{{/unless}} {{/if}}' +
+					'{{#if isResharingAllowed}} {{#if sharePermissionPossible}} {{#unless isRemoteShare}}' +
+					'<span class="shareOption">' +
+						'<input id="canShare-{{cid}}-{{shareWith}}" type="checkbox" name="share" class="permissions checkbox" {{#if hasSharePermission}}checked="checked"{{/if}} data-permissions="{{sharePermission}}" />' +
+						'<label for="canShare-{{cid}}-{{shareWith}}">{{canShareLabel}}</label>' +
+					'</span>' +
+					'{{/unless}} {{/if}} {{/if}}' +
+					'{{#if editPermissionPossible}}' +
+					'<span class="shareOption">' +
+						'<input id="canEdit-{{cid}}-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
+						'<label for="canEdit-{{cid}}-{{shareWith}}">{{canEditLabel}}</label>' +
+						'{{#unless isRemoteShare}}' +
+						'<a href="#" class="showCruds"><img class="svg" alt="{{crudsLabel}}" src="{{triangleSImage}}"/></a>' +
+						'{{/unless}}' +
+					'</span>' +
+					'{{/if}}' +
+					'{{#unless isRemoteShare}}' +
+					'<div class="cruds hidden">' +
+						'{{#if createPermissionPossible}}' +
+						'<span class="shareOption">' +
+							'<input id="canCreate-{{cid}}-{{shareWith}}" type="checkbox" name="create" class="permissions checkbox" {{#if hasCreatePermission}}checked="checked"{{/if}} data-permissions="{{createPermission}}"/>' +
+							'<label for="canCreate-{{cid}}-{{shareWith}}">{{createPermissionLabel}}</label>' +
+						'</span>' +
+						'{{/if}}' +
+						'{{#if updatePermissionPossible}}' +
+						'<span class="shareOption">' +
+							'<input id="canUpdate-{{cid}}-{{shareWith}}" type="checkbox" name="update" class="permissions checkbox" {{#if hasUpdatePermission}}checked="checked"{{/if}} data-permissions="{{updatePermission}}"/>' +
+							'<label for="canUpdate-{{cid}}-{{shareWith}}">{{updatePermissionLabel}}</label>' +
+						'</span>' +
+						'{{/if}}' +
+						'{{#if deletePermissionPossible}} {{#unless isRemoteShare}}' +
+						'<span class="shareOption">' +
+							'<input id="canDelete-{{cid}}-{{shareWith}}" type="checkbox" name="delete" class="permissions checkbox" {{#if hasDeletePermission}}checked="checked"{{/if}} data-permissions="{{deletePermission}}"/>' +
+							'<label for="canDelete-{{cid}}-{{shareWith}}">{{deletePermissionLabel}}</label>' +
+						'</span>' +
+						'{{/unless}} {{/if}}' +
+					'</div>' +
+					'{{/unless}}' +
+				'</li>' +
+			 	'{{/unless}}' +
 			'{{/each}}' +
-			'</ul>'
+		'</ul>'
 		;
 
 	/**