From c8d87ff9741c1aed8cd6f90cf526742329118540 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 19 Nov 2021 01:01:25 +0100
Subject: [PATCH] Refactor button component structure and re-enable event
propagation
---
.../element-components/button.component.ts | 52 +++++++++----------
1 file changed, 24 insertions(+), 28 deletions(-)
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index 00a3c3a64..06d34e904 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -1,37 +1,33 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ElementComponent } from '../element-component.directive';
import { ButtonElement } from '../models/button-element';
@Component({
selector: 'app-button',
template: `
- <div [style.display]="'flex'"
- [style.width.%]="100"
- [style.height.%]="100">
- <button *ngIf="!elementModel.imageSrc" mat-button
- [style.width.%]="100"
- [style.height.%]="100"
- [style.background-color]="elementModel.backgroundColor"
- [style.color]="elementModel.fontColor"
- [style.font-family]="elementModel.font"
- [style.font-size.px]="elementModel.fontSize"
- [style.font-weight]="elementModel.bold ? 'bold' : ''"
- [style.font-style]="elementModel.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.underline ? 'underline' : ''"
- [style.border-radius.px]="elementModel.borderRadius"
- (click)="onClick($event, elementModel.action)">
- {{elementModel.label}}
- </button>
- <input *ngIf="elementModel.imageSrc" type="image"
- [src]="elementModel.imageSrc | safeResourceUrl"
- [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'"
- [alt]="'imageNotFound' | translate"
- (click)="onClick($event, elementModel.action)">
- </div>
+ <button *ngIf="!elementModel.imageSrc" mat-button
+ [style.width.%]="100"
+ [style.height.%]="100"
+ [style.background-color]="elementModel.backgroundColor"
+ [style.color]="elementModel.fontColor"
+ [style.font-family]="elementModel.font"
+ [style.font-size.px]="elementModel.fontSize"
+ [style.font-weight]="elementModel.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ [style.border-radius.px]="elementModel.borderRadius"
+ (click)="onClick($event, elementModel.action)">
+ {{elementModel.label}}
+ </button>
+ <input *ngIf="elementModel.imageSrc" type="image"
+ [src]="elementModel.imageSrc | safeResourceUrl"
+ [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'"
+ [alt]="'imageNotFound' | translate"
+ (click)="onClick($event, elementModel.action)">
`,
styles: [
- '.dynamic-image{width: 100%; height: fit-content}',
- '.static-image{ width: 100%; height: 100%; object-fit: contain}'
+ '.dynamic-image {width: 100%; height: fit-content}',
+ '.static-image {width: 100%; height: 100%; object-fit: contain}'
]
})
export class ButtonComponent extends ElementComponent {
@@ -42,7 +38,7 @@ export class ButtonComponent extends ElementComponent {
if (action) {
this.navigationRequested.emit(action);
}
- event.stopPropagation();
- event.preventDefault();
+ // event.stopPropagation();
+ // event.preventDefault(); TODO
};
}
--
GitLab