From 3f03effb2082f97d05fde00584da3f0ff3ffdb05 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Tue, 24 Mar 2020 15:54:16 +0100
Subject: [PATCH] scroll selected comment into view
---
projects/ars/src/lib/ars.module.ts | 4 ++-
.../question-wall.component.html | 32 +++++++++++++------
.../question-wall.component.scss | 13 +++++---
.../question-wall/question-wall.component.ts | 26 ++++++++++++---
4 files changed, 55 insertions(+), 20 deletions(-)
diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index cdba19440..d74036d7d 100644
--- a/projects/ars/src/lib/ars.module.ts
+++ b/projects/ars/src/lib/ars.module.ts
@@ -54,7 +54,9 @@ import { MatIconModule } from '@angular/material/icon';
ThemeTestComponent,
BaseTestComponent,
MenuWrapperDirective,
- ButtonWrapperDirective
+ ButtonWrapperDirective,
+ ButtonBaseDirective,
+ MaterialBtnComponent
]
})
export class ArsModule { }
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index db3ad1176..7f5008400 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -1,6 +1,10 @@
<ars-screen ars-flex-box class="questionwall-screen">
<ars-row [height]="50" class="questionwall-header">
- <button *ngIf="room" routerLink="/participant/room/{{room.shortId}}/comments">BACK</button>
+ <ars-style-btn-material *ngIf="room" style="width:100%;height:100%;" ars-flex-box>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn routerLink="/participant/room/{{room.shortId}}/comments"><p>BACK</p></button>
+ </ars-col>
+ </ars-style-btn-material>
</ars-row>
<ars-fill ars-flex-box>
<ars-fill style="overflow:hidden;">
@@ -10,7 +14,7 @@
</ars-row>
</ars-fill>
<ars-col [width]="450" [overflow]="'auto'" class="questionwall-comment-list" #colComponent>
- <ars-row *ngFor="let comment of comments">
+ <ars-row *ngFor="let comment of comments" class="questionwall-comment-anchor">
<div class="questionwall-comment">
<div class="questionwall-comment-box" (click)="focusComment(comment)"
[style.box-shadow]="commentFocus===comment?'inset 0px 0px 0px 1px var(--ars-paragraph-color)':null">
@@ -24,12 +28,20 @@
</ars-row>
</ars-col>
</ars-fill>
- <ars-row [height]="50" class="questionwall-footer">
- <button (click)="prevComment()">prev</button>
- <button (click)="nextComment()">next</button>
- <p>new Comments: {{unreadComments}}</p>
- <button (click)="play()">play</button>
- <button (click)="stop()">stop</button>
- <p>auto focus: {{focusIncommingComments}}</p>
- </ars-row>
+ <ars-row [height]="50" class="questionwall-footer">
+ <ars-style-btn-material style="width:100%;" ars-flex-box>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="prevComment()"><p>PREVIOUS</p></button>
+ <button ars-btn (click)="nextComment()"><p>NEXT</p></button>
+ </ars-col>
+ <ars-col>
+ <p style="padding:15px 5px;box-sizing:border-box;" class="questionwall-text-color">new Comments: {{unreadComments}}</p>
+ </ars-col>
+ <ars-fill></ars-fill>
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true">
+ <button ars-btn (click)="stop()"><p [style.color]="focusIncommingComments?'RED':null">PAUSE</p></button>
+ <button ars-btn (click)="play()"><p [style.color]="focusIncommingComments?null:'RED'">PLAY</p></button>
+ </ars-col>
+ </ars-style-btn-material>
+ </ars-row>
</ars-screen>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index c279f5bb4..444697e8f 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -8,13 +8,13 @@
.questionwall{
&-header{
background-color:var(--ars-foreground-color);
- box-shadow:0px 2px 4px rgba(0,0,0,0.3);
+ border-bottom:solid 1px var(--ars-border-color);
z-index:4;
}
&-footer{
background-color:var(--ars-foreground-color);
- box-shadow:0px -2px 4px rgba(0,0,0,0.3);
- z-index:4;
+ border-top:solid 1px var(--ars-border-color);
+ z-index:54;
>*{
height:100%;
float:left;
@@ -27,7 +27,7 @@
&-box{
background-color:var(--ars-foreground-color);
border-radius:2px;
- box-shadow:0px 2px 4px rgba(0,0,0,0.3);
+ box-shadow:0px 2px 2px rgba(0,0,0,0.3);
box-sizing:border-box;
padding:16px;
cursor:pointer;
@@ -57,6 +57,11 @@
&-screen{
background-color:var(--ars-background-color);
}
+ &-text{
+ &-color{
+ color:var(--ars-paragraph-color);
+ }
+ }
}
}
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
index 03833d312..ae24bd921 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
@@ -41,6 +41,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnInit(): void {
// StyleDebug.border('c');
this.commentService.getAckComments(this.roomId).subscribe(e => {
+ e.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
e.forEach(c => {
this.comments.push(new QuestionWallComment(c, true));
});
@@ -52,7 +53,9 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.commentService.getComment(JSON.parse(e.body).payload.id).subscribe(c => {
const qwComment = this.pushIncommingComment(c);
if (this.focusIncommingComments) {
- this.focusComment(qwComment);
+ setTimeout(() => {
+ this.focusComment(qwComment);
+ }, 2);
}
});
});
@@ -76,13 +79,25 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.moveComment(-1);
}
+ getDOMComments() {
+ return Array.from(document.getElementsByClassName('questionwall-comment-anchor'));
+ }
+
+ getDOMCommentFocus() {
+ return this.getDOMComments()[this.getCommentFocusIndex()];
+ }
+
+ getCommentFocusIndex() {
+ return this.comments.indexOf(this.commentFocus);
+ }
+
moveComment(fx: number) {
if (this.comments.length === 0) {
return;
} else if (!this.commentFocus) {
this.focusComment(this.comments[0]);
} else {
- const cursor = this.comments.indexOf(this.commentFocus);
+ const cursor = this.getCommentFocusIndex();
if (cursor + fx >= this.comments.length || cursor + fx < 0) {
return;
} else {
@@ -104,9 +119,10 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
comment.old = true;
this.unreadComments--;
}
- setTimeout(() => {
- QuestionWallComponent.wrap(this.colComponent.ref.nativeElement, e => e.scrollTop = e.scrollHeight);
- }, 10);
+ this.getDOMCommentFocus().scrollIntoView({
+ behavior: 'smooth',
+ block: 'center'
+ });
}
play() {
--
GitLab