Merge pull request #8079 from nextcloud/fix/table_buttons_small

fix(table): use small buttons for table actions

Author: mejo-

playwright/e2e/print.spec.ts-snapshots/Own-file-on-ci-1-chromium-linux.png

@@ -341,12 +341,11 @@ div.ProseMirror {
 
 	table {
 		border-spacing: 0;
-		width: calc(100% - 50px - var(--default-clickable-area));
+		// Needs to be sync with `.table-add-row` button width in `TableView.vue`
+		width: calc(100% - (2 * var(--clickable-area-small)) - 8px);
 		table-layout: auto;
 		white-space: normal; // force text to wrapping
-		margin-bottom: calc(
-			var(--clickable-area-small) + var(--default-clickable-area)
-		);
+		margin-bottom: calc(var(--clickable-area-small) + 8px);
 		& + * {
 			margin-top: 1em;
 		}

playwright/e2e/print.spec.ts-snapshots/Shared-file-on-ci-1-chromium-linux.png

@@ -7,7 +7,7 @@
 	<NodeViewWrapper data-text-el="table-cell" as="td" :dir="dir" :style="textAlign">
 		<div class="container">
 			<NodeViewContent class="content" />
-			<NcActions v-if="isEditable" data-text-table-actions="row">
+			<NcActions v-if="isEditable" data-text-table-actions="row" size="small">
 				<NcActionButton
 					data-text-table-action="add-row-before"
 					close-after-click
@@ -141,10 +141,10 @@ td {
 
 	.action-item {
 		position: absolute;
-		right: -48px;
+		right: calc((var(--clickable-area-small) * -1) - 4px);
 		flex: 0 1 auto;
 		display: none;
-		top: 2px;
+		top: calc((var(--default-clickable-area) - var(--clickable-area-small)) / 2);
 	}
 
 	&:last-child {

src/css/prosemirror.scss

@@ -14,6 +14,7 @@
 			<NcActions
 				v-if="isEditable"
 				ref="menu"
+				size="small"
 				variant="tertiary-no-background"
 				data-text-table-actions="header">
 				<NcActionButtonGroup>
@@ -214,6 +215,7 @@ th {
 	}
 
 	.action-item {
+		top: calc((var(--default-clickable-area) - var(--clickable-area-small)) / 2);
 		opacity: 50%;
 	}
 

src/nodes/Table/TableCellView.vue

@@ -11,6 +11,7 @@
 		<NcActions
 			v-if="isEditable"
 			force-menu
+			size="small"
 			data-text-table-actions="settings"
 			class="table-settings">
 			<template #icon>
@@ -30,6 +31,7 @@
 		<NcButton
 			v-if="isEditable"
 			class="table-add-column"
+			size="small"
 			:aria-label="t('text', 'Add column after')"
 			:title="t('text', 'Add column after')"
 			@click="addColumnAfter">
@@ -40,6 +42,7 @@
 		<NcButton
 			v-if="isEditable"
 			class="table-add-row"
+			size="small"
 			:aria-label="t('text', 'Add row below')"
 			:title="t('text', 'Add row below')"
 			@click="addRowAfter">
@@ -154,8 +157,8 @@ export default {
 		padding-left: 3px;
 		opacity: 0.5;
 		position: absolute;
-		top: 0;
-		right: var(--default-clickable-area);
+		top: calc((var(--default-clickable-area) - var(--clickable-area-small)) / 2);
+		right: calc(var(--clickable-area-small) + 4px);
 
 		&:hover {
 			opacity: 1;
@@ -169,7 +172,7 @@ export default {
 		position: absolute;
 		top: var(--default-clickable-area);
 		right: 0;
-		bottom: 60px;
+		bottom: calc(var(--clickable-area-small) + 8px);
 		margin-top: 0 !important;
 
 		&:hover {
@@ -183,8 +186,9 @@ export default {
 		opacity: 0.5;
 		position: absolute;
 		left: 0;
-		bottom: 12px;
-		width: calc(100% - 80px) !important;
+		bottom: 4px;
+		// Needs to be in sync with table width in `prosemirror.css`
+		width: calc(100% - (2 * var(--clickable-area-small)) - 8px) !important;
 
 		&:hover {
 			opacity: 1;