From f5ac7a5be691651a5a5fe1eb4b4b749f7617f90a Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 25 Oct 2021 14:43:56 +0200
Subject: [PATCH] Give likert element styling properties
Colors and font stuff.
---
.../compound-elements/likert.component.ts | 10 +++++++++-
.../compound-elements/likert-element.ts | 19 +++++++++++++++----
2 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/projects/common/element-components/compound-elements/likert.component.ts b/projects/common/element-components/compound-elements/likert.component.ts
index f97a7ae1e..9d29ee0e6 100644
--- a/projects/common/element-components/compound-elements/likert.component.ts
+++ b/projects/common/element-components/compound-elements/likert.component.ts
@@ -6,7 +6,15 @@ import { LikertElement } from '../../models/compound-elements/likert-element';
selector: 'app-likert',
template: `
<div class="mat-typography"
- [style.display]="'grid'" [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.answers.length)">
+ [style.display]="'grid'" [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.answers.length)"
+ [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.height.px]="100">
<div class="headings" [style.display]="'grid'"
[style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.answers.length)"
[style.grid-column-start]="1"
diff --git a/projects/common/models/compound-elements/likert-element.ts b/projects/common/models/compound-elements/likert-element.ts
index 18a67c9a1..f9991f5ce 100644
--- a/projects/common/models/compound-elements/likert-element.ts
+++ b/projects/common/models/compound-elements/likert-element.ts
@@ -1,20 +1,31 @@
import { UIElement } from '../uI-element';
import { LikertElementRow } from './likert-element-row';
-import { AnswerOption } from '../../interfaces/UIElementInterfaces';
+import { AnswerOption, FontElement, SurfaceUIElement } from '../../interfaces/UIElementInterfaces';
+import { initFontElement, initSurfaceElement } from '../../util/unit-interface-initializer';
-export class LikertElement extends UIElement {
+export class LikertElement extends UIElement implements FontElement, SurfaceUIElement {
questions: LikertElementRow[] = [];
-
answers: AnswerOption[] = [];
-
lineColoring: boolean = true;
+ fontColor: string = 'black';
+ font: string = 'Roboto';
+ fontSize: number = 18;
+ bold: boolean = false;
+ italic: boolean = false;
+ underline: boolean = false;
+
+ backgroundColor: string = 'transparent';
+
constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
super(serializedElement, coordinates);
Object.assign(this, serializedElement);
+ Object.assign(this, initFontElement(serializedElement));
+ Object.assign(this, initSurfaceElement(serializedElement));
this.height = serializedElement.height || 200;
this.width = serializedElement.width || 400;
+ this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
}
setProperty(property: string, value: string | number | boolean | string[] | AnswerOption[] | null): void {
--
GitLab