From 3e12ac5ae5730d6436af23c1323bad14e3252343 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 23 Aug 2021 19:32:09 +0200
Subject: [PATCH] [editor] Make color inputs actually color pickers
---
.../page-view/properties/element-properties.component.ts | 4 ++--
.../page-view/properties/page-properties.component.ts | 2 +-
.../page-view/properties/section-properties.component.ts | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
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 8921fa862..e744b8e0c 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
@@ -300,13 +300,13 @@ import { SelectionService } from '../../../../selection.service';
<mat-form-field *ngIf="combinedProperties.hasOwnProperty('backgroundColor')"
appearance="fill" class="mdInput textsingleline">
<mat-label>Hintergrundfarbe</mat-label>
- <input matInput type="text" [value]="combinedProperties.backgroundColor"
+ <input matInput type="color" [value]="combinedProperties.backgroundColor"
(input)="updateModel('backgroundColor', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.hasOwnProperty('fontColor')"
appearance="fill" class="mdInput textsingleline">
<mat-label>Schriftfarbe</mat-label>
- <input matInput type="text" [value]="combinedProperties.fontColor"
+ <input matInput type="color" [value]="combinedProperties.fontColor"
(input)="updateModel('fontColor', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.hasOwnProperty('font')"
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
index 91cecc240..96d07978e 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
@@ -25,7 +25,7 @@ import { SelectionService } from '../../../../selection.service';
</mat-form-field>
<mat-form-field>
<mat-label>Hintergrundfarbe</mat-label>
- <input matInput type="text"
+ <input matInput type="color"
[value]="selectedPage.backgroundColor"
(change)="updateModel('backgroundColor', $any($event.target).value)">
</mat-form-field>
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
index 94cab1fdb..bdffd6dff 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
@@ -26,7 +26,7 @@ import { MessageService } from '../../../../../../../common/message.service';
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Hintergrundfarbe</mat-label>
- <input matInput type="text"
+ <input matInput type="color"
[value]="$any(selectedPageSection.backgroundColor)"
(change)="updateModel('backgroundColor', $any($event.target).value)">
</mat-form-field>
--
GitLab