Skip to content

Commit ac0e9b6

Browse files
sstoriesstorie
committed
Merged feature/animated-side-panel into develop
2 parents 884ce22 + 33b1226 commit ac0e9b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1163
-2
lines changed

‎.gitignore

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99

1010
## Specific folder ignores
1111
##
12-
*/app/*.js
13-
*/app/*.js.map
12+
*/app/**/*.js
13+
*/app/**/*.js.map
1414
*/typings/*
1515

1616
## Ignore Visual Studio temporary files, build results, and

‎angular2-animated-notifications-panel/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Running the example
2+
3+
This uses the method described in the Angular 2 quick start guide, so you need to first install packages, and then you should be able to just run things:
4+
5+
```
6+
npm install
7+
npm start
8+
```
9+
10+
That should compile everything for you and launch a browser that will react to changes in any file.

‎angular2-animated-notifications-panel/app/app.component.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
:host {
3+
flex: 1;
4+
display: flex;
5+
flex-direction: column;
6+
min-height: 0;
7+
min-width: 0;
8+
}
9+
10+
.title {
11+
height: 40px;
12+
display: flex;
13+
flex-direction: row;
14+
align-items: center;
15+
background-color: #2C3E50;
16+
color: #ECF0F1;
17+
}
18+
19+
.container {
20+
flex: 1;
21+
display: flex;
22+
flex-direction: row;
23+
}
24+
25+
.content {
26+
flex: 1;
27+
display: flex;
28+
flex-direction: row;
29+
justify-content: center;
30+
min-width: 0;
31+
min-height: 0;
32+
padding: 8px;
33+
}

‎angular2-animated-notifications-panel/app/app.component.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="title">
2+
<span>Title bar</span>
3+
</div>
4+
5+
<div class="container">
6+
7+
<div class="content">
8+
<span>Content</span>
9+
</div>
10+
11+
<notification-panel></notification-panel>
12+
13+
</div>

‎angular2-animated-notifications-panel/app/app.component.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2+
3+
import {NotificationService} from "./shared/index";
4+
import {NotificationPanelComponent} from "./notification-panel/index";
5+
6+
@Component({
7+
selector: 'my-app',
8+
moduleId: module.id,
9+
directives: [NotificationPanelComponent],
10+
templateUrl: "app.component.html",
11+
styleUrls: ['app.component.css']
12+
})
13+
export class AppComponent {
14+
15+
constructor(
16+
private notificationService: NotificationService
17+
) {
18+
19+
for(let i = 0; i < 10; i++) {
20+
let n = this.notificationService.createRandomNotification();
21+
this.notificationService.addNotification(n);
22+
}
23+
24+
this.notificationService.startRandomGeneration();
25+
}
26+
}

‎angular2-animated-notifications-panel/app/main.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { bootstrap } from '@angular/platform-browser-dynamic';
2+
3+
import {NotificationService} from "./shared/index";
4+
import {AppComponent} from './app.component';
5+
6+
7+
bootstrap(AppComponent, [
8+
NotificationService
9+
]);

‎angular2-animated-notifications-panel/app/notification-panel/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
function __export(m) {
3+
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
4+
}
5+
__export(require("./notification-panel.component"));

‎angular2-animated-notifications-panel/app/notification-panel/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./notification-panel.component";

‎angular2-animated-notifications-panel/app/notification-panel/notification-panel.component.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
2+
:host {
3+
border-left: 1px solid #3498DB;
4+
display: flex;
5+
flex-direction: column;
6+
min-width: 0;
7+
min-height: 0;
8+
overflow: hidden;
9+
}
10+
11+
i {
12+
font-size: 1.5em;
13+
}
14+
15+
.container {
16+
flex: 1;
17+
display: flex;
18+
flex-direction: column;
19+
min-height: 0;
20+
min-width: 0;
21+
}
22+
23+
.title {
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: flex-end;
27+
color: #E74C3C;
28+
padding: 0 8px 0 8px;
29+
height: 38px;
30+
}
31+
32+
.title span {
33+
flex: 1;
34+
font-family: 'Hind', sans-serif;
35+
font-size: 1.5em;
36+
}
37+
38+
.title--collapsed {
39+
justify-content: flex-end;
40+
}
41+
42+
.notifications {
43+
flex: 1;
44+
overflow-y: auto;
45+
}
46+
47+
a {
48+
text-decoration: none;
49+
margin-top: 6px;
50+
}
51+
52+
a:hover {
53+
cursor: pointer;
54+
}

‎angular2-animated-notifications-panel/app/notification-panel/notification-panel.component.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="container" @panelWidthTrigger="expandedState">
2+
<div class="title" @titleColorTrigger="expandedState">
3+
<span *ngIf="expanded" @titleTextTrigger="'in'">Notifications</span>
4+
<a class="link" (click)="toggleExpandedState()">
5+
<i @iconTrigger="expandedState" class="fa fa-arrow-circle-left" aria-hidden="true"></i>
6+
</a>
7+
</div>
8+
9+
<div class="notifications">
10+
<notification *ngFor="let n of notifications"
11+
[notification]="n"
12+
[expanded]="expanded"></notification>
13+
</div>
14+
</div>

‎angular2-animated-notifications-panel/app/notification-panel/notification-panel.component.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import {
2+
Component,
3+
OnInit,
4+
OnDestroy,
5+
trigger,
6+
state,
7+
style,
8+
transition,
9+
animate
10+
} from '@angular/core';
11+
import {Subscription} from "rxjs/Rx";
12+
13+
import {Notification, NotificationService} from "../shared/index";
14+
import {NotificationComponent} from "../notification/index";
15+
16+
@Component({
17+
moduleId: module.id,
18+
selector: 'notification-panel',
19+
directives: [NotificationComponent],
20+
templateUrl: 'notification-panel.component.html',
21+
styleUrls: ['notification-panel.component.css'],
22+
animations: [
23+
trigger('panelWidthTrigger', [
24+
state('expanded', style({
25+
width: '300px'
26+
})),
27+
state('collapsed', style({
28+
width: '38px'
29+
})),
30+
transition('collapsed => expanded', animate('200ms ease-in')),
31+
transition('expanded => collapsed', animate('200ms 200ms ease-out'))
32+
]),
33+
trigger('titleColorTrigger', [
34+
state('collapsed', style({
35+
backgroundColor: '#FFFFFF',
36+
color: '#E74C3C'
37+
})),
38+
state('expanded', style({
39+
backgroundColor: '#E74C3C',
40+
color: '#FFFFFF'
41+
})),
42+
transition('collapsed => expanded', animate('200ms ease-in')),
43+
transition('expanded => collapsed', animate('200ms 200ms ease-out'))
44+
]),
45+
trigger('titleTextTrigger', [
46+
state('in', style({ opacity: '1' })),
47+
transition('void => *', [
48+
style({ opacity: '0' }),
49+
animate('100ms 300ms')
50+
]),
51+
transition('* => void', [
52+
animate('50ms', style({ opacity: '0' }))
53+
])
54+
]),
55+
trigger('iconTrigger', [
56+
state('collapsed', style({ transform: 'rotate(0deg)' })),
57+
state('expanded', style({ transform: 'rotate(180deg)' })),
58+
transition('collapsed => expanded', animate('200ms ease-in')),
59+
transition('expanded => collapsed', animate('200ms ease-out'))
60+
])
61+
]
62+
})
63+
export class NotificationPanelComponent implements OnInit, OnDestroy {
64+
expanded = false;
65+
expandedState = 'collapsed';
66+
67+
notifications: Notification[];
68+
notificationSub: Subscription;
69+
70+
constructor(
71+
private notificationService: NotificationService
72+
) {
73+
}
74+
75+
ngOnInit() {
76+
this.notificationSub = this.notificationService.notifications$.subscribe((notifications) => {
77+
this.notifications = notifications.sort((a, b) => b.date.valueOf() - a.date.valueOf()).slice(0, 10);
78+
});
79+
}
80+
81+
ngOnDestroy() {
82+
this.notificationSub.unsubscribe();
83+
}
84+
85+
toggleExpandedState() {
86+
this.expandedState = this.expanded ? 'collapsed' : 'expanded';
87+
this.expanded = !this.expanded;
88+
}
89+
90+
}

‎angular2-animated-notifications-panel/app/notification/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
function __export(m) {
3+
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
4+
}
5+
__export(require("./notification.component"));

‎angular2-animated-notifications-panel/app/notification/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./notification.component";

‎angular2-animated-notifications-panel/app/notification/notification.component.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
:host {
3+
display: flex;
4+
flex-direction: row;
5+
justify-content: center;
6+
min-height: 0;
7+
min-width: 0;
8+
max-height: 48px;
9+
padding: 8px;
10+
font-family: 'Hind', sans-serif;
11+
12+
}
13+
14+
.details {
15+
flex: 1;
16+
display: flex;
17+
flex-direction: column;
18+
margin-left: 8px;
19+
}
20+
21+
.icon {
22+
}
23+
24+
.message {
25+
26+
}
27+
28+
.date {
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: flex-end;
32+
font-size: 0.6em;
33+
color: #444444;
34+
}

‎angular2-animated-notifications-panel/app/notification/notification.component.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="icon" @visibleTrigger="'visible'" [ngSwitch]="notification.type">
2+
<i *ngSwitchCase="0" class="fa fa-comment"></i>
3+
<i *ngSwitchCase="1" class="fa fa-exclamation-triangle"></i>
4+
<i *ngSwitchCase="2" class="fa fa-code"></i>
5+
<i *ngSwitchCase="3" class="fa fa-credit-card"></i>
6+
</div>
7+
<div *ngIf="expanded" @visibleTrigger="'visible'" class="details">
8+
<div class="message">
9+
<span>{{notification.message}}</span>
10+
</div>
11+
<div class="date">
12+
<span>{{notification.date | date:'mediumTime'}}</span>
13+
</div>
14+
</div>

‎angular2-animated-notifications-panel/app/notification/notification.component.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {
2+
Component,
3+
OnInit,
4+
OnChanges,
5+
SimpleChanges,
6+
Input,
7+
Output,
8+
EventEmitter,
9+
trigger,
10+
state,
11+
style,
12+
transition,
13+
animate
14+
} from '@angular/core';
15+
16+
import {Notification, NotificationType} from "../shared/index";
17+
18+
@Component({
19+
moduleId: module.id,
20+
selector: 'notification',
21+
templateUrl: 'notification.component.html',
22+
styleUrls: ['notification.component.css'],
23+
animations: [
24+
trigger('visibleTrigger', [
25+
state('visible', style({ opacity: '1' })),
26+
transition('void => *', [
27+
style({ opacity: '0' }),
28+
animate('200ms 300ms')
29+
]),
30+
transition('* => void', [
31+
animate('200ms', style({ opacity: '0' }))
32+
])
33+
])
34+
]
35+
})
36+
export class NotificationComponent implements OnInit, OnChanges {
37+
@Input() notification: Notification;
38+
@Input() expanded: boolean;
39+
@Output() remove = new EventEmitter<any>(false);
40+
41+
expandedState = 'collapsed';
42+
43+
notificationTypes = NotificationType;
44+
45+
constructor() { }
46+
47+
ngOnInit() { }
48+
49+
ngOnChanges(changes: SimpleChanges) {
50+
if (changes["expanded"] !== undefined) {
51+
this.expandedState = this.expanded ? 'expanded' : 'collapsed';
52+
}
53+
}
54+
}

0 commit comments

Comments
 (0)