Merge pull request #7064 from nextcloud/popover-fix

Fix popover layout

apps/files/css/files.scss

@@ -547,46 +547,49 @@ a.action > img {
 	margin-bottom: -1px;
 }
 
-#fileList a.action {
+#fileList td a {
+	a.action {
 		display: inline;
 		padding: 17px 8px;
 		line-height: 50px;
-	opacity: 0;
-}
-#fileList a.action.action-share {
+		opacity: .3;
+		&.action-share {
 			padding: 17px 14px;
-}
-#fileList a.action.action-share .avatar {
+			.avatar {
 				display: inline-block;
 				vertical-align: middle;
 			}
-
-#fileList a.action.action-menu {
+		}
+		&.action-menu {
 			padding-top: 17px;
 			padding-bottom: 17px;
 			padding-left: 14px;
 			padding-right: 14px;
 		}
-
-#fileList a.action,
-#fileList a.action.no-permission:hover,
-#fileList a.action.no-permission:focus,
-/* also enforce the low opacity for disabled links that are hovered/focused */
-#fileList a.action.disabled:hover,
-#fileList a.action.disabled:focus,
-#fileList a.action.disabled img {
+		&.no-permission {
+			&:hover, &:focus {
 				opacity: .3;
 			}
-
-#fileList a.action.disabled.action-download,
-#fileList a.action.disabled.action-download:hover,
-#fileList a.action.disabled.action-download:focus,
-#fileList a.action:hover,
-#fileList a.action:focus,
-#fileList .fileActionsMenu a.action,
-/* show share action of shared items darker to distinguish from non-shared */
-#fileList a.action.action-share.shared-style {
+		}
+		&.disabled {
+			&:hover, &:focus,
+			img {
+				opacity: .3;
+			}
+			&.action-download {
 				opacity: .7;
+				&:hover, &:focus {
+					opacity: .7;
+				}
+			}
+		}
+		&:hover, &:focus {
+			opacity: .7;
+		}
+	}
+	.fileActionsMenu a.action, a.action.action-share.shared-style {
+		opacity: .7;
+	}
 }
 
 // Ellipsize long sharer names

apps/files_sharing/css/sharetabview.scss

@@ -79,24 +79,16 @@
 	align-items: center;
 }
 
-#shareWithList .unshare img, #shareWithList .showCruds img {
+#shareWithList .unshare img {
 	vertical-align: text-bottom; /* properly align icons */
 }
 
-#shareWithList .sharingOptionsGroup .icon-more {
+#shareWithList .sharingOptionsGroup > a .icon {
 	padding: 7px;
 	vertical-align: middle;
 	opacity: .5;
 }
 
-#shareWithList .unshare {
-	padding: 1px 6px;
-	vertical-align: text-bottom;
-}
-#shareWithList .unshare .icon {
-	vertical-align: text-top;
-}
-
 #shareWithList .sharingOptionsGroup .popovermenu:after {
 	right: 3px;
 }
@@ -122,7 +114,6 @@
 .shareTabView .icon-loading-small {
 	display: inline-block;
 	z-index: 1;
-	margin-right: 4px;
 	vertical-align: text-top;
 }
 

core/css/apps.scss

@@ -837,8 +837,28 @@ kbd {
 			font-weight: 300;
 			box-shadow: none;
 			width: 100%;
+			color: $color-main-text;
 			/* Override the app-navigation li opacity */
 			opacity: .7 !important;
+			[class^='icon-'],
+			[class*=' icon-'],
+			&[class^='icon-'],
+			&[class*=' icon-'] {
+				min-width: 0; /* Overwrite icons*/
+				min-height: 0;
+				background-position: 10px center;
+				background-size: 16px;
+			}
+			[class^='icon-'],
+			[class*=' icon-'] {
+				/* Keep padding to define the width to
+				 assure correct position of a possible text */
+				padding: 18px 0 18px 36px;
+			}
+			&[class^='icon-'],
+			&[class*=' icon-'] {
+				padding: 0 10px 0 36px !important;
+			}
 			&:hover, &:focus, &.active {
 				opacity: 1 !important;
 			}
@@ -857,7 +877,6 @@ kbd {
 			}
 			/* Add padding if contains icon+text */
 			&:not(:empty) {
-				padding: 0 !important;
 				padding-right: 10px !important;
 			}
 			> img {
@@ -870,15 +889,19 @@ kbd {
 					margin: -2px 12px 0;
 				}
 			}
-		}
-		[class^='icon-'],
-		[class*=' icon-']{
-			/* Keep padding to define the width to
-			 assure correct position of a possible text */
-			padding: 18px 0 18px 36px;
-			min-width: 0; /* Overwrite icons*/
-			min-height: 0;
-			background-position: 10px center;
+			> input.radio + label {
+				padding: 0 !important;
+				&::before {
+					margin: -2px 11px 0;
 				}
 			}
 		}
+		> button {
+			padding: 0;
+			span {
+				opacity: 1;
+			}
+		}
+
+	}
+}

core/css/share.scss

@@ -104,7 +104,6 @@
 		.popovermenu {
 			right: -11px;
 			top: 35px;
-			padding: 3px 6px;
 		}
 	}
 
@@ -112,8 +111,7 @@
 		white-space: nowrap;
 		display: inline-block;
 	}
-	.unshare img,
-	.showCruds img {
+	.unshare img {
 		vertical-align: text-bottom;
 		/* properly align icons */
 	}
@@ -132,22 +130,6 @@
 	}
 }
 
-a {
-	&.showCruds {
-		display: inline;
-		opacity: .5;
-	}
-	&.unshare {
-		display: inline-block;
-		opacity: .5;
-		padding: 10px;
-	}
-	&.showCruds:hover,
-	&.unshare:hover {
-		opacity: 1;
-	}
-}
-
 #link {
 	border-top: 1px solid nc-darken($color-main-background, 14%);
 	padding-top: 8px;

core/js/tests/specs/sharedialogshareelistview.js

@@ -122,20 +122,6 @@ describe('OC.Share.ShareDialogShareeListView', function () {
 			expect(listView.$el.find("input[name='edit']").is(':checked')).toEqual(true);
 			expect(updateShareStub.calledOnce).toEqual(true);
 		});
-
-		it('shows cruds checkboxes when toggled', function () {
-			shareModel.set('shares', [{
-				id: 100,
-				item_source: 123,
-				permissions: 1,
-				share_type: OC.Share.SHARE_TYPE_USER,
-				share_with: 'user1',
-				share_with_displayname: 'User One'
-			}]);
-			listView.render();
-			listView.$el.find('a.showCruds').click();
-			expect(listView.$el.find('li.cruds').hasClass('hidden')).toEqual(false);
-		});
 	});
 
 });