Skip to content

Commit

Permalink
refactor(board-page.component): better animations
Browse files Browse the repository at this point in the history 
animations improved and refactored `board-page.component.ts`
  • Loading branch information
@andreasonny83
andreasonny83 committed Jun 3, 2017
1 parent 88783f6 commit bff05f3
Show file tree
Hide file tree
Showing 8 changed files with 49 additions and 70 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/router": "4.1.3",
"angular2-cookie-law": "1.1.2",
"angular2-cookie-law": "1.2.4",
"angularfire2": "4.0.0-rc.0",
"classlist.js": "1.1.20150312",
"core-js": "2.4.1",
Expand Down
28 changes: 22 additions & 6 deletions src/app/app.animations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
state,
style,
animate,
group,
transition
} from '@angular/animations';

Expand Down Expand Up @@ -48,16 +49,31 @@ export const fadeIn =

export const fadeInOut =
trigger('fadeInOut', [
state('void', style({ opacity: 1 })),
state('*', style({ opacity: 1 })),
state('void', style({
opacity: 0,
transform: 'scale(0.8)',
height: '1px',
})),
state('*', style({
opacity: '0.8',
transform: 'scale(1)',
height: '*',
})),

transition(':enter', [
style({ opacity: 0 }),
animate('.3s ease-in-out', style({ opacity: 1 })),
style({ opacity: '0', transform: 'scale(0.8)', height: '0' }),
group([
animate('.15s ease-in', style({ height: '*' })),
animate('.2s ease-in', style({ transform: 'scale(1)' })),
animate('.3s ease-in', style({ opacity: '0.8' })),
]),
]),

transition(':leave', [
style({ opacity: 1 }),
animate('.3s ease-in-out', style({ opacity: 0 })),
group([
animate('.2s ease-out', style({ transform: 'scale(0.8)' })),
animate('.25s ease-out', style({ opacity: '0' })),
animate('.1s .25s ease-out', style({ height: '0' })),
]),
]),
]);
8 changes: 4 additions & 4 deletions src/app/board-page/board-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ <h3 class="board-name">{{ (boardObj | async)?.name }}</h3>
<md-icon>{{ column.icon }}</md-icon>
</div>

<md-card *ngFor="let post of (boardObj | async).posts | keyobject | filterColumn: columnID; let i = index;"
<md-card *ngFor="let post of (boardObj | async).posts | keyobject | filterColumn: columnID;
let i = index;"
[style.background]="column.color"
[class]="postClass(columnID, i)"
id="post-{{columnID}}-{{i}}"
draggable="true"
(dragstart)="onDragStart($event, post.key, columnID, i)"
[class.dragging]="isDragging(columnID, i)"
class="note pinned-note mat-elevation-z2">
(dragstart)="onDragStart($event, post.key, columnID, i)">
<img class="edit-icon"
(click)="editEl = columnID + '-' + i"
src="../../assets/images/marker.png"
Expand Down
4 changes: 2 additions & 2 deletions src/app/board-page/board-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,12 @@
}

.pinned-note:active {
opacity: 0.8;
border: 2px dashed rgba(0, 0, 0, 0.5);
cursor: grabbing;
}

.pinned-note.dragging {
cursor: grabbing;
border: 2px dashed rgba(0, 0, 0, 0.5);
}

