Skip to content

Commit 574552e

Browse files
lohanidamodarlohanidamodar
committed
timeline component final
1 parent b6b5b66 commit 574552e

File tree

6 files changed

+54
-35
lines changed

6 files changed

+54
-35
lines changed

‎src/app/app.imports.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { FlashCardComponent } from '../components/flash-card/flash-card';
2929
import { AccordionListComponent } from '../components/accordion-list/accordion-list';
3030
import { TimelineComponent } from '../components/timeline/timeline';
3131
import { TimelineItemComponent } from '../components/timeline/timeline';
32+
import { TimelineTimeComponent } from '../components/timeline/timeline';
3233

3334

3435
// Pipes
@@ -79,7 +80,8 @@ export const COMPONENTS = [
7980
Autosize,
8081
AccordionListComponent,
8182
TimelineComponent,
82-
TimelineItemComponent
83+
TimelineItemComponent,
84+
TimelineTimeComponent
8385
];
8486

8587
export const DIRECTIVES = [

‎src/components/timeline/timeline.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ng-content></ng-content>
33

44
<timeline-item>
5-
<ion-icon class="" name="ionic"></ion-icon>
5+
<ion-icon class="" [name]="endIcon"></ion-icon>
66
</timeline-item>
77

88
</div>

‎src/components/timeline/timeline.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ timeline {
1818
position: relative;
1919
display: inline-block;
2020

21-
time {
21+
timeline-time {
2222
display: block;
2323
width: 20%;
2424
padding-right: 50px;
@@ -77,7 +77,7 @@ timeline {
7777
}
7878
@media screen and (max-width: map-get($grid-breakpoints,'lg')){
7979
timeline-item{
80-
time{
80+
timeline-time{
8181
font-size: 0.7em;
8282
}
8383
}
@@ -93,7 +93,7 @@ timeline {
9393
ion-icon{
9494
left: 30px;
9595
}
96-
time{
96+
timeline-time{
9797
font-size: 0.8em;
9898
width: 100%;
9999
left: 80px;
@@ -119,10 +119,13 @@ timeline {
119119
left: auto;
120120
margin: -55px 5px 0 0;
121121
&:after{
122-
border-width: 0;
122+
border-left-color: transparent;
123+
border-top-color: #afdcf8;
124+
top: 46px;
125+
left: 10px;
123126
}
124127
}
125-
time{
128+
timeline-time{
126129
width: 100%;
127130
position: relative;
128131
padding: 0 0 20px 0;

‎src/components/timeline/timeline.ts

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Component } from '@angular/core';
2-
3-
/**
4-
* Generated class for the TimelineComponent component.
5-
*
6-
* See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
7-
* for more info on Angular Components.
8-
*/
1+
import { Component, Input } from '@angular/core';
2+
93
@Component({
104
selector: 'timeline',
115
templateUrl: 'timeline.html'
126
})
137
export class TimelineComponent {
14-
8+
@Input('endIcon') endIcon = "ionic";
159
constructor() {
1610

1711
}
@@ -27,3 +21,15 @@ export class TimelineItemComponent{
2721

2822
}
2923
}
24+
25+
26+
@Component({
27+
selector:'timeline-time',
28+
template: '<span>{{time.subtitle}}</span> <span>{{time.title}}</span>'
29+
})
30+
export class TimelineTimeComponent{
31+
@Input('time') time = {};
32+
constructor(){
33+
34+
}
35+
}

‎src/pages/timeline/timeline.html

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,16 @@
1010

1111

1212
<ion-content padding>
13-
<timeline>
14-
<timeline-item>
15-
<time datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
16-
<ion-icon class="" name="calendar"></ion-icon>
13+
<timeline endIcon="call">
14+
<timeline-item *ngFor="let item of items">
15+
<timeline-time [time]="item.time"></timeline-time>
16+
<ion-icon [name]="item.icon"></ion-icon>
1717
<ion-card>
1818
<ion-card-header>
19-
<h3>Courgette daikon</h3>
19+
{{item.title}}
2020
</ion-card-header>
2121
<ion-card-content>
22-
<p>Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.</p>
23-
</ion-card-content>
24-
</ion-card>
25-
</timeline-item>
26-
27-
<timeline-item>
28-
<time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
29-
<ion-icon class="" name="calendar"></ion-icon>
30-
<ion-card>
31-
<ion-card-header>
32-
<h3>Courgette daikon</h3>
33-
</ion-card-header>
34-
<ion-card-content>
35-
<p>Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.</p>
22+
{{item.content}}
3623
</ion-card-content>
3724
</ion-card>
3825
</timeline-item>

‎src/pages/timeline/timeline.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,27 @@ import { NavController, NavParams, IonicPage } from 'ionic-angular';
1414
})
1515
export class TimelinePage {
1616

17+
items = [
18+
{
19+
title: 'Courgette daikon',
20+
content: 'Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.',
21+
icon: 'calendar',
22+
time: {subtitle: '4/16/2013', title: '21:30'}
23+
},
24+
{
25+
title: 'Courgette daikon',
26+
content: 'Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.',
27+
icon: 'calendar',
28+
time: {subtitle: 'January', title: '29'}
29+
},
30+
{
31+
title: 'Courgette daikon',
32+
content: 'Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.',
33+
icon: 'calendar',
34+
time: {title: 'Short Text'}
35+
}
36+
]
37+
1738
constructor(public navCtrl: NavController, public navParams: NavParams) {
1839
}
1940

0 commit comments

Comments
 (0)