Skip to content

Commit f15b16e

Browse files
silverbuxsilverbux
committed
Added ui timeline component (silverbux#40)
1 parent 8f7f17c commit f15b16e

File tree

7 files changed

+181
-1
lines changed

7 files changed

+181
-1
lines changed

‎angular/app/components/nav-sidebar/nav-sidebar.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<li><a ui-sref="app.uiicons"><i class="fa fa-circle-o"></i> Icons</a></li>
8686
<li><a ui-sref="app.uibuttons"><i class="fa fa-circle-o"></i> Buttons</a></li>
8787
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Sliders</a></li>
88-
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Timeline</a></li>
88+
<li><a ui-sref="app.uitimeline"><i class="fa fa-circle-o"></i> Timeline</a></li>
8989
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Modals</a></li>
9090
</ul>
9191
</li>

‎angular/app/components/ui-timeline/ui-timeline.component.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<section class="content-header">
2+
<h1>
3+
Timeline
4+
<small>example</small>
5+
</h1>
6+
<ol class="breadcrumb">
7+
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
8+
<li><a href="#">UI</a></li>
9+
<li class="active">Timeline</li>
10+
</ol>
11+
</section>
12+
<section class="content">
13+
<div class="row">
14+
<div class="col-md-12">
15+
<ul class="timeline">
16+
<li class="time-label">
17+
<span class="bg-red">
18+
10 Feb. 2014
19+
</span>
20+
</li>
21+
<li>
22+
<i class="fa fa-envelope bg-blue"></i>
23+
<div class="timeline-item">
24+
<span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
25+
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
26+
<div class="timeline-body">
27+
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo...
28+
</div>
29+
<div class="timeline-footer">
30+
<a class="btn btn-primary btn-xs">Read more</a>
31+
<a class="btn btn-danger btn-xs">Delete</a>
32+
</div>
33+
</div>
34+
</li>
35+
<li>
36+
<i class="fa fa-user bg-aqua"></i>
37+
<div class="timeline-item">
38+
<span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>
39+
<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
40+
</div>
41+
</li>
42+
<li>
43+
<i class="fa fa-comments bg-yellow"></i>
44+
<div class="timeline-item">
45+
<span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>
46+
<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
47+
<div class="timeline-body">
48+
Take me to your leader! Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!
49+
</div>
50+
<div class="timeline-footer">
51+
<a class="btn btn-warning btn-flat btn-xs">View comment</a>
52+
</div>
53+
</div>
54+
</li>
55+
<li class="time-label">
56+
<span class="bg-green">
57+
3 Jan. 2014
58+
</span>
59+
</li>
60+
<li>
61+
<i class="fa fa-camera bg-purple"></i>
62+
<div class="timeline-item">
63+
<span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
64+
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
65+
<div class="timeline-body">
66+
<img src="http://placehold.it/150x100" alt="..." class="margin">
67+
<img src="http://placehold.it/150x100" alt="..." class="margin">
68+
<img src="http://placehold.it/150x100" alt="..." class="margin">
69+
<img src="http://placehold.it/150x100" alt="..." class="margin">
70+
</div>
71+
</div>
72+
</li>
73+
<li>
74+
<i class="fa fa-video-camera bg-maroon"></i>
75+
<div class="timeline-item">
76+
<span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span>
77+
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
78+
<div class="timeline-body">
79+
<div class="embed-responsive embed-responsive-16by9">
80+
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe>
81+
</div>
82+
</div>
83+
<div class="timeline-footer">
84+
<a href="#" class="btn btn-xs bg-maroon">See comments</a>
85+
</div>
86+
</div>
87+
</li>
88+
<li>
89+
<i class="fa fa-clock-o bg-gray"></i>
90+
</li>
91+
</ul>
92+
</div>
93+
</div>
94+
<div class="row" style="margin-top: 10px;">
95+
<div class="col-md-12">
96+
<div class="box box-primary">
97+
<div class="box-header">
98+
<h3 class="box-title"><i class="fa fa-code"></i> Timeline Markup</h3>
99+
</div>
100+
<div class="box-body">
101+
<pre style="font-weight: 600;">
102+
&lt;ul class="timeline">
103+
104+
&lt;!-- timeline time label -->
105+
&lt;li class="time-label">
106+
&lt;span class="bg-red">
107+
10 Feb. 2014
108+
&lt;/span>
109+
&lt;/li>
110+
&lt;!-- /.timeline-label -->
111+
112+
&lt;!-- timeline item -->
113+
&lt;li>
114+
&lt;!-- timeline icon -->
115+
&lt;i class="fa fa-envelope bg-blue">&lt;/i>
116+
&lt;div class="timeline-item">
117+
&lt;span class="time">&lt;i class="fa fa-clock-o">&lt;/i> 12:05&lt;/span>
118+
119+
&lt;h3 class="timeline-header">&lt;a href="#">Support Team&lt;/a> ...&lt;/h3>
120+
121+
&lt;div class="timeline-body">
122+
...
123+
Content goes here
124+
&lt;/div>
125+
126+
&lt;div class="timeline-footer">
127+
&lt;a class="btn btn-primary btn-xs">...&lt;/a>
128+
&lt;/div>
129+
&lt;/div>
130+
&lt;/li>
131+
&lt;!-- END timeline item -->
132+
133+
...
134+
135+
&lt;/ul>
136+
</pre>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
</section>

‎angular/app/components/ui-timeline/ui-timeline.component.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
class UiTimelineController {
2+
constructor () {
3+
'ngInject'
4+
5+
//
6+
}
7+
8+
$onInit () {}
9+
}
10+
11+
export const UiTimelineComponent = {
12+
templateUrl: './views/app/components/ui-timeline/ui-timeline.component.html',
13+
controller: UiTimelineController,
14+
controllerAs: 'vm',
15+
bindings: {}
16+
}

‎angular/app/components/ui-timeline/ui-timeline.scss

Whitespace-only changes.

‎angular/config/routes.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
5252
}
5353
}
5454
})
55+
.state('app.uitimeline', {
56+
url: '/ui-timeline',
57+
data: {
58+
auth: true
59+
},
60+
views: {
61+
'main@app': {
62+
template: '<ui-timeline></ui-timeline>'
63+
}
64+
}
65+
})
5566
.state('app.uibuttons', {
5667
url: '/ui-buttons',
5768
data: {

‎angular/index.components.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { UiTimelineComponent } from './app/components/ui-timeline/ui-timeline.component'
12
import { UiButtonsComponent } from './app/components/ui-buttons/ui-buttons.component'
23
import { UiIconsComponent } from './app/components/ui-icons/ui-icons.component'
34
import { UiGeneralComponent } from './app/components/ui-general/ui-general.component'
@@ -25,6 +26,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
2526
import { RegisterFormComponent } from './app/components/register-form/register-form.component'
2627

2728
angular.module('app.components')
29+
.component('uiTimeline', UiTimelineComponent)
2830
.component('uiButtons', UiButtonsComponent)
2931
.component('uiIcons', UiIconsComponent)
3032
.component('uiGeneral', UiGeneralComponent)

‎tests/angular/app/components/ui-timeline.component.spec.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
ngDescribe({
2+
name: 'Test ui-timeline component',
3+
modules: 'app',
4+
element: '<ui-timeline></ui-timeline>',
5+
tests: function (deps) {
6+
it('basic test', () => {
7+
//
8+
})
9+
}
10+
})

0 commit comments

Comments
 (0)