diff options
| author | Julien Veyssier <eneiluj@posteo.net> | 2022-08-30 13:07:27 +0300 |
|---|---|---|
| committer | Julien Veyssier <eneiluj@posteo.net> | 2022-09-06 15:44:54 +0300 |
| commit | 670f383fa53feada4509fa26b672f9528cc8019a (patch) | |
| tree | 6e012d19338106551535d9ffb805fcd1e1710a5b | |
| parent | 82b41eb238330089d9ab29c2373517f22efd04d2 (diff) | |
avoid image caption offset when delete icon appears
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
| -rw-r--r-- | src/nodes/ImageView.vue | 40 |
1 files changed, 23 insertions, 17 deletions
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; } |