diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html index c3122881ead7193be0a0d30dc4d59357e7e5b6a2..5dc2c64f77fe3b2ebb620eb5d9e1798ce547604a 100644 --- a/src/app/components/shared/comment/comment.component.html +++ b/src/app/components/shared/comment/comment.component.html @@ -2,16 +2,13 @@ <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> @@ -19,11 +16,11 @@ <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div> <span class="fill-remaining-space"></span> <div fxLayout="column"> - <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)"> - <mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon> + <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()"> + <mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}" >keyboard_arrow_up</mat-icon> </button> <h2>{{comment.score}}</h2> - <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)"> + <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()"> <mat-icon class="voting-icon" [ngClass]="{'downvoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon> </button> </div> diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts index c2b38c421840bb4066f66508d15d6f991428fcb4..dacdf49950d109844d34cb3f283f0cd952f87132 100644 --- a/src/app/components/shared/comment/comment.component.ts +++ b/src/app/components/shared/comment/comment.component.ts @@ -10,7 +10,17 @@ 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'; +import { trigger, transition, style, animate, state, keyframes } from '@angular/animations'; + +export const rubberBand = [ + style({ transform: 'scale3d(1, 1, 1)', offset: 0 }), + style({ transform: 'scale3d(1.25, 0.75, 1)', offset: .3 }), + style({ transform: 'scale3d(0.75, 1.25, 1)', offset: .4 }), + style({ transform: 'scale3d(1.15, 0.85, 1)', offset: .5 }), + style({ transform: 'scale3d(0.95, 1.05, 1)', offset: .65 }), + style({ transform: 'scale3d(1.05, 0.95, 1)', offset: .75 }), + style({ transform: 'scale3d(1, 1, 1)', offset: 1 }) +] @Component({ selector: 'app-comment', @@ -18,9 +28,12 @@ import { trigger, transition, style, animate, state } from '@angular/animations' styleUrls: ['./comment.component.scss'], animations: [ trigger('slide', [ - state('void', style({opacity: 0, transform: 'translateY(-10px)'})), + state('void', style({ opacity: 0, transform: 'translateY(-10px)' })), transition('void <=> *', animate(700)), ]), + trigger('rubberBand', [ + transition('* => rubberBand', animate(900, keyframes(rubberBand))), + ]) ] }) @@ -29,17 +42,30 @@ export class CommentComponent implements OnInit { isStudent = false; isLoading = true; hasVoted = 0; + animationState: string; constructor(protected authenticationService: AuthenticationService, - private route: ActivatedRoute, - private location: Location, - private commentService: CommentService, - private notification: NotificationService, - private translateService: TranslateService, - public dialog: MatDialog, - protected langService: LanguageService, - private wsCommentService: WsCommentServiceService) { - langService.langEmitter.subscribe(lang => translateService.use(lang)); } + private route: ActivatedRoute, + private location: Location, + private commentService: CommentService, + private notification: NotificationService, + private translateService: TranslateService, + public dialog: MatDialog, + protected langService: LanguageService, + private wsCommentService: WsCommentServiceService) { + langService.langEmitter.subscribe(lang => translateService.use(lang)); + } + + startAnimation(state) { + console.log(state) + if (!this.animationState) { + this.animationState = state; + } + } + + resetAnimationState() { + this.animationState = ''; + } ngOnInit() { if (this.authenticationService.getRole() === 0) {