Merge pull request #6153 from nextcloud-libraries/backport/6151/next

[next] feat(NcRichText): make interactive widgets opt-in
nextcloud-libraries · Oct 20, 2024 · 9095819 · 9095819
2 parents 362ef4c + ce566dd
commit 9095819
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/src/components/NcRichText/NcReferenceList.vue b/src/components/NcRichText/NcReferenceList.vue
@@ -5,9 +5,11 @@
 
 <template>
 	<div v-if="isVisible" class="widgets--list" :class="{'icon-loading': loading }">
-		<div v-for="reference in displayedReferences" :key="reference?.openGraphObject?.id">
-			<NcReferenceWidget :reference="reference" :interactive="interactive" :interactive-opt-in="interactiveOptIn" />
-		</div>
+		<NcReferenceWidget v-for="reference in displayedReferences"
+			:key="reference?.openGraphObject?.id"
+			:reference="reference"
+			:interactive="interactive"
+			:interactive-opt-in="interactiveOptIn" />
 	</div>
 </template>
 <script>
@@ -147,11 +149,8 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.widget--list {
-	width: var(--widget-full-width, 100%);
-}
-
-.widgets--list.icon-loading {
+.widgets--list {
+	width: 100%;
 	min-height: var(--default-clickable-area);
 }
 </style>
diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
@@ -229,7 +229,7 @@ export default {
 	margin-top: calc(var(--default-grid-baseline, 4px) * 3);
 	overflow: hidden;
 	border: 2px solid var(--color-border);
-	border-radius: var(--border-radius-large);
+	border-radius: var(--border-radius-container);
 	background-color: transparent;
 	display: flex;
 }
@@ -317,17 +317,9 @@ export default {
 	position: relative;
 	.toggle-interactive--button {
 		position: absolute;
-		top: 50%;
+		bottom: var(--default-grid-baseline);
+		right: var(--default-grid-baseline);
 		z-index: 10000;
-		left: 50%;
-		transform: translateX(-50%) translateY(-50%);
-		opacity: 0;
-	}
-
-	&:focus-within, &:hover {
-		.toggle-interactive--button {
-			opacity: 1;
-		}
 	}
 }
 </style>
diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
@@ -331,6 +331,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		referenceInteractiveOptIn: {
+			type: Boolean,
+			default: false,
+		},
 		/** Provide data upfront to avoid extra http request */
 		references: {
 			type: Object,
@@ -418,6 +422,7 @@ export default {
 							text: this.text,
 							referenceData: this.references,
 							interactive: this.referenceInteractive,
+							interactiveOptIn: this.referenceInteractiveOptIn,
 						}),
 					])
 					: null,
@@ -469,6 +474,7 @@ export default {
 							text: this.text,
 							referenceData: this.references,
 							interactive: this.referenceInteractive,
+							interactiveOptIn: this.referenceInteractiveOptIn,
 						}),
 					])
 					: null,