scroll selected comment into view

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 { }

src/app/components/shared/questionwall/question-wall/question-wall.component.html

 <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>

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);
+      }
+    }
   }
 
 }

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() {