From 3b0dc0f75bd0956f2fa9582e3d0e72bb58673557 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 20 Aug 2024 10:23:00 +0200
Subject: [PATCH] fix(NcRichContenteditable): adjust to new design

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../NcAutoCompleteResult.vue                  | 26 +++++++------
 .../NcRichContenteditable.vue                 | 39 ++++++++++---------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
index dc90779c45..0ca13e0eaa 100644
--- a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
+++ b/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);
+		// Avatar Radius * (1 - 1 / sqrt(2)) - Status Icon Radius / 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,
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index d16097c110..c5f4c59181 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/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);
 		}
 	}