Merge branch '138-follow-up-from-resolve-see-reed-comments-participant' into 'master'

Resolve "Follow-up from "Resolve "See read comments (participant)"""

Closes #138

See merge request swtp-block-ws17/arsnova-angular-frontend!91

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

-<div fxLayout="row" fxLayoutAlign="center">
-  <div fxLayout="column" fxLayoutGap="20px">
-    <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
-      <div *ngFor="let comment of comments">
-        <mat-card>
-          <mat-card-content>
-            <h3>{{comment.subject}}</h3>
-
-            {{comment.body}}
-
-            <div class="body-buttons">
-              <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="userRole === userRoleTemp && setRead(comment)">
-                <mat-icon>clear</mat-icon>
-              </button>
-              <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="userRole === userRoleTemp && setRead(comment)">
-                <mat-icon>check</mat-icon>
-              </button>
-              <button *ngIf="userRole === userRoleTemp" class="trash-icon" mat-fab color="primary" matTooltip="Delete" (click)="delete(comment)">
-                <mat-icon>delete</mat-icon>
-              </button>
-            </div>
-          </mat-card-content>
-          <mat-card-footer>
-            <div class="date">
-              <i> Submitted on {{comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' : format}} </i>
-            </div>
-          </mat-card-footer>
-        </mat-card><br>
-      </div>
-
-    <button *ngIf="userRole === userRoleTemp" mat-raised-button color="primary" (click)="goBack()">Back</button>
-  </div>
-</div>
+<mat-card *ngFor="let comment of comments">
+  <mat-card-header>
+    <mat-card-title>{{comment.subject}}</mat-card-title>
+    <mat-card-subtitle>
+      <span class="mat-caption">Submitted on {{ comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' }}</span>
+    </mat-card-subtitle>
+  </mat-card-header>
+  <mat-divider></mat-divider>
+  <mat-card-content>
+    <p>{{comment.body}}</p>
+  </mat-card-content>
+  <mat-divider></mat-divider>
+  <mat-card-actions *ngIf="userRole === userRoleTemp">
+    <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+            (click)="setRead(comment)">
+      <mat-icon>speaker_notes</mat-icon>
+    </button>
+    <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+            (click)="setRead(comment)">
+      <mat-icon>speaker_notes_off</mat-icon>
+    </button>
+    <button mat-icon-button color="warn" matTooltip="Delete comment"
+            (click)="delete(comment)">
+      <mat-icon>delete</mat-icon>
+    </button>
+  </mat-card-actions>
+  <mat-card-actions *ngIf="userRole !== userRoleTemp">
+    <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+            (click)="setRead(comment)" disabled>
+      <mat-icon>speaker_notes</mat-icon>
+    </button>
+    <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+            (click)="setRead(comment)" disabled>
+      <mat-icon>speaker_notes_off</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

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

 mat-card {
-  min-width: 800px;
-  justify-content: center;
+  margin-bottom: 20px;
 }
 
-mat-card-content {
-  min-height: 100px;
-}
-
-mat-card:hover {
-  box-shadow: 0 6px 6px 6px rgba(0,0,0,.2), 0 6px 6px 0 rgba(0,0,0,.14), 0 6px 6px 0 rgba(0,0,0,.12) !important;
-  transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 300ms cubic-bezier(.3,0,.2,1);
-}
-
-.trash-icon:hover {
-  background: #F44336;
-}
-
-.body-buttons {
-  position: absolute;
-  top: 10%;
-  left: 92%;
-}
-
-.date {
-  text-align: right;
-  font-size: 80%;
-  margin-right: 10px;
-  margin-bottom: 3px;
+mat-card-content>:first-child {
+  margin-top: 20px;
 }

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

@@ -21,13 +21,12 @@ export class CommentListComponent implements OnInit {
   comments: Comment[];
   isLoading = true;
 
-  constructor(
-    protected authenticationService: AuthenticationService,
-    private route: ActivatedRoute,
-    private roomService: RoomService,
-    private location: Location,
-    private commentService: CommentService,
-    private notification: NotificationService) {
+  constructor(protected authenticationService: AuthenticationService,
+              private route: ActivatedRoute,
+              private roomService: RoomService,
+              private location: Location,
+              private commentService: CommentService,
+              private notification: NotificationService) {
   }
 
   ngOnInit() {

src/app/create-comment/create-comment.component.html

-<div fxLayout="row" fxLayoutAlign="center">
-  <div fxLayout="column" fxLayoutGap="20">
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+  <div fxLayout="row" fxLayoutAlign="center">
     <form>
       <mat-form-field class="input-block">
         <input matInput #commentSubject type="text" maxlength="24" placeholder="Choose a title">
@@ -13,6 +13,8 @@
       <button mat-raised-button color="primary" (click)="send(commentSubject.value, commentBody.value)">Send</button>
     </form>
   </div>
+  <div fxLayout="row" fxLayoutAlign="center">
+    <app-comment-list></app-comment-list>
+  </div>
 </div>
 
-<app-comment-list></app-comment-list>

src/app/create-comment/create-comment.component.scss

 form {
-  min-width: 800px;
-  justify-content: center;
+  display: block;
+  width: 100%;
+  max-width: 800px;
   margin-bottom: 50px;
 }
+
+app-comment-list {
+  width: 100%;
+  max-width: 800px;
+}