fix(NcRichContenteditable): adjust to new design

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

src/components/NcRichContenteditable/NcAutoCompleteResult.vue

@@ -106,8 +106,10 @@ export default {
 <style lang="scss" scoped>
 .autocomplete-result {
 	display: flex;
-	height: var(--default-clickable-area);
-	padding: var(--default-grid-baseline) 0;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	line-height: 1.2;
+	--auto-complete-result-avatar-size: var(--default-clickable-area);
 
 	&__icon {
 		position: relative;
@@ -127,21 +129,22 @@ export default {
 	}
 
 	&__status {
+		--auto-complete-result-status-icon-size: clamp(14px, var(--auto-complete-result-avatar-size) * 0.4, 18px);
+		// 2 * Avatar Radius * (1 - 1 / sqrt(2)) - Status Icon Size / 2
+		--auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2);
 		box-sizing: border-box;
 		position: absolute;
-		right: -4px;
-		bottom: -4px;
-		min-width: 18px;
-		min-height: 18px;
-		width: 18px;
-		height: 18px;
+		right: var(--auto-complete-result-status-icon-position);
+		bottom: var(--auto-complete-result-status-icon-position);
+		height: var(--auto-complete-result-status-icon-size);
+		width: var(--auto-complete-result-status-icon-size);
 		border: 2px solid var(--color-main-background);
 		border-radius: 50%;
 		background-color: var(--color-main-background);
-		font-size: var(--default-font-size);
-		line-height: 15px;
+		font-size: calc(var(--auto-complete-result-status-icon-size) / 1.2);
+		line-height: 1.2;
 		background-repeat: no-repeat;
-		background-size: 16px;
+		background-size: var(--auto-complete-result-status-icon-size);
 		background-position: center;
 
 		&--icon {
@@ -156,7 +159,6 @@ export default {
 		flex-direction: column;
 		justify-content: center;
 		min-width: 0;
-		padding-left: calc(var(--default-grid-baseline) * 2);
 	}
 
 	&__title,

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -1155,27 +1155,34 @@ export default {
 .tribute-container {
 	z-index: 9000;
 	overflow: auto;
-	// Hide container root element while initialising
+	// Hide container root element while initializing
 	position: absolute;
 	left: -10000px;
 	// Space it out a bit from the text
 	margin: var(--default-grid-baseline) 0;
 	padding: var(--default-grid-baseline);
 	color: var(--color-text-maxcontrast);
-	border-radius: var(--border-radius);
+	border-radius: var(--border-radius-element, var(--border-radius));
 	background: var(--color-main-background);
 	box-shadow: 0 1px 5px var(--color-box-shadow);
 
+	&,
+	& * {
+		box-sizing: border-box;
+	}
+
+	ul {
+		display: flex;
+		flex-direction: column;
+		gap: var(--default-grid-baseline);
+	}
+
 	.tribute-container__item {
 		color: var(--color-text-maxcontrast);
-		border-radius: var(--border-radius);
-		padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
-		margin-bottom: var(--default-grid-baseline);
+		border-radius: var(--border-radius-small, var(--border-radius));
+		padding: var(--default-grid-baseline);
 		cursor: pointer;
-
-		&:last-child {
-			margin-bottom: 0;
-		}
+		min-height: var(--clickable-area-small, auto);
 
 		&:global(.highlight) {
 			color: var(--color-main-text);
@@ -1199,11 +1206,10 @@ export default {
 	max-width: 300px;
 	// Show maximum 4 entries and a half to show scroll
 	// Autocomplete height
-	// + 2 paddings around autocomplete
-	// + 2 paddings arouind tribute item
+	// + 2 paddings inside autocomplete
 	// + 1 padding gap
 	// And 1.5 paddings - container's padding without the last gap
-	max-height: calc((var(--default-clickable-area) + 5 * var(--default-grid-baseline)) * 4.5 - 1.5 * var(--default-grid-baseline));
+	max-height: calc((var(--default-clickable-area) + 3 * var(--default-grid-baseline)) * 4.5 - 1.5 * var(--default-grid-baseline));
 }
 
 .tribute-container-emoji,
@@ -1212,8 +1218,7 @@ export default {
 	max-width: 200px;
 	// Show maximum 5 entries and a half to show scroll
 	// Item height
-	// + 2 paddings around autocomplete
-	// + 2 paddings arouind tribute item
+	// + 2 paddings around tribute item
 	// + 1 padding gap
 	// And 1.5 paddings - container's padding without the last gap
 	max-height: calc((24px + 3 * var(--default-grid-baseline)) * 5.5 - 1.5 * var(--default-grid-baseline));
@@ -1223,10 +1228,6 @@ export default {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-
-		&__emoji {
-			padding-right: calc(var(--default-grid-baseline) * 2);
-		}
 	}
 }
 
@@ -1246,7 +1247,7 @@ export default {
 			width: 20px;
 			height: 20px;
 			object-fit: contain;
-			padding-right: calc(var(--default-grid-baseline) * 2);
+			padding-right: var(--default-grid-baseline);
 			filter: var(--background-invert-if-dark);
 		}
 	}