.pinned-note .mat-card-footer .note-author:hover {
Expand Down
10 changes: 6 additions & 4 deletions src/app/board-page/board-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,17 +116,19 @@ export class BoardPageComponent implements OnInit, OnDestroy {
this.dragging = true;
}

public isDragging(columnID: number, index: number): boolean {
return this.draggingEl === `${columnID}-${index}`;
public postClass(columnID: number, index: number): string {
return this.draggingEl === `${columnID}-${index}` ?
'mat-card note pinned-note dragging mat-elevation-z20' :
'mat-card note pinned-note mat-elevation-z2';
}

public onDrop(event: DragEvent) {
public onDrop(event: DragEvent): void {
this.dragging = false;
this.draggingEl = null;
event.preventDefault();
}

public ngOnDestroy() {
public ngOnDestroy(): void {
this.routerSubscriber$.unsubscribe();
this.boardService.currentBoard = <IBoardService>{};
}
Expand Down
1 change: 0 additions & 1 deletion src/app/dropping-card/dropping-card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,4 @@
border-radius: 9px;
color: rgba(0, 0, 0, 0.6);
border: 2px dashed rgba(0, 0, 0, 0.6);
transition: opacity .5s ease-in-out;
}
4 changes: 3 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,9 @@ const config = {
}
}),

new ProgressPlugin(),
new ProgressPlugin({
autoUpdate: 1000 * 60 * 60 * 24, // auto update the cache every day
}),

new HtmlWebpackPlugin({
"template": "./src/index.template.sjs",
Expand Down
62 changes: 11 additions & 51 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ ajv-keywords@^1.1.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"

ajv@5.0.1:
ajv@5.0.1, ajv@^5.0.0:
version "5.0.1"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.0.1.tgz#5fd1a8f5cc92b371aa86445b1152fd4dec844ac9"
dependencies:
Expand All @@ -316,13 +316,6 @@ ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
co "^4.6.0"
json-stable-stringify "^1.0.1"

ajv@^5.0.0:
version "5.1.5"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.1.5.tgz#8734931b601f00d4feef7c65738d77d1b65d1f68"
dependencies:
co "^4.6.0"
json-stable-stringify "^1.0.1"

align-text@^0.1.1, align-text@^0.1.3:
version "0.1.4"
resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
Expand All @@ -339,9 +332,9 @@ amdefine@>=0.0.4:
version "1.0.1"
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"

angular2-cookie-law@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/angular2-cookie-law/-/angular2-cookie-law-1.1.2.tgz#76dfd34ca60f50a691bf8ea15741aa6dde94f51a"
angular2-cookie-law@1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/angular2-cookie-law/-/angular2-cookie-law-1.2.4.tgz#0e9fddb5acdff4d01d08b1cd2fa87362eb47f31d"

angularfire2@4.0.0-rc.0:
version "4.0.0-rc.0"
Expand Down Expand Up @@ -1940,7 +1933,7 @@ debug@2.6.7:
dependencies:
ms "2.0.0"

debuglog@*, debuglog@^1.0.1:
debuglog@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"

Expand Down Expand Up @@ -3652,7 +3645,7 @@ immutable@3.8.1, immutable@^3.7.6:
version "3.8.1"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"

imurmurhash@*, imurmurhash@^0.1.4:
imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"

Expand Down Expand Up @@ -4590,39 +4583,17 @@ lockfile@~1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/lockfile/-/lockfile-1.0.3.tgz#2638fc39a0331e9cac1a04b71799931c9c50df79"

lodash._baseindexof@*:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"

lodash._baseuniq@~4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
dependencies:
lodash._createset "~4.0.0"
lodash._root "~3.0.0"

lodash._bindcallback@*:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"

lodash._cacheindexof@*:
version "3.0.2"
resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"

lodash._createcache@*:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
dependencies:
lodash._getnative "^3.0.0"

lodash._createset@~4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"

lodash._getnative@*, lodash._getnative@^3.0.0:
version "3.9.1"
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"

lodash._isnative@~2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/lodash._isnative/-/lodash._isnative-2.4.1.tgz#3ea6404b784a7be836c7b57580e1cdf79b14832c"
Expand Down Expand Up @@ -4703,10 +4674,6 @@ lodash.once@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"

lodash.restparam@*:
version "3.6.1"
resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"

lodash.tail@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
Expand Down Expand Up @@ -6518,7 +6485,7 @@ readable-stream@~2.0.0:
string_decoder "~0.10.x"
util-deprecate "~1.0.1"

readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
readdir-scoped-modules@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
dependencies:
Expand Down Expand Up @@ -7986,8 +7953,8 @@ uglify-js@3.0.x:
source-map "~0.5.1"

uglify-js@^2.6, uglify-js@^2.8.27, uglify-js@^2.8.5:
version "2.8.27"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.27.tgz#47787f912b0f242e5b984343be8e35e95f694c9c"
version "2.8.28"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.28.tgz#e335032df9bb20dcb918f164589d5af47f38834a"
dependencies:
source-map "~0.5.1"
yargs "~3.10.0"
Expand Down Expand Up @@ -8241,7 +8208,7 @@ valid-url@^1:
version "1.0.9"
resolved "https://registry.yarnpkg.com/valid-url/-/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200"

validate-npm-package-license@*, validate-npm-package-license@^3.0.1:
validate-npm-package-license@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
dependencies:
Expand Down Expand Up @@ -8592,20 +8559,13 @@ ws@1.1.1:
options ">=0.0.5"
ultron "1.0.x"

ws@1.1.2:
ws@1.1.2, ws@^1.0.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
dependencies:
options ">=0.0.5"
ultron "1.0.x"

ws@^1.0.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
dependencies:
options ">=0.0.5"
ultron "1.0.x"

wtf-8@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"
Expand Down

0 comments on commit bff05f3

Please sign in to comment.