From c66dac51ce5170d375d9c739525e8ee6732ade4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berna=20T=C3=BClek?= <berna.tuelek@mni.thm.de>
Date: Sun, 14 Apr 2019 18:16:01 +0200
Subject: [PATCH] Improve rubberBand animation
---
.../shared/comment/comment.component.html | 49 ++++++++++---------
.../shared/comment/comment.component.ts | 8 +--
2 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 5dc2c64f7..23494d799 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,29 +1,30 @@
<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'">
- <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'">
- <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'">
- <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
- </button>
- </div>
- <div fxLayout="row">
- <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)" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()">
- <mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}" >keyboard_arrow_up</mat-icon>
+ <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'">
+ <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'">
+ <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
</button>
- <h2>{{comment.score}}</h2>
- <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 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>
+ <div fxLayout="row">
+ <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
+ <span class="fill-remaining-space"></span>
+ <div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()">
+ <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)" >
+ <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)">
+ <mat-icon class="voting-icon" [ngClass]="{'downvoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
+ </button>
+ </div>
+ </div>
</div>
- </div>
-</mat-card>
\ No newline at end of file
+ </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 dacdf4995..66ac86883 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -14,9 +14,9 @@ import { trigger, transition, style, animate, state, keyframes } from '@angular/
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(1.05, 0.75, 1)', offset: .3 }),
+ style({ transform: 'scale3d(0.75, 1.05, 1)', offset: .4 }),
+ style({ transform: 'scale3d(1.05, 0.95, 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 })
@@ -32,7 +32,7 @@ export const rubberBand = [
transition('void <=> *', animate(700)),
]),
trigger('rubberBand', [
- transition('* => rubberBand', animate(900, keyframes(rubberBand))),
+ transition('* => rubberBand', animate(1000, keyframes(rubberBand))),
])
]
})
--
GitLab