Merge pull request #14695 from nextcloud/enhancement/grid/sharing-in-menu

Show sharing in menu in grid view

apps/files/css/files.scss

@@ -544,6 +544,9 @@ a.action > img {
 		opacity: .3;
 		&.action-share {
 			padding: 17px 14px;
+			> span:not(.icon) {
+				display: none;
+			}
 			.avatar {
 				display: inline-block;
 				vertical-align: middle;
@@ -936,6 +939,18 @@ table.dragshadow td.size {
 					}
 				}
 
+				.fileActionsMenu {
+					// force show the sharing entry in the dropdown menu
+					.action-share-container.hidden {
+						display: block !important;
+						// avatar in shared by user dropdown menu
+						.action-share img {
+							padding: 6px;
+							border-radius: 50%;
+						}
+					}
+				}
+
 				form {
 					padding: 3px 14px;
 					border-radius: var(--border-radius);

apps/files/js/fileactionsmenu.js

@@ -84,10 +84,7 @@
 			);
 
 			var items = _.filter(actions, function(actionSpec) {
-				return (
-					actionSpec.type === OCA.Files.FileActions.TYPE_DROPDOWN &&
-					(!defaultAction || actionSpec.name !== defaultAction.name)
-				);
+				return !defaultAction || actionSpec.name !== defaultAction.name;
 			});
 			items = _.map(items, function(item) {
 				if (_.isFunction(item.displayName)) {
@@ -99,6 +96,12 @@
 					item = _.extend({}, item);
 					item.iconClass = item.iconClass(fileName, self._context);
 				}
+				if (_.isFunction(item.icon)) {
+					var fileName = self._context.$file.attr('data-file');
+					item = _.extend({}, item);
+					item.icon = item.icon(fileName, self._context);
+				}
+				item.inline = item.type === OCA.Files.FileActions.TYPE_INLINE
 				return item;
 			});
 			items = items.sort(function(actionA, actionB) {
@@ -109,6 +112,7 @@
 				}
 				return orderA - orderB;
 			});
+
 			items = _.map(items, function(item) {
 				item.nameLowerCase = item.name.toLowerCase();
 				return item;

apps/files/js/templates.js

@@ -92,32 +92,38 @@ templates['file_action_trigger'] = template({"1":function(container,depth0,helpe
 templates['fileactionsmenu'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "		<li>\n			<a href=\"#\" class=\"menuitem action action-"
+  return "		<li class=\""
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.inline : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + " action-"
+    + alias4(((helper = (helper = helpers.nameLowerCase || (depth0 != null ? depth0.nameLowerCase : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"nameLowerCase","hash":{},"data":data}) : helper)))
+    + "-container\">\n			<a href=\"#\" class=\"menuitem action action-"
     + alias4(((helper = (helper = helpers.nameLowerCase || (depth0 != null ? depth0.nameLowerCase : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"nameLowerCase","hash":{},"data":data}) : helper)))
     + " permanent\" data-action=\""
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
     + "\">\n				"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.icon : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.program(4, data, 0),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.icon : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.program(6, data, 0),"data":data})) != null ? stack1 : "")
     + "				<span>"
     + alias4(((helper = (helper = helpers.displayName || (depth0 != null ? depth0.displayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"displayName","hash":{},"data":data}) : helper)))
     + "</span>\n			</a>\n		</li>\n";
 },"2":function(container,depth0,helpers,partials,data) {
+    return "hidden";
+},"4":function(container,depth0,helpers,partials,data) {
     var helper;
 
   return "<img class=\"icon\" src=\""
     + container.escapeExpression(((helper = (helper = helpers.icon || (depth0 != null ? depth0.icon : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"icon","hash":{},"data":data}) : helper)))
     + "\"/>\n";
-},"4":function(container,depth0,helpers,partials,data) {
+},"6":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.iconClass : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.program(7, data, 0),"data":data})) != null ? stack1 : "");
-},"5":function(container,depth0,helpers,partials,data) {
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.iconClass : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.program(9, data, 0),"data":data})) != null ? stack1 : "");
+},"7":function(container,depth0,helpers,partials,data) {
     var helper;
 
   return "						<span class=\"icon "
     + container.escapeExpression(((helper = (helper = helpers.iconClass || (depth0 != null ? depth0.iconClass : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"iconClass","hash":{},"data":data}) : helper)))
     + "\"></span>\n";
-},"7":function(container,depth0,helpers,partials,data) {
+},"9":function(container,depth0,helpers,partials,data) {
     return "						<span class=\"no-icon\"></span>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1;

apps/files/js/templates/fileactionsmenu.handlebars

@@ -1,6 +1,6 @@
 <ul>
 	{{#each items}}
-		<li>
+		<li class="{{#if inline}}hidden{{/if}} action-{{nameLowerCase}}-container">
 			<a href="#" class="menuitem action action-{{nameLowerCase}} permanent" data-action="{{name}}">
 				{{#if icon}}<img class="icon" src="{{icon}}"/>
 				{{else}}

apps/files/tests/js/fileactionsmenuSpec.js

@@ -113,8 +113,11 @@ describe('OCA.Files.FileActionsMenu tests', function() {
 		it('does not render default actions', function() {
 			expect(menu.$el.find('a[data-action=Testdefault]').length).toEqual(0);
 		});
-		it('does not render inline actions', function() {
-			expect(menu.$el.find('a[data-action=Testinline]').length).toEqual(0);
+		it('render inline actions', function() {
+			expect(menu.$el.find('a[data-action=Testinline]').length).toEqual(1);
+		});
+		it('render inline actions but it is hidden', function() {
+			expect(menu.$el.find('a[data-action=Testinline]').parent().hasClass('hidden')).toEqual(true);
 		});
 		it('only renders actions relevant to the mime type', function() {
 			fileActions.registerAction({

apps/files_sharing/src/share.js

@@ -162,11 +162,34 @@
 
 			fileActions.registerAction({
 				name: 'Share',
-				displayName: '',
+				displayName: function(context) {
+					if (context && context.$file) {
+						var shareType = parseInt(context.$file.data('share-types'), 10)
+						var shareOwner = context.$file.data('share-owner-id')
+						if (shareType >= 0 || shareOwner) {
+							return t('core', 'Shared')
+						}
+					}
+					return t('core', 'Share')
+				},
 				altText: t('core', 'Share'),
 				mime: 'all',
+				order: -150,
 				permissions: OC.PERMISSION_ALL,
-				iconClass: 'icon-shared',
+				iconClass: function(fileName, context) {
+					var shareType = parseInt(context.$file.data('share-types'), 10)
+					if (shareType === OC.Share.SHARE_TYPE_EMAIL
+						|| shareType === OC.Share.SHARE_TYPE_LINK) {
+						return 'icon-public'
+					}
+					return 'icon-shared'
+				},
+				icon: function(fileName, context) {
+					var shareOwner = context.$file.data('share-owner-id')
+					if (shareOwner) {
+						return OC.generateUrl(`/avatar/${shareOwner}/32`)
+					}
+				},
 				type: OCA.Files.FileActions.TYPE_INLINE,
 				actionHandler: function(fileName, context) {
 					// do not open sidebar if permission is set and equal to 0

apps/files_sharing/tests/js/shareSpec.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2014 Vincent Petry <pvince81@owncloud.com>
  *
  * This file is licensed under the Affero General Public License version 3
@@ -149,7 +149,7 @@ describe('OCA.Sharing.Util tests', function() {
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(true);
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-public.svg');
 		});
-		it('shows owner name when owner is available', function() {
+		it('shows owner name when owner is available but no icons', function() {
 			var $action, $tr;
 			fileList.setFiles([{
 				id: 1,
@@ -167,7 +167,7 @@ describe('OCA.Sharing.Util tests', function() {
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
 			expect($action.find('>span').text().trim()).toEqual('Shared by User One');
-			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
+			expect($action.find('.icon').hasClass('icon-shared')).toEqual(false);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
 		});
@@ -389,7 +389,7 @@ describe('OCA.Sharing.Util tests', function() {
 			});
 
 			expect($action.find('>span').text().trim()).toEqual('Shared by User One');
-			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
+			expect($action.find('.icon').hasClass('icon-shared')).toEqual(false);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 		});
 		it('keep share text after unsharing reshare', function() {
@@ -422,7 +422,7 @@ describe('OCA.Sharing.Util tests', function() {
 			expect($tr.attr('data-share-recipient-data')).not.toBeDefined();
 
 			expect($action.find('>span').text().trim()).toEqual('Shared by User One');
-			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
+			expect($action.find('.icon').hasClass('icon-shared')).toEqual(false);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 		});
 	});