Keep share checkboxes together

- removed leading spaces before markup which can affect rendering in
  some cases
- added shareOption CSS class to group and keep share option checkbox +
  label
- moved ".showCruds" arrow into the matching shareOption to keep the
  arrow together with the checkbox

2 files changed, 55 insertions, 36 deletions

diff --git a/core/css/share.css b/core/css/share.css
index 55ee5996a75..047bb5eba50 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 49580cc888b..e4edbf24c08 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -16,42 +16,56 @@
 	var TEMPLATE =
 			'<ul id="shareWithList" class="shareWithList">' +
 			'{{#each sharees}}' +
-			'    <li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
-			'        <a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
-			'        {{#if avatarEnabled}}' +
-			'        <div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
-			'        {{/if}}' +
-			'        <span class="has-tooltip username" title="{{shareWith}}">{{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>' +
+				'<li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
+					'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
+					'{{#if avatarEnabled}}' +
+					'<div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
+					'{{/if}}' +
+					'<span class="has-tooltip username" title="{{shareWith}}">{{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>' +
 			'{{/each}}' +
 			'</ul>'
 		;