From c3b56bd1cabab2318f9c97e59b1e77ca9841555a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berna=20T=C3=BClek?= <berna.tuelek@mni.thm.de>
Date: Thu, 11 Apr 2019 20:21:00 +0200
Subject: [PATCH] Add slide animation for new comments
---
.../shared/comment/comment.component.html | 13 ++++++++-----
.../components/shared/comment/comment.component.ts | 10 +++++++++-
2 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index d1363c036..c3122881e 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,14 +1,17 @@
-<mat-card class="card-container">
+<mat-card class="card-container" [@slide]>
<div fxLayout="column">
<div fxLayout="row">
<span class="fill-remaining-space"></span>
- <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+ <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)"
+ [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
<mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
</button>
- <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+ <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent"
+ (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
<mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
</button>
- <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
+ <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
+ [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
<mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
</button>
</div>
@@ -26,4 +29,4 @@
</div>
</div>
</div>
-</mat-card>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index 36fbd582f..c2b38c421 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -10,12 +10,20 @@ import { LanguageService } from '../../../services/util/language.service';
import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
import { PresentCommentComponent } from '../_dialogs/present-comment/present-comment.component';
import { MatDialog } from '@angular/material';
+import { trigger, transition, style, animate, state } from '@angular/animations';
@Component({
selector: 'app-comment',
templateUrl: './comment.component.html',
- styleUrls: ['./comment.component.scss']
+ styleUrls: ['./comment.component.scss'],
+ animations: [
+ trigger('slide', [
+ state('void', style({opacity: 0, transform: 'translateY(-10px)'})),
+ transition('void <=> *', animate(700)),
+ ]),
+ ]
})
+
export class CommentComponent implements OnInit {
@Input() comment: Comment;
isStudent = false;
--
GitLab