From 01378476ec36caba98cebd874b340885609053ab Mon Sep 17 00:00:00 2001
From: Sergej Hoffmann <97111299+SevenWaysDP@users.noreply.github.com>
Date: Fri, 12 Jan 2024 08:49:58 +0100
Subject: [PATCH 01/17] BC-5733 - Provide broken image if preview not possible
(#2995)
---
src/assets/img/image-not-available.svg | 6 ++
src/assets/img/index.d.ts | 4 +
.../image-display/ImageDisplay.unit.ts | 11 +++
.../display/image-display/ImageDisplay.vue | 18 ++++-
.../ui-preview-image/PreviewImage.unit.ts | 79 ++++++++++++++++---
.../ui-preview-image/PreviewImage.vue | 70 +++++++++++-----
src/locales/de.json | 1 +
src/locales/en.json | 1 +
src/locales/es.json | 1 +
src/locales/uk.json | 1 +
10 files changed, 160 insertions(+), 32 deletions(-)
create mode 100644 src/assets/img/image-not-available.svg
diff --git a/src/assets/img/image-not-available.svg b/src/assets/img/image-not-available.svg
new file mode 100644
index 0000000000..1bd0fd0157
--- /dev/null
+++ b/src/assets/img/image-not-available.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/img/index.d.ts b/src/assets/img/index.d.ts
index db84834359..1294355bfd 100644
--- a/src/assets/img/index.d.ts
+++ b/src/assets/img/index.d.ts
@@ -2,3 +2,7 @@ declare module "@/assets/img/tldraw.png" {
const value: string;
export default value;
}
+declare module "@/assets/img/image-not-available.svg" {
+ const value: string;
+ export default value;
+}
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index 1c64afce5e..a7419c89bb 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -92,6 +92,17 @@ describe("ImageDisplay", () => {
);
});
+ describe("when preview image emits error", () => {
+ it("should disable color overlay", async () => {
+ const { wrapper } = setup({ isEditMode: false });
+ const previewImage = wrapper.find("previewimage-stub");
+ await previewImage.vm.$emit("error");
+
+ const colorOverlay = wrapper.findComponent(ColorOverlay);
+ expect(colorOverlay.props("isOverlayDisabled")).toBe(true);
+ });
+ });
+
describe("when alternative text is defined", () => {
it("should have set alt correctly", () => {
const alternativeText = "alternative text";
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index cfc15a52a4..c3df0ff39c 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -1,6 +1,6 @@
@@ -9,6 +9,7 @@
:alt="alternativeText"
:contain="true"
class="rounded-t"
+ @error="onImageError"
/>