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