From c1b68812401bd7acb473f03befbe04cb74696ccd Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 7 Oct 2021 16:44:10 +0200
Subject: [PATCH] [editor] Allow images for buttons
This replaces the label text with an image, which can be uploaded.
---
projects/common/element-components/button.component.ts | 5 ++++-
projects/common/unit.ts | 1 +
.../properties/element-properties.component.html | 9 +++++++++
.../page-view/properties/element-properties.component.ts | 8 ++++++++
4 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index ca4c613c1..ec2be98c2 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -5,7 +5,7 @@ import { ButtonElement } from '../unit';
@Component({
selector: 'app-button',
template: `
- <button mat-button
+ <button *ngIf="!elementModel.imageSrc" mat-button
(focusin)="onFocusin.emit()"
[style.width.%]="100"
[style.height.%]="100"
@@ -18,6 +18,9 @@ import { ButtonElement } from '../unit';
[style.text-decoration]="elementModel.underline ? 'underline' : ''">
{{elementModel.label}}
</button>
+ <input *ngIf="elementModel.imageSrc" type="image" [src]="elementModel.imageSrc"
+ [width]="elementModel.width" [height]="elementModel.height"
+ [style.object-fit]="'scale-down'" alt="Bild nicht gefunden">
`
})
export class ButtonComponent extends ElementComponent {
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index a5e0ba089..65dbd7352 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -83,6 +83,7 @@ export interface TextElement extends SurfaceUIElement {
export interface ButtonElement extends TextUIElement, SurfaceUIElement {
label: string;
+ imageSrc?: string;
action: undefined | 'previous' | 'next' | 'end';
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
index bc6db46b9..4f616d4ec 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
@@ -25,6 +25,15 @@
</div>
</ng-container>
+ <div *ngIf="combinedProperties.type === 'button'">
+ <input #imageUpload type="file" hidden (click)="loadImage()">
+ <button mat-raised-button (click)="imageUpload.click()">Bild laden</button>
+ <button mat-raised-button (click)="removeImage()">Bild entfernen</button>
+ <img [src]="combinedProperties.imageSrc"
+ [style.object-fit]="'scale-down'"
+ [width]="200">
+ </div>
+
<mat-form-field *ngIf="combinedProperties.appearance" appearance="fill">
<mat-label>Aussehen</mat-label>
<mat-select [value]="combinedProperties.appearance"
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
index 0ff662218..829ac3d3c 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
@@ -127,4 +127,12 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
valueList.splice(valueList.indexOf(option), 1);
this.updateModel(property, valueList);
}
+
+ async loadImage(): Promise<void> {
+ this.updateModel('imageSrc', await FileService.loadImage());
+ }
+
+ removeImage(): void {
+ this.updateModel('imageSrc', undefined);
+ }
}
--
GitLab