From bf8e5732b1e8bad886ea06d891ff2f7ee1ca8a88 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 16 Dec 2021 09:51:41 +0100
Subject: [PATCH] Implement 'fixedSize' for button components with images

---
 projects/common/ui-elements/button/button.component.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index b49022a63..38660b637 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -26,14 +26,21 @@ import { ButtonElement } from './button-element';
     </button>
     <input *ngIf="elementModel.imageSrc" type="image"
            [src]="elementModel.imageSrc | safeResourceUrl"
+           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+                                    elementModel.positionProps.fixedSize"
+           [class.fixed-size-dynamic-image]="elementModel.positionProps.dynamicPositioning &&
+                                    elementModel.positionProps.fixedSize"
            [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
+           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : null"
+           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : null"
            [alt]="'imageNotFound' | translate"
            (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
   `,
   styles: [
     '.dynamic-image {width: 100%; height: fit-content;}',
     '.static-image {width: 100%; height: 100%; object-fit: contain;}',
-    '.center-content {display: block; margin: auto; top: 50%; transform: translateY(-50%);}'
+    '.center-content {display: block; margin: auto; top: 50%; transform: translateY(-50%);}',
+    '.fixed-size-dynamic-image {position: relative; object-fit: scale-down;}'
   ]
 })
 export class ButtonComponent extends ElementComponent {
-- 
GitLab