🚸 (#2463): improve ux

change error icon and color and move error message

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

1 files changed, 17 insertions, 11 deletions

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
index 5d65f0106..7d2f8689d 100644
--- a/src/nodes/ImageView.vue
+++ b/src/nodes/ImageView.vue
@@ -26,9 +26,6 @@
 			data-component="image-view"
 			:class="{'icon-loading': !loaded, 'image-view--failed': failed}"
 			:data-src="src">
-			<small v-if="errorMessage" class="image__error-message">
-				{{ errorMessage }}
-			</small>
 			<div v-if="canDisplayImage"
 				v-click-outside="() => showIcons = false"
 				class="image__view"
@@ -43,7 +40,7 @@
 							@load="onLoaded">
 					</template>
 					<template v-else>
-						<ImageBroken class="image__main image__main--broken-icon" :size="100" />
+						<ImageIcon class="image__main image__main--broken-icon" :size="100" />
 					</template>
 				</transition>
 				<transition name="fade">
@@ -52,7 +49,7 @@
 							type="text"
 							class="image__caption__input"
 							:value="alt"
-							@keyup.enter="updateAlt()">
+							@keyup.enter="updateAlt">
 						<div v-if="editor.isEditable && showIcons"
 							class="image__caption__delete"
 							title="Delete this image"
@@ -79,6 +76,9 @@
 					</div>
 				</transition>
 			</div>
+			<small v-if="errorMessage" class="image__error-message">
+				{{ errorMessage }}
+			</small>
 		</div>
 	</NodeViewWrapper>
 </template>
@@ -88,7 +88,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NodeViewWrapper } from '@tiptap/vue-2'
 import ClickOutside from 'vue-click-outside'
 // import TrashCanIcon from 'vue-material-design-icons/TrashCan.vue'
-import { ImageBroken, TrashCan } from '../components/icons.js'
+import { Image as ImageIcon, TrashCan } from '../components/icons.js'
 import store from './../mixins/store.js'
 import { useImageResolver } from './../components/EditorWrapper.provider.js'
 
@@ -124,7 +124,7 @@ const getQueryVariable = (src, variable) => {
 class ErrorLoadImage extends Error {
 
 	constructor(reason, imageUrl) {
-		super(reason?.message || t('text', 'Fail to load image'))
+		super(reason?.message || t('text', 'Failed to load'))
 		this.reason = reason
 		this.imageUrl = imageUrl
 	}
@@ -134,7 +134,7 @@ class ErrorLoadImage extends Error {
 export default {
 	name: 'ImageView',
 	components: {
-		ImageBroken,
+		ImageIcon,
 		TrashCan,
 		NodeViewWrapper,
 	},
@@ -255,9 +255,15 @@ export default {
 			this.imageLoaded = false
 			this.loaded = true
 			this.errorMessage = err.message
+
+			if (err instanceof ErrorLoadImage) {
+				this.errorMessage = `${this.errorMessage} [${this.src}]`
+			}
 		},
-		updateAlt() {
-			this.alt = this.$refs.altInput.value
+		updateAlt(event) {
+			this.updateAttributes({
+				alt: event.target.value,
+			})
 		},
 		onLoaded() {
 			this.loaded = true
@@ -294,7 +300,7 @@ export default {
 	}
 
 	.image__main--broken-icon, .image__error-message {
-		color: var(--color-error);
+		color: var(--color-text-maxcontrast);
 	}
 
 	.image__view {