From 0e1fb4324cebee31f805e7111f33fabfbe498a3e Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 20 Jan 2022 10:03:34 +0100
Subject: [PATCH] [player] Change the background color of the selection when
marking
---
.../marking-bar/marking-bar.component.ts | 40 +++++++++++--------
.../marking-bar/marking-button.component.ts | 6 +--
.../common/ui-elements/text/text.component.ts | 33 ++++++++++++---
.../floating-marking-bar.component.html | 2 +-
.../floating-marking-bar.component.ts | 1 +
5 files changed, 56 insertions(+), 26 deletions(-)
diff --git a/projects/common/components/marking-bar/marking-bar.component.ts b/projects/common/components/marking-bar/marking-bar.component.ts
index d76bff458..9d8895b6d 100644
--- a/projects/common/components/marking-bar/marking-bar.component.ts
+++ b/projects/common/components/marking-bar/marking-bar.component.ts
@@ -8,27 +8,27 @@ import { TextElement } from '../../ui-elements/text/text-element';
template: `
<div class="marking-bar">
<app-marking-button *ngIf="elementModel.highlightableYellow"
- [color]="'#f9f871'"
- [selected]="selectedColor === '#f9f871'"
+ [color]="selectionColors.yellow"
+ [selected]="selectedColor === selectionColors.yellow"
mode="mark"
- (selectedChange)="onSelectionChange($event)">
+ (selectedChanged)="onSelectionChange($event)">
</app-marking-button>
<app-marking-button *ngIf="elementModel.highlightableTurquoise"
- [color]="'#9de8eb'"
- [selected]="selectedColor === '#9de8eb'"
+ [color]="selectionColors.turquoise"
+ [selected]="selectedColor === selectionColors.turquoise"
mode="mark"
- (selectedChange)="onSelectionChange($event)">
+ (selectedChanged)="onSelectionChange($event)">
</app-marking-button>
<app-marking-button *ngIf="elementModel.highlightableOrange"
- [color]="'#ffa06a'"
- [selected]="selectedColor === '#ffa06a'"
+ [color]="selectionColors.orange"
+ [selected]="selectedColor === selectionColors.orange"
mode="mark"
- (selectedChange)="onSelectionChange($event)">
+ (selectedChanged)="onSelectionChange($event)">
</app-marking-button>
- <app-marking-button [color]="'lightgrey'"
- [selected]="selectedColor === 'lightgrey'"
+ <app-marking-button [color]="selectionColors.delete"
+ [selected]="selectedColor === selectionColors.delete"
mode="delete"
- (selectedChange)="onSelectionChange($event)">
+ (selectedChanged)="onSelectionChange($event)">
</app-marking-button>
</div>`,
styles: [
@@ -37,19 +37,27 @@ import { TextElement } from '../../ui-elements/text/text-element';
})
export class MarkingBarComponent {
@Input() elementModel!: TextElement;
- @Output() applySelection = new EventEmitter<{
+ @Output() selectionChanged = new EventEmitter<{
active: boolean,
mode: 'mark' | 'delete',
- color: string
+ color: string,
+ colorName: string | undefined
}>();
selectedColor!: string;
+ selectionColors: Record<string, string> = {
+ yellow: '#f9f871', turquoise: '#9de8eb', orange: '#ffa06a', delete: 'lightgrey'
+ };
onSelectionChange(selection: { selected: boolean, color: string, mode: 'mark' | 'delete' }): void {
this.selectedColor = selection.selected ? selection.color : 'none';
- this.applySelection
+ this.selectionChanged
.emit({
- active: selection.selected, mode: selection.mode, color: selection.color
+ active: selection.selected,
+ mode: selection.mode,
+ color: selection.color,
+ colorName: selection.selected ?
+ Object.keys(this.selectionColors).find(key => this.selectionColors[key] === selection.color) : 'none'
});
}
}
diff --git a/projects/common/components/marking-bar/marking-button.component.ts b/projects/common/components/marking-bar/marking-button.component.ts
index a43b1800e..a0d86b7da 100644
--- a/projects/common/components/marking-bar/marking-button.component.ts
+++ b/projects/common/components/marking-bar/marking-button.component.ts
@@ -7,10 +7,10 @@ import {
template: `
<button type="button"
class="marking-button"
- [class.selected] = selected
+ [class.selected]=selected
mat-mini-fab
[style.background-color]="color"
- (click)="selected = !selected; selectedChange.emit({ selected, mode, color })">
+ (click)="selected = !selected; selectedChanged.emit({ selected, mode, color })">
<mat-icon *ngIf="mode === 'mark'">border_color</mat-icon>
<mat-icon *ngIf="mode === 'delete'" svgIcon="rubber-black"></mat-icon>
</button>`,
@@ -23,7 +23,7 @@ export class MarkingButtonComponent {
@Input() color!: string;
@Input() mode!: 'mark' | 'delete';
@Input() element!: HTMLElement;
- @Output() selectedChange = new EventEmitter<{
+ @Output() selectedChanged = new EventEmitter<{
selected: boolean,
mode: 'mark' | 'delete',
color: string,
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index d7f6e3443..0e7be1395 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -14,12 +14,16 @@ import { ValueChangeElement } from '../../models/uI-element';
[style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
<app-marking-bar
*ngIf="elementModel.highlightableYellow ||
- elementModel.highlightableTurquoise ||
- elementModel.highlightableOrange"
+ elementModel.highlightableTurquoise ||
+ elementModel.highlightableOrange"
[elementModel]="elementModel"
- (applySelection)="applySelection.emit($event)">
+ (selectionChanged)="onSelectionChanged($event)">
</app-marking-bar>
<div #textContainerRef class="text-container"
+ [class.orange-selection]="selectedColor === 'orange'"
+ [class.yellow-selection]="selectedColor === 'yellow'"
+ [class.turquoise-selection]="selectedColor === 'turquoise'"
+ [class.delete-selection]="selectedColor === 'delete'"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
@@ -28,12 +32,16 @@ import { ValueChangeElement } from '../../models/uI-element';
[style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
[style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- (mousedown)="startSelection.emit($event)"
- [innerHTML]="elementModel.text | safeResourceHTML">
+ [innerHTML]="elementModel.text | safeResourceHTML"
+ (mousedown)="startSelection.emit($event)">
</div>
</div>
`,
styles: [
+ '::ng-deep .yellow-selection ::selection {background-color: #f9f871}',
+ '::ng-deep .turquoise-selection ::selection {background-color: #9de8eb}',
+ '::ng-deep .orange-selection ::selection {background-color: #ffa06a}',
+ '::ng-deep .delete-selection ::selection {background-color: lightgrey}',
'::ng-deep .text-container p strong {letter-spacing: 0.04em; font-weight: 600;}', // bold less bold
'::ng-deep .text-container p:empty::after {content: "\\00A0"}', // render empty p
'::ng-deep .text-container h1 {font-weight: bold; font-size: 20px;}',
@@ -50,8 +58,21 @@ export class TextComponent extends ElementComponent {
@Output() applySelection = new EventEmitter<{
active: boolean,
mode: 'mark' | 'delete',
- color: string
+ color: string,
+ colorName: string | undefined
}>();
+ selectedColor!: string | undefined;
+
@ViewChild('textContainerRef') textContainerRef!: ElementRef;
+
+ onSelectionChanged(selection: {
+ active: boolean,
+ mode: 'mark' | 'delete',
+ color: string,
+ colorName: string | undefined
+ }): void {
+ this.selectedColor = selection.colorName;
+ this.applySelection.emit(selection);
+ }
}
diff --git a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html
index d02603e4e..cd0daa980 100644
--- a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html
+++ b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html
@@ -5,6 +5,6 @@
[cdkConnectedOverlayOpen]="isMarkingBarOpen">
<app-marking-bar
[elementModel]="elementModel"
- (applySelection)="applySelection.emit($event)">
+ (selectionChanged)="applySelection.emit($event)">
</app-marking-bar>
</ng-template>
diff --git a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts
index c4f7b8e41..255377485 100644
--- a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts
+++ b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts
@@ -19,5 +19,6 @@ export class FloatingMarkingBarComponent {
active: boolean,
mode: 'mark' | 'delete',
color: string
+ colorName: string | undefined;
}>();
}
--
GitLab