From 8ef8be6be52e17b459f08231a27ff08d7ddc2ec3 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Fri, 18 Mar 2016 11:59:57 +0100
Subject: 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
---
core/css/share.css | 5 +++
core/js/sharedialogshareelistview.js | 86 +++++++++++++++++++++---------------
2 files changed, 55 insertions(+), 36 deletions(-)
(limited to 'core')
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>'
;
--
cgit v1.2.3