Merge branch '288-do-not-display-search-input-if-there-are-no-comments-yet' into 'master'

Improve comment-list view + 2 bug fixes

Closes #288

See merge request arsnova/arsnova-lite!257

src/app/components/home/_dialogs/password-reset/password-reset.component.scss

@@ -6,3 +6,7 @@ mat-form-field {
   color: var(--on-primary);
   background-color: var(--primary);
 }
+
+input {
+  caret-color: var(--on-surface);
+}

src/app/components/home/_dialogs/register/register.component.scss

@@ -6,3 +6,8 @@ mat-form-field {
   color: var(--on-primary);
   background-color: var(--primary);
 }
+
+input {
+  caret-color: var(--on-surface);
+}
+

src/app/components/shared/_dialogs/create-comment/create-comment.component.scss

@@ -17,6 +17,7 @@ app-comment-list {
 textarea {
   line-height: 120%;
   color: var(--on-surface);
+  caret-color: var(--on-surface);
 }
 
 .send {
@@ -31,3 +32,16 @@ mat-hint {
 .placeholder {
   color: var(--on-surface);
 }
+
+::ng-deep .mat-form-field-label {
+  color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-underline {
+  background-color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-ripple {
+  background-color: var(--on-surface)!important;
+}
+

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

-<div fxLayout="row" id="search-container">
+<div fxLayout="row" id="search-container" *ngIf="comments.length > 0">
   <mat-label fxLayoutAlign="center center">
     <mat-icon class="search-icon">search</mat-icon>
   </mat-label>
@@ -72,6 +72,13 @@
   </mat-menu>
 </div>
 
+<div fxLayout="row" fxLayoutAlign="center" *ngIf="comments.length < 1">
+  <button mat-fab class="fab-extended" (click)="openCreateDialog()">
+    {{'comment-list.add-comment' | translate}}
+    <mat-icon class="add">add</mat-icon>
+  </button>
+</div>
+
 <div *ngIf="!isLoading">
 <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
 </div>

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

@@ -65,7 +65,7 @@ input {
 }
 
 .no-comments {
-  margin-top: 30%;
+  margin-top: 10%;
 }
 
 h4  {
@@ -115,3 +115,22 @@ h4  {
   color: var(--on-surface);
   opacity: 1;
 }
+
+.fab-extended {
+  width: 50%;
+  min-width: 270px;
+  max-width: 300px;
+  height: 40px;
+  border-radius: 32px;
+  margin: 10% 0 10% 0;
+  font-size: large;
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.add {
+  transform: scale(1.4);
+  margin-right: 4%;
+  margin-left: 4%;
+  color: var(--on-primary);
+}

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

@@ -32,7 +32,7 @@ export class CommentListComponent implements OnInit {
   voteasc = 'voteasc';
   votedesc = 'votedesc';
   time = 'time';
-  currentSort = this.votedesc;
+  currentSort: string;
   read = 'read';
   unread = 'unread';
   favorite = 'favorite';
@@ -68,6 +68,9 @@ export class CommentListComponent implements OnInit {
           this.commentVoteMap.set(v.commentId, v);
         }
       });
+      this.currentSort = this.time;
+    } else {
+      this.currentSort = this.votedesc;
     }
     this.commentService.getComments(this.roomId)
       .subscribe(comments => {

src/app/components/shared/header/header.component.html

@@ -5,7 +5,7 @@
       <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
     </button>
     <span class="fill-remaining-space"></span>
-    <h3 *ngIf="router.url.includes('comments') && user.role === 1" fxLayoutAlign="center center">
+    <h3 *ngIf="router.url.includes('comments') && user.role === 1 && deviceType === 'desktop'" fxLayoutAlign="center center">
       <mat-icon>access_time</mat-icon>
       {{cTime}}
     </h3>

src/app/components/shared/login/login.component.scss

@@ -39,3 +39,7 @@ input:-webkit-autofill {
 mat-form-field {
   color: var(--on-surface);
 }
+
+input {
+  caret-color: var(--on-surface);
+}

src/app/components/shared/room-join/room-join.component.scss

@@ -3,6 +3,10 @@ mat-form-field {
   color: var(--on-surface);
 }
 
+input {
+  caret-color: var(--on-surface);
+}
+
 form {
   padding-top: 5%;
 }
@@ -29,3 +33,15 @@ mat-hint {
 .placeholder {
   color: var(--on-surface);
 }
+
+::ng-deep .mat-form-field-label {
+  color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-underline {
+  background-color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-ripple {
+  background-color: var(--on-surface)!important;
+}