Merge pull request #18577 from owncloud/action-details

file action detail style fixes

6 files changed, 75 insertions, 59 deletions

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 026713569a1..f8c1d03b666 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -499,7 +499,6 @@ table td.filename .uploadtext {
 .fileactions {
 	position: absolute;
 	right: 0;
-	font-size: 11px;
 }
 
 .busy .fileactions, .busy .action {
@@ -573,6 +572,13 @@ a.action > img {
 	opacity: 0;
 	display:none;
 }
+#fileList a.action.action-share,
+#fileList a.action.action-menu {
+	padding: 17px 14px;
+}
+#fileList .fileActionsMenu {
+	margin-right: 21px;
+}
 
 .ie8 #fileList a.action img,
 #fileList tr:hover a.action,
@@ -588,9 +594,9 @@ a.action > img {
 #fileList tr:focus a.action.disabled:focus,
 #fileList .name:focus a.action.disabled:focus,
 #fileList a.action.disabled img {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	filter: alpha(opacity=30);
+	opacity: .3;
 	display:inline;
 }
 .ie8 #fileList a.action:hover img,
@@ -600,15 +606,44 @@ a.action > img {
 #fileList tr:hover a.action:hover,
 #fileList tr:focus a.action:focus,
 #fileList .name:focus a.action:focus {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity=100);
-	opacity: 1;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+	filter: alpha(opacity=70);
+	opacity: 7;
 	display:inline;
 }
 #fileList tr a.action.disabled {
 	background: none;
 }
 
+/* show share action of shared items darker to distinguish from non-shared */
+#fileList a.action.permanent.shared-style {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
+	filter: alpha(opacity=70) !important;
+	opacity: .7 !important;
+}
+/* always show actions on mobile, not only on hover */
+#fileList a.action,
+#fileList a.action.action-menu.permanent {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
+	filter: alpha(opacity=30) !important;
+	opacity: .3 !important;
+	display: inline !important;
+}
+
+/* properly display actions in the popover menu */
+#fileList .fileActionsMenu .action {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
+	filter: alpha(opacity=50) !important;
+	opacity: .5 !important;
+}
+#fileList .fileActionsMenu .action:hover,
+#fileList .fileActionsMenu .action:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
+	filter: alpha(opacity=100) !important;
+	opacity: 1 !important;
+}
+
+
 #selectedActionsList a.download.disabled,
 #fileList tr a.action.action-download.disabled {
 	color: #000000;
diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css
index 635c24c4168..c5507a1e268 100644
--- a/apps/files/css/mobile.css
+++ b/apps/files/css/mobile.css
@@ -32,30 +32,12 @@ table td.filename .nametext {
 	width: 100%;
 }
 
-/* show share action of shared items darker to distinguish from non-shared */
-#fileList a.action.permanent.shared-style {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
-	filter: alpha(opacity=70) !important;
-	opacity: .7 !important;
-}
-/* always show actions on mobile, not only on hover */
-#fileList a.action,
-#fileList a.action.action-menu.permanent {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
-	filter: alpha(opacity=20) !important;
-	opacity: .2 !important;
-	display: inline !important;
-}
 #fileList a.action.action-menu img {
-	padding-left: 2px;
+	padding-left: 0;
 }
 
 #fileList .fileActionsMenu {
-	margin-right: 5px;
-}
-/* some padding for better clickability */
-#fileList a.action img {
-	padding: 0 6px 0 12px;
+	margin-right: 6px;
 }
 /* hide text of the share action on mobile */
 #fileList a.action-share span {
diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index 581e15caf93..b6368b901ee 100644
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -117,7 +117,7 @@ describe('OCA.Sharing.Util tests', function() {
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('Shared');
+			expect($action.find('>span').text().trim()).toEqual('Shared');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
 			expect($action.find('img').length).toEqual(1);
@@ -138,7 +138,7 @@ describe('OCA.Sharing.Util tests', function() {
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('Shared');
+			expect($action.find('>span').text().trim()).toEqual('Shared');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('public.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-public.svg');
 			expect($action.find('img').length).toEqual(1);
@@ -159,7 +159,7 @@ describe('OCA.Sharing.Util tests', function() {
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('User One');
+			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
 		});
@@ -179,7 +179,7 @@ describe('OCA.Sharing.Util tests', function() {
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('Shared with User One, User Two');
+			expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
 			expect($action.find('img').length).toEqual(1);
@@ -275,7 +275,7 @@ describe('OCA.Sharing.Util tests', function() {
 
 			OC.Share.updateIcon('file', 1);
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('Shared with Group One, Group Two, User One, User Two');
+			expect($action.find('>span').text().trim()).toEqual('Shared with Group One, Group Two, User One, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
 		it('updates share icon after updating shares of a file', function() {
@@ -311,7 +311,7 @@ describe('OCA.Sharing.Util tests', function() {
 			OC.Share.updateIcon('file', 1);
 
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('Shared with User One, User Three, User Two');
+			expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Three, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
 		it('removes share icon after removing all shares from a file', function() {
@@ -380,7 +380,7 @@ describe('OCA.Sharing.Util tests', function() {
 			OC.Share.updateIcon('file', 1);
 
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('User One');
+			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
 		it('keep share text after unsharing reshare', function() {
@@ -416,7 +416,7 @@ describe('OCA.Sharing.Util tests', function() {
 			OC.Share.updateIcon('file', 1);
 
 			expect($action.hasClass('permanent')).toEqual(true);
-			expect($action.find('>span').text()).toEqual('User One');
+			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
 	});
diff --git a/core/css/apps.css b/core/css/apps.css
index 620c3013829..17595479ae2 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -292,6 +292,7 @@
 		list-style-type: none;
 	}
 
+/* menu bubble / popover */
 .bubble,
 #app-navigation .app-navigation-entry-menu {
 	position: absolute;
@@ -302,27 +303,15 @@
 	z-index: 110;
 	margin: -5px 14px 5px 10px;
 	right: 0;
-	border: 1px solid #bbb;
 	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 }
-
-#app-navigation .app-navigation-entry-menu {
-	display: none;
-}
-
-#app-navigation .app-navigation-entry-menu.open {
-	display: block;
-}
-
 /* miraculous border arrow stuff */
 .bubble:after,
-.bubble:before,
-#app-navigation .app-navigation-entry-menu:after,
-#app-navigation .app-navigation-entry-menu:before {
+#app-navigation .app-navigation-entry-menu:after {
 	bottom: 100%;
 	right: 0; /* change this to adjust the arrow position */
 	border: solid transparent;
@@ -332,7 +321,6 @@
 	position: absolute;
 	pointer-events: none;
 }
-
 .bubble:after,
 #app-navigation .app-navigation-entry-menu:after {
 	border-color: rgba(238, 238, 238, 0);
@@ -340,13 +328,24 @@
 	border-width: 10px;
 	margin-left: -10px;
 }
+.bubble .action {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
+	filter: alpha(opacity=50) !important;
+	opacity: .5 !important;
+}
+.bubble .action:hover,
+.bubble .action:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
+	filter: alpha(opacity=100) !important;
+	opacity: 1 !important;
+}
 
-.bubble:before,
-#app-navigation .app-navigation-entry-menu:before {
-	border-color: rgba(187, 187, 187, 0);
-	border-bottom-color: #bbb;
-	border-width: 11px;
-	margin-left: -11px;
+#app-navigation .app-navigation-entry-menu {
+	display: none;
+}
+
+#app-navigation .app-navigation-entry-menu.open {
+	display: block;
 }
 
 	/* list of options for an entry */
diff --git a/core/js/share.js b/core/js/share.js
index 7e0d0b7a2d3..cd4a614e9d1 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -127,7 +127,7 @@ OC.Share={
 									if (img.attr('src') !== OC.imagePath('core', 'actions/public')) {
 										img.attr('src', image);
 										$(actions[i]).addClass('permanent');
-										$(actions[i]).html(' <span>'+t('core', 'Shared')+'</span>').prepend(img);
+										$(actions[i]).html('<span> '+t('core', 'Shared')+'</span>').prepend(img);
 									}
 								}
 								for(i = 0; i < files.length; i++) {
@@ -276,7 +276,7 @@ OC.Share={
 			else if (recipients) {
 				message = t('core', 'Shared with {recipients}', {recipients: this._formatShareList(recipients.split(", ")).join(", ")}, 0, {escape: false});
 			}
-			action.html(' <span>' + message + '</span>').prepend(img);
+			action.html('<span> ' + message + '</span>').prepend(img);
 			if (owner || recipients) {
 				action.find('.remoteAddress').tipsy({gravity: 's'});
 			}
diff --git a/core/js/tests/specs/shareSpec.js b/core/js/tests/specs/shareSpec.js
index 3dc25134f59..5a59a117d77 100644
--- a/core/js/tests/specs/shareSpec.js
+++ b/core/js/tests/specs/shareSpec.js
@@ -1132,7 +1132,7 @@ describe('OC.Share tests', function() {
 				OC.Share.markFileAsShared($file);
 
 				$action = $file.find('.action-share>span');
-				expect($action.text()).toEqual(output);
+				expect($action.text().trim()).toEqual(output);
 				if (_.isString(title)) {
 					expect($action.find('.remoteAddress').attr('title')).toEqual(title);
 				} else {
@@ -1236,7 +1236,7 @@ describe('OC.Share tests', function() {
 				OC.Share.markFileAsShared($file, true);
 
 				$action = $file.find('.action-share>span');
-				expect($action.text()).toEqual(output);
+				expect($action.text().trim()).toEqual(output);
 				if (_.isString(title)) {
 					expect($action.find('.remoteAddress').attr('title')).toEqual(title);
 				} else if (_.isArray(title)) {