move sharing options into popover menu

1 files changed, 71 insertions, 45 deletions

diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index 540bafa5c1c..04cd64603d9 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -1,3 +1,5 @@
+/* global OC, Handlebars */
+
 /*
  * Copyright (c) 2015
  *
@@ -19,7 +21,6 @@
 			'<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}}' +
@@ -30,45 +31,62 @@
 						'<label for="mail-{{cid}}-{{shareWith}}">{{notifyByMailLabel}}</label>' +
 					'</span>' +
 					'{{/unless}} {{/if}}' +
-					'{{#if isResharingAllowed}} {{#if sharePermissionPossible}}' +
-					'<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>' +
-					'{{/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>' +
-						'{{#if isFolder}}' +
-						'<a href="#" class="showCruds"><img alt="{{crudsLabel}}" src="{{triangleSImage}}"/></a>' +
-						'{{/if}}' +
-					'</span>' +
-					'{{/if}}' +
-					'<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}}' +
+					'<span class="sharingOptionsGroup">' +
+						'{{#if editPermissionPossible}}' +
 						'<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>' +
+							'<input id="canEdit-{{cid}}-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
+							'<label for="canEdit-{{cid}}-{{shareWith}}">{{canEditLabel}}</label>' +
 						'</span>' +
 						'{{/if}}' +
-					'</div>' +
+						'<span class="icon icon-more"></span>' +
+						'<div class="popovermenu bubble hidden menu">' +
+							'<ul>' +
+								'{{#if isResharingAllowed}} {{#if sharePermissionPossible}}' +
+								'<li>' +
+									'<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>' +
+								'</li>' +
+								'{{/if}} {{/if}}' +
+								'{{#if isFolder}}' +
+									'{{#if createPermissionPossible}}' +
+									'<li>' +
+										'<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>' +
+									'</li>' +
+									'{{/if}}' +
+									'{{#if updatePermissionPossible}}' +
+									'<li>' +
+										'<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>' +
+									'</li>' +
+									'{{/if}}' +
+									'{{#if deletePermissionPossible}}' +
+									'<li>' +
+										'<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>' +
+									'</li>' +
+									'{{/if}}' +
+								'{{/if}}' +
+								'<li>' +
+									'<a href="#" class="menuitem action action-delete permanent unshare">' +
+										'<span class="icon icon-delete"></span>' +
+										'<span>{{unshareLabel}}</span>' +
+									'</a>' +
+								'</li>' +
+							'</ul>' +
+						'</div>' +
+					'</span>' +
 				'</li>' +
 			'{{/each}}' +
-			'</ul>'
-		;
+			'</ul>';
 
 	/**
 	 * @class OCA.Share.ShareDialogShareeListView
@@ -92,8 +110,8 @@
 
 		events: {
 			'click .unshare': 'onUnshare',
+			'click .icon-more': 'onToggleMenu',
 			'click .permissions': 'onPermissionChange',
-			'click .showCruds': 'onCrudsToggle',
 			'click .mailNotification': 'onSendMailNotification'
 		},
 
@@ -224,6 +242,8 @@
 		},
 
 		onUnshare: function(event) {
+			event.preventDefault();
+			event.stopPropagation();
 			var self = this;
 			var $element = $(event.target);
 			if (!$element.is('a')) {
@@ -237,7 +257,7 @@
 			}
 			$loading.removeClass('hidden');
 
-			var $li = $element.closest('li');
+			var $li = $element.closest('li[data-share-id]');
 
 			var shareId = $li.data('share-id');
 
@@ -252,9 +272,21 @@
 			return false;
 		},
 
+		onToggleMenu: function(event) {
+			event.preventDefault();
+			event.stopPropagation();
+			var $element = $(event.target);
+			var $li = $element.closest('li[data-share-id]');
+			var $menu = $li.find('.popovermenu');
+
+			OC.showMenu(null, $menu);
+		},
+
 		onPermissionChange: function(event) {
+			event.preventDefault();
+			event.stopPropagation();
 			var $element = $(event.target);
-			var $li = $element.closest('li');
+			var $li = $element.closest('li[data-share-id]');
 			var shareId = $li.data('share-id');
 
 			// adjust checkbox states
@@ -278,15 +310,9 @@
 			this.model.updateShare(shareId, {permissions: permissions});
 		},
 
-		onCrudsToggle: function(event) {
-			var $target = $(event.target);
-			$target.closest('li').find('.cruds').toggleClass('hidden');
-			return false;
-		},
-
 		onSendMailNotification: function(event) {
 			var $target = $(event.target);
-			var $li = $(event.target).closest('li');
+			var $li = $(event.target).closest('li[data-share-id]');
 			var shareType = $li.data('share-type');
 			var shareWith = $li.attr('data-share-with');