From 2816d5abf9638cb31bfccb1a0521ab4833c0f762 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 18 Oct 2021 09:58:32 +0200
Subject: [PATCH] [player] Improve scaling of images and button images
---
projects/common/assets/i18n/de.json | 3 ++-
.../common/element-components/button.component.ts | 14 +++++++++-----
.../common/element-components/image.component.ts | 12 +++++++-----
3 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/projects/common/assets/i18n/de.json b/projects/common/assets/i18n/de.json
index 52227b038..94df8aca9 100644
--- a/projects/common/assets/i18n/de.json
+++ b/projects/common/assets/i18n/de.json
@@ -7,5 +7,6 @@
"inputTooShort": "Eingabe zu kurz",
"inputTooLong": "Eingabe zu lang",
"wrongPattern": "Eingabe enthält falsche Zeichen"
- }
+ },
+ "imageNotFound": "Bild nicht gefunden"
}
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index f616ff0b5..30db5ad0b 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -22,12 +22,16 @@ import { ButtonElement } from '../models/button-element';
[style.border-radius.px]="elementModel.borderRadius">
{{elementModel.label}}
</button>
- <input *ngIf="elementModel.imageSrc" type="image" [src]="elementModel.imageSrc"
- [style.width.%]="100"
- [style.height.%]="100"
- [style.object-fit]="'contain'" alt="Bild nicht gefunden">
+ <input *ngIf="elementModel.imageSrc" type="image"
+ [src]="elementModel.imageSrc | safeResourceUrl"
+ [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'"
+ [alt]="'imageNotFound' | translate">
</div>
- `
+ `,
+ styles: [
+ '.dynamic-image{width: 100%; height: fit-content}',
+ '.static-image{ width: 100%; height: 100%; object-fit: contain}'
+ ]
})
export class ButtonComponent extends ElementComponent {
@Output() onFocusin = new EventEmitter();
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index 4f3cac573..ee0bfc8f4 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -9,12 +9,14 @@ import { ImageElement } from '../models/image-element';
[style.height.%]="100"
[style.width.%]="100">
<img [src]="elementModel.src | safeResourceUrl"
- alt="Image Placeholder"
- [style.object-fit]="'contain'"
- [style.height.%]="100"
- [style.width.%]="100">
+ [alt]="'imageNotFound' | translate"
+ [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'">
</div>
- `
+ `,
+ styles: [
+ '.dynamic-image{width: 100%; height: fit-content}',
+ '.static-image{ width: 100%; height: 100%; object-fit: contain}'
+ ]
})
export class ImageComponent extends ElementComponent {
elementModel!: ImageElement;
--
GitLab