From 670f383fa53feada4509fa26b672f9528cc8019a Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Tue, 30 Aug 2022 12:07:27 +0200
Subject: avoid image caption offset when delete icon appears

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 src/nodes/ImageView.vue | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

(limited to 'src/nodes/ImageView.vue')

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index b391802e8..218ef33c7 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -74,21 +74,23 @@
 				</transition>
 				<transition name="fade">
 					<div v-show="loaded" class="image__caption">
-						<input v-show="!isMediaAttachment"
-							ref="altInput"
-							type="text"
-							class="image__caption__input"
-							:value="alt"
-							@keyup.enter="updateAlt">
-						<div v-if="showImageDeleteIcon"
-							class="image__caption__delete">
-							<NcButton :aria-label="t('text', 'Delete this image')"
-								:title="t('text', 'Delete this image')"
-								@click="deleteNode">
-								<template #icon>
-									<DeleteIcon />
-								</template>
-							</NcButton>
+						<div class="image__caption__wrapper">
+							<input v-show="!isMediaAttachment"
+								ref="altInput"
+								type="text"
+								class="image__caption__input"
+								:value="alt"
+								@keyup.enter="updateAlt">
+							<div v-if="showImageDeleteIcon"
+								class="image__caption__delete">
+								<NcButton :aria-label="t('text', 'Delete this image')"
+									:title="t('text', 'Delete this image')"
+									@click="deleteNode">
+									<template #icon>
+										<DeleteIcon />
+									</template>
+								</NcButton>
+							</div>
 						</div>
 					</div>
 				</transition>
@@ -295,7 +297,6 @@ export default {
 		loadMediaMetadata(name) {
 			const metadataUrl = this.$attachmentResolver.getMediaMetadataUrl(name)
 			return axios.get(metadataUrl).then((response) => {
-				console.debug('response', response.data)
 				this.attachmentMetadata = response.data
 			}).catch((error) => {
 				console.error(error)
@@ -340,6 +341,9 @@ export default {
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		&__wrapper {
+			position: relative;
+		}
 		input[type='text'] {
 			width: 200px;
 			max-width: 80%;
@@ -429,7 +433,9 @@ export default {
 		align-items: center;
 		width: 20px;
 		height: 20px;
-		margin-left: 8px;
+		position: absolute;
+		right: -6px;
+		bottom: 10px;
 		&, svg {
 			cursor: pointer;
 		}
-- 
cgit v1.2.3