From def80d0e82f4d998d1c10f88090f0c148d5de796 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 20 Jan 2022 10:24:47 +0100
Subject: [PATCH] [player] Add background and drag functionality to floating
marking bar
---
.../marking-bar/marking-button.component.ts | 1 +
.../floating-marking-bar.component.html | 11 +++++++----
.../floating-marking-bar.component.scss | 7 +++++++
3 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/projects/common/components/marking-bar/marking-button.component.ts b/projects/common/components/marking-bar/marking-button.component.ts
index a0d86b7da..fe7ec641a 100644
--- a/projects/common/components/marking-bar/marking-button.component.ts
+++ b/projects/common/components/marking-bar/marking-button.component.ts
@@ -10,6 +10,7 @@ import {
[class.selected]=selected
mat-mini-fab
[style.background-color]="color"
+ (mousedown)="$event.stopPropagation();"
(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>
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 cd0daa980..b7dc9d4f9 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
@@ -3,8 +3,11 @@
[cdkConnectedOverlayOrigin]="overlayOrigin"
[cdkConnectedOverlayPositions]="positions"
[cdkConnectedOverlayOpen]="isMarkingBarOpen">
- <app-marking-bar
- [elementModel]="elementModel"
- (selectionChanged)="applySelection.emit($event)">
- </app-marking-bar>
+ <div class="marking-bar-container"
+ cdkDrag>
+ <app-marking-bar
+ [elementModel]="elementModel"
+ (selectionChanged)="applySelection.emit($event)">
+ </app-marking-bar>
+ </div>
</ng-template>
diff --git a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.scss b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.scss
index e69de29bb..bbdea743e 100644
--- a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.scss
+++ b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.scss
@@ -0,0 +1,7 @@
+.marking-bar-container{
+ cursor: move;
+ background-color: white;
+ border: 1px lightgray solid;
+ border-radius: 4px;
+ padding: 8px 5px 0 5px;
+}
--
GitLab