Merge branch '413-optimize-layout-of-projector-icon' into 'master'

Resolve "Optimize layout of projector icon"

Closes #413

See merge request !402

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

@@ -33,11 +33,6 @@
             [matMenuTriggerFor]="filterMenu" matTooltip="{{ 'comment-list.filter-comments' | translate }}">
       <mat-icon class="searchBarIcon">filter_list</mat-icon>
     </button>
-
-    <button mat-fab class="addButton" *ngIf="!searchBox.value && !search" (click)="openCreateDialog()"
-            matTooltip="{{ 'comment-list.add-comment' | translate }}">
-      <mat-icon class="addCommentIcon">add</mat-icon>
-    </button>
   </div>
 
   <mat-menu #sortMenu="matMenu" xPosition="before">
@@ -64,6 +59,11 @@
         <mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
       </button>
 
+      <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.wrong' | translate }}"
+              (click)="filterComments(wrong)">
+        <mat-icon [ngClass]="{wrong: 'wrong-icon'}[currentFilter]">not_interested</mat-icon>
+      </button>
+
       <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.favorite' | translate }}"
               (click)="filterComments(favorite)">
         <mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">grade</mat-icon>
@@ -71,12 +71,7 @@
 
       <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.read' | translate }}"
               (click)="filterComments(read)">
-        <mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">speaker_notes</mat-icon>
-      </button>
-
-      <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.unread' | translate }}"
-              (click)="filterComments(unread)">
-        <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">speaker_notes_off</mat-icon>
+        <mat-icon svgIcon="beamer" [ngClass]="{read: 'beamer-icon'}[currentFilter]"></mat-icon>
       </button>
 
       <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort); filterComments('')">

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

@@ -64,18 +64,6 @@ app-comment {
   color: var(--secondary);
 }
 
-.addButton {
-  width: 40px;
-  height: 40px;
-  margin: 0 5% 0 5%;
-  background-color: var(--primary);
-}
-
-.addCommentIcon {
-  transform: scale(1.5);
-  color: var(--surface)
-}
-
 .close {
   margin: 5px 0 5px 0;
 }
@@ -104,8 +92,12 @@ h4  {
   color: var(--green);
 }
 
-.read-icon {
-  color: var(--grey);
+.wrong-icon {
+  color: var(--red);
+}
+
+.beamer-icon {
+  color: var(--blue);
 }
 
 .favorite-icon {
@@ -142,25 +134,6 @@ h3 {
   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);
-}
-
 .scrollTop {
   position: fixed;
   bottom: 3%;

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

@@ -38,6 +38,7 @@ export class ModeratorCommentListComponent implements OnInit {
   unread = 'unread';
   favorite = 'favorite';
   correct = 'correct';
+  wrong = 'wrong';
   ack = 'ack';
   currentFilter = '';
   commentVoteMap = new Map<string, Vote>();
@@ -197,7 +198,9 @@ export class ModeratorCommentListComponent implements OnInit {
     this.filteredComments = this.comments.filter(c => {
       switch (type) {
         case this.correct:
-          return c.correct;
+          return c.correct === CorrectWrong.CORRECT ? 1 : 0;
+        case this.wrong:
+          return c.correct === CorrectWrong.WRONG ? 1 : 0;
         case this.favorite:
           return c.favorite;
         case this.read:
@@ -212,13 +215,13 @@ export class ModeratorCommentListComponent implements OnInit {
   sort(array: any[], type: string): void {
     array.sort((a, b) => {
       if (type === this.voteasc) {
-        return a.score - b.score;
+        return (a.score > b.score) ? 1 : (b.score > a.score) ? -1 : 0;
       } else if (type === this.votedesc) {
-        return b.score - a.score;
+        return (b.score > a.score) ? 1 : (a.score > b.score) ? -1 : 0;
       }
       const dateA = new Date(a.timestamp), dateB = new Date(b.timestamp);
       if (type === this.time) {
-        return +dateB - +dateA;
+        return (+dateB > +dateA) ? 1 : (+dateA > +dateB) ? -1 : 0;
       }
     });
   }

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

@@ -59,16 +59,16 @@
 
   <mat-menu #filterMenu="matMenu" xPosition="before">
     <div>
-      <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.wrong' | translate }}"
-              (click)="filterComments(wrong)">
-        <mat-icon [ngClass]="{correct: 'wrong-icon'}[currentFilter]">not_interested</mat-icon>
-      </button>
-
       <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.correct' | translate }}"
               (click)="filterComments(correct)">
         <mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
       </button>
 
+      <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.wrong' | translate }}"
+              (click)="filterComments(wrong)">
+        <mat-icon [ngClass]="{wrong: 'wrong-icon'}[currentFilter]">not_interested</mat-icon>
+      </button>
+
       <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.favorite' | translate }}"
               (click)="filterComments(favorite)">
         <mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">grade</mat-icon>
@@ -76,12 +76,7 @@
 
       <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.read' | translate }}"
               (click)="filterComments(read)">
-        <mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">speaker_notes</mat-icon>
-      </button>
-
-      <button mat-icon-button (focus)="hideCommentsList=true" matTooltip="{{ 'comment-list.unread' | translate }}"
-              (click)="filterComments(unread)">
-        <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">speaker_notes_off</mat-icon>
+        <mat-icon svgIcon="beamer" [ngClass]="{read: 'beamer-icon'}[currentFilter]"></mat-icon>
       </button>
 
       <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort); filterComments('')">

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

@@ -104,16 +104,16 @@ h4  {
   color: var(--green);
 }
 
-.read-icon {
-  color: var(--grey);
+.wrong-icon {
+  color: var(--red);
 }
 
-.favorite-icon {
-  color: var(--yellow);
+.beamer-icon {
+  color: var(--blue);
 }
 
-.unread-icon {
-  color: var(--purple);
+.favorite-icon {
+  color: var(--yellow);
 }
 
 .counter {

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

@@ -11,7 +11,7 @@
         </ng-template>
       </div>
       <button mat-icon-button *ngIf="comment.read" [disabled]="true" (click)="setRead(comment)">
-        <mat-icon svgIcon="beamer" [ngClass]="{'read-icon': comment.read, 'not-marked' : !comment.read}"
+        <mat-icon svgIcon="beamer" class="beamer-icon">
                   matTooltip="{{ 'comment-page.mark-read' | translate }}">
         </mat-icon>
       </button>

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

@@ -33,10 +33,6 @@ mat-card-content > :first-child {
   color: var(--green);
 }
 
-.read-icon {
-  color: var(--grey);
-}
-
 .favorite-icon {
   color: var(--yellow);
 }
@@ -45,6 +41,10 @@ mat-card-content > :first-child {
   color: var(--red);
 }
 
+.beamer-icon {
+  color: var(--on-surface);
+}
+
 h2 {
   text-align: center;
   margin: 0;
@@ -78,7 +78,7 @@ h2 {
 }
 
 .date {
-  padding-top: 10px;
+  padding-top: 10.5px;
 
 }