fix: Align interactive toggle button on top of widgets

Signed-off-by: Julius Härtl <[email protected]>
nextcloud-libraries · Mar 4, 2024 · cd572fb · cd572fb
1 parent 09c2b57
commit cd572fb
Showing 1 changed file with 29 additions and 5 deletions.
diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="{'toggle-interactive': hasInteractiveView && !isInteractive }">
 		<div v-if="reference && hasCustomWidget" ref="customWidget" class="widget-custom" />
 
 		<component :is="referenceWidgetLinkComponent"
@@ -9,12 +9,18 @@
 			class="widget-default">
 			<img v-if="reference.openGraphObject.thumb" class="widget-default--image" :src="reference.openGraphObject.thumb">
 			<div class="widget-default--details">
-				<p class="widget-default--name">{{ reference.openGraphObject.name }}</p>
-				<p class="widget-default--description" :style="descriptionStyle">{{ reference.openGraphObject.description }}</p>
-				<p class="widget-default--link">{{ compactLink }}</p>
+				<p class="widget-default--name">
+					{{ reference.openGraphObject.name }}
+				</p>
+				<p class="widget-default--description" :style="descriptionStyle">
+					{{ reference.openGraphObject.description }}
+				</p>
+				<p class="widget-default--link">
+					{{ compactLink }}
+				</p>
 			</div>
 		</component>
-		<NcButton v-if="hasInteractiveView && !isInteractive" @click="enableInteractive">
+		<NcButton v-if="hasInteractiveView && !isInteractive" class="toggle-interactive--button" @click="enableInteractive">
 			Enable interative mode
 		</NcButton>
 	</div>
@@ -245,4 +251,22 @@ export default {
 		white-space: nowrap;
 	}
 }
+
+.toggle-interactive {
+	position: relative;
+	.toggle-interactive--button {
+		position: absolute;
+		top: 50%;
+		z-index: 10000;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+		opacity: 0;
+	}
+
+	&:focus-within, &:hover {
+		.toggle-interactive--button {
+			opacity: 1;
+		}
+	}
+}
 </style>