comment.component.html 6.63 KB
Newer Older
Lukas Mauß's avatar
Lukas Mauß committed
1
2
<mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
                                        '': !comment.highlighted}" [@slide]>
Lukas Mauß's avatar
Lukas Mauß committed
3
  <div fxLayout="column">
4
    <div fxLayout="row" class="comment-actions">
5
6
      <div class="date-container">
        <div class="date" *ngIf="language === 'de'; else englishDate">
Lukas Mauß's avatar
Lukas Mauß committed
7
          {{comment.timestamp | date: ' HH:mm '}}
8
        </div>
9
        <ng-template class="date" #englishDate>
Lukas Mauß's avatar
Lukas Mauß committed
10
          {{comment.timestamp | date: 'h:mm a'}}
11
12
        </ng-template>
      </div>
Lukas Mauß's avatar
Lukas Mauß committed
13
      <button mat-icon-button *ngIf="comment.read" [disabled]="true" (click)="setRead(comment)">
Lukas Mauß's avatar
Lukas Mauß committed
14
        <mat-icon svgIcon="beamer" class="beamer-icon"
15
                  matTooltip="{{ 'comment-page.mark-read' | translate }}">
16
17
        </mat-icon>
      </button>
Lukas Mauß's avatar
Lukas Mauß committed
18
      <span class="fill-remaining-space"></span>
19
      <button mat-icon-button *ngIf="!isStudent || comment.correct === 1" [disabled]="isStudent"
20
              (click)="markCorrect(comment, 1)" tabindex="0" attr.aria-labelledby="comment_correct{{ comment.id }}">
21
22
23
        <mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
                              'not-marked' : (comment.correct === 0 || comment.correct === 2)}"
                  [matTooltip]="comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
24
25
                                                 : ('comment-page.mark-not-correct' | translate)">check_circle
        </mat-icon>
Lukas Mauß's avatar
Lukas Mauß committed
26
      </button>
Lukas Mauß's avatar
Lukas Mauß committed
27
      <button mat-icon-button *ngIf="!isStudent || comment.correct === 2" [disabled]="isStudent"
28
              (click)="markCorrect(comment, 2)" tabindex="0" attr.aria-labelledby="comment_not_correct{{ comment.id }}">
Lukas Mauß's avatar
Lukas Mauß committed
29
30
31
32
33
34
        <mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
                              'not-marked' : (comment.correct === 0 || comment.correct === 1)}"
                  [matTooltip]="comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
                                                 : ('comment-page.mark-not-wrong' | translate)">not_interested
        </mat-icon>
      </button>
35
      <button mat-icon-button *ngIf="!isStudent || comment.favorite" [disabled]="isStudent"
36
              (click)="setFavorite(comment)" tabindex="0" attr.aria-labelledby="comment_grade{{ comment.id }}">
37
        <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
38
39
40
                  [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
                                                 : ('comment-page.mark-not-favorite' | translate)">grade
        </mat-icon>
Lukas Mauß's avatar
Lukas Mauß committed
41
      </button>
42
      <button mat-icon-button *ngIf="isCreator" (click)="openDeleteCommentDialog()"
43
              tabindex="0" attr.aria-labelledby="comment_delete{{ comment.id }}">
44
        <mat-icon class="not-marked" matTooltip="{{ 'comment-page.delete' | translate }}">delete
Tom Käsler's avatar
Tom Käsler committed
45
46
        </mat-icon>
      </button>
47
48
      <button mat-icon-button *ngIf="!isStudent && moderationEnabled" (click)="setAck(comment)"
              tabindex="0" attr.aria-labelledby="comment_moderation{{ comment.id }}">
49
        <mat-icon class="gavel" [matTooltip]="!comment.ack ? ('comment-page.acknowledge' | translate)
Tom Käsler's avatar
Tom Käsler committed
50
                                                        : ('comment-page.reject' | translate)">mic
51
52
        </mat-icon>
      </button>
Lukas Mauß's avatar
Lukas Mauß committed
53
54
    </div>
    <div fxLayout="row">
55
56
57
58
      <div class="body click" (click)="openPresentDialog(comment)" tabindex="0" attr.aria-labelledby="comment-{{ comment.id }}">
        <span aria-hidden="true">{{ comment.body.trim() }}</span>
        <span id="comment-{{ comment.id }}" class="visually-hidden" aria-hidden="true">{{ 'comment-page.comment' | translate: {
            time: (language === 'de' ? (comment.timestamp | date: ' HH:mm ') : (comment.timestamp | date: 'h:mm a')),
59
            votes: comment.score === 1 ? ('comment-page.a11y-text_textForOneVote' | translate) : comment.score + ('comment-page.a11y-text_textForVotes' | translate),
Emine Erbay's avatar
Emine Erbay committed
60
61
62
            comment: comment.body.trim(),
            correct: comment.correct === 1 ? ('comment-page.a11y-text_correct' | translate) : "",
            wrong: comment.correct === 2 ? ('comment-page.a11y-text_wrong' | translate) : "",
63
            bonus: comment.favorite ? ('comment-page.a11y-text_grade' | translate) : "",
Emine Erbay's avatar
Emine Erbay committed
64
            beamer: comment.read ? ('comment-page.a11y-text_read' | translate) : ""
65
66
67
          }
          }}</span>
      </div>
68
      <span class="fill-remaining-space click" (click)="openPresentDialog(comment)"></span>
69
      <div fxLayout="column" *ngIf="isStudent" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState"
Lukas Mauß's avatar
Lukas Mauß committed
70
           (@rubberBand.done)="resetAnimationState()">
71
72
        <button mat-icon-button (click)="voteUp(comment)" matTooltip="{{ 'comment-page.vote-up' | translate }}"
                tabindex="0" attr.aria-labelledby="comment_vote_up{{ comment.id }}">
Lukas Mauß's avatar
Lukas Mauß committed
73
74
          <mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
        </button>
75
        <span class="score">{{comment.score}}</span>
76
77
        <button mat-icon-button (click)="voteDown(comment)" matTooltip="{{ 'comment-page.vote-down' | translate }}"
                tabindex="0" attr.aria-labelledby="comment_vote_down{{ comment.id }}">
Lukas Mauß's avatar
Lukas Mauß committed
78
          <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
Lukas Mauß's avatar
Lukas Mauß committed
79
        </button>
Berna Tülek's avatar
Berna Tülek committed
80
      </div>
Lukas Mauß's avatar
Lukas Mauß committed
81
    <div *ngIf="!isStudent" fxLayout="column" fxLayoutAlign="center">
82
83
      <span class="scoreCreator">{{comment.score}}</span>
    </div>
Lukas Mauß's avatar
Lukas Mauß committed
84
    </div>
Lukas Mauß's avatar
Lukas Mauß committed
85
86
  </div>
</mat-card>
87
88
89
90
91
92
93
94
95
96
97
98
99
100

<!--Hidden Div's for a11y-Descriptions-->
<div class="visually-hidden">
  <div id="comment_correct{{ comment.id }}">{{comment.correct != 1 ? ('comment-page.a11y-comment_not_marked_correct' | translate)
                                                              : ('comment-page.a11y-comment_marked_correct' | translate) }}
  </div>
  <div id="comment_not_correct{{ comment.id }}">{{comment.correct != 2 ? ('comment-page.a11y-comment_not_marked_wrong' | translate)
      : ('comment-page.a11y-comment_marked_wrong' | translate) }}
  </div>
  <div id="comment_grade{{ comment.id }}">{{ !comment.favorite ? ('comment-page.a11y-comment_grade' | translate)
      : ('comment-page.a11y-comment_not_grade' | translate) }}
  </div>
  <div id="comment_delete{{ comment.id }}">{{'comment-page.a11y-comment_delete' | translate}}</div>
  <div id="comment_moderation{{ comment.id }}">{{'comment-page.a11y-comment_moderation' | translate}}</div>
Lukas Mauß's avatar
Lukas Mauß committed
101
102
  <div *ngIf="isStudent" id="comment_vote_up{{ comment.id }}">{{'comment-page.a11y-comment_vote_up' | translate}}</div>
  <div *ngIf="isStudent" id="comment_vote_down{{ comment.id }}">{{'comment-page.a11y-comment_vote_down' | translate}}</div>
103
</div>