Fix create-comment button position

src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts

@@ -3,9 +3,9 @@ import { Comment } from '../../../../models/comment';
 import { NotificationService } from '../../../../services/util/notification.service';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
 import { TranslateService } from '@ngx-translate/core';
-import { CommentPageComponent } from '../../comment-page/comment-page.component';
 import { FormControl, Validators } from '@angular/forms';
 import { User } from '../../../../models/user';
+import { CommentListComponent } from '../../comment-list/comment-list.component';
 
 
 @Component({
@@ -20,17 +20,15 @@ export class SubmitCommentComponent implements OnInit {
   user: User;
   roomId: string;
 
-  subjectForm = new FormControl('', [Validators.required]);
   bodyForm = new FormControl('', [Validators.required]);
-  private date = new Date(Date.now());
 
   constructor(
-    private notification: NotificationService,
-    public dialogRef: MatDialogRef<CommentPageComponent>,
-    private translateService: TranslateService,
-    public dialog: MatDialog,
-    private translationService: TranslateService,
-    @Inject(MAT_DIALOG_DATA) public data: any) {
+              private notification: NotificationService,
+              public dialogRef: MatDialogRef<CommentListComponent>,
+              private translateService: TranslateService,
+              public dialog: MatDialog,
+              private translationService: TranslateService,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
   ngOnInit() {

src/app/components/shared/comment-list/comment-list.component.html

@@ -14,3 +14,6 @@
 <mat-card class="outer-card" *ngIf="!hideCommentsList">
   <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
 </mat-card>
+<button mat-icon-button class="add-button" color="accent" (click)="openSubmitDialog()">
+  <mat-icon class="add-icon">add_circle</mat-icon>
+</button>

src/app/components/shared/comment-list/comment-list.component.scss

@@ -21,7 +21,7 @@ input {
 }
 
 button{
-  min-height: 100% !important;
+  //min-height: 100% !important;
   min-width: 100px;
 }
 
@@ -34,3 +34,20 @@ mat-icon {
   background-color: #80cbc4;
   margin-bottom: 10px;
 }
+
+
+.add-button {
+  width: 60px;
+  height: 60px;
+  position: fixed;
+  top: 80%;
+  right: 35%;
+}
+
+.add-icon {
+  font-size: 60px;
+  height: 60px;
+  width: 60px;
+  line-height: 100%!important;
+}
+

src/app/components/shared/comment-list/comment-list.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Comment } from '../../../models/comment';
 import { CommentService } from '../../../services/http/comment.service';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
 import { RxStompService } from '@stomp/ng2-stompjs';
 import { Message } from '@stomp/stompjs';
+import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-comment.component';
+import { MatDialog } from '@angular/material';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { User } from '../../../models/user';
 
 @Component({
   selector: 'app-comment-list',
@@ -12,16 +16,19 @@ import { Message } from '@stomp/stompjs';
   styleUrls: ['./comment-list.component.scss']
 })
 export class CommentListComponent implements OnInit {
+  @Input() user: User;
+  @Input() roomId: string;
   comments: Comment[];
   isLoading = true;
-  roomId: string;
   hideCommentsList: boolean;
   filteredComments: Comment[];
 
   constructor(private commentService: CommentService,
               private translateService: TranslateService,
+              public dialog: MatDialog,
               protected langService: LanguageService,
-              private rxStompService: RxStompService) {
+              private rxStompService: RxStompService,
+              private wsCommentService: WsCommentServiceService) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
@@ -88,5 +95,25 @@ export class CommentListComponent implements OnInit {
         }
     }
   }
+
+  openSubmitDialog(): void {
+    const dialogRef = this.dialog.open(SubmitCommentComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.user = this.user;
+    dialogRef.componentInstance.roomId = this.roomId;
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result) {
+          this.send(result);
+        } else {
+          return;
+        }
+      });
+  }
+
+  send(comment: Comment): void {
+    this.wsCommentService.add(comment);
+  }
 }
 

src/app/components/shared/comment-page/comment-page.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
   <div fxLayout="row" fxLayoutAlign="center">
-    <mat-toolbar>List of Questions
-      <span class="fill-remaining-space"></span>
-      <button mat-icon-button color="primary" (click)="openSubmitDialog()">
-        <mat-icon>add_circle</mat-icon>
-      </button></mat-toolbar>
-  </div>
-  <div fxLayout="row" fxLayoutAlign="center">
-    <app-comment-list></app-comment-list>
+    <app-comment-list [user]="user" [roomId]="roomId"></app-comment-list>
   </div>
 </div>
 

src/app/components/shared/comment-page/comment-page.component.scss

@@ -2,23 +2,3 @@ app-comment-list {
   width: 100%;
   max-width: 800px;
 }
-
-.mat-icon-button {
-  width: 50px;
-  height: 50px;
-  margin-bottom: 20px;
-  margin-top: 20px;
-}
-
-mat-icon {
-  font-size: 50px;
-  height: 50px;
-  width: 50px;
-  line-height: 100%!important;
-}
-
-mat-toolbar {
-  border-radius: 10px;
-  background-color: #bbdefb;
-  max-width: 800px;
-}

src/app/components/shared/comment-page/comment-page.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Comment } from '../../../models/comment';
 import { User } from '../../../models/user';
 import { NotificationService } from '../../../services/util/notification.service';
 import { AuthenticationService } from '../../../services/http/authentication.service';
-import { MatDialog } from '@angular/material';
-import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-comment.component';
-import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
 
 @Component({
   selector: 'app-comment-page',
@@ -19,32 +15,10 @@ export class CommentPageComponent implements OnInit {
 
   constructor(private route: ActivatedRoute,
               private notification: NotificationService,
-              public dialog: MatDialog,
-              private authenticationService: AuthenticationService,
-              private wsCommentService: WsCommentServiceService) { }
+              private authenticationService: AuthenticationService) { }
 
   ngOnInit(): void {
     this.roomId = localStorage.getItem('roomId');
     this.user = this.authenticationService.getUser();
   }
-
-  openSubmitDialog(): void {
-        const dialogRef = this.dialog.open(SubmitCommentComponent, {
-          width: '400px'
-        });
-        dialogRef.componentInstance.user = this.user;
-        dialogRef.componentInstance.roomId = this.roomId;
-        dialogRef.afterClosed()
-          .subscribe(result => {
-            if (result) {
-              this.send(result);
-            } else {
-              return;
-            }
-          });
-    }
-
-  send(comment: Comment): void {
-    this.wsCommentService.add(comment);
-  }
 }