Skip to content
This repository has been archived by the owner on Aug 11, 2022. It is now read-only.

Commit

Permalink
Added ui timeline component (#40)
Browse files Browse the repository at this point in the history
  • Loading branch information
@silverbux
silverbux committed Jun 8, 2016
1 parent 8f7f17c commit f15b16e
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 1 deletion.
2 changes: 1 addition & 1 deletion angular/app/components/nav-sidebar/nav-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
<li><a ui-sref="app.uiicons"><i class="fa fa-circle-o"></i> Icons</a></li>
<li><a ui-sref="app.uibuttons"><i class="fa fa-circle-o"></i> Buttons</a></li>
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Sliders</a></li>
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Timeline</a></li>
<li><a ui-sref="app.uitimeline"><i class="fa fa-circle-o"></i> Timeline</a></li>
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Modals</a></li>
</ul>
</li>
Expand Down
141 changes: 141 additions & 0 deletions angular/app/components/ui-timeline/ui-timeline.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<section class="content-header">
<h1>
Timeline
<small>example</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">UI</a></li>
<li class="active">Timeline</li>
</ol>
</section>
<section class="content">
<div class="row">
<div class="col-md-12">
<ul class="timeline">
<li class="time-label">
<span class="bg-red">
10 Feb. 2014
</span>
</li>
<li>
<i class="fa fa-envelope bg-blue"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
<div class="timeline-body">
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...
</div>
<div class="timeline-footer">
<a class="btn btn-primary btn-xs">Read more</a>
<a class="btn btn-danger btn-xs">Delete</a>
</div>
</div>
</li>
<li>
<i class="fa fa-user bg-aqua"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>
<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
</div>
</li>
<li>
<i class="fa fa-comments bg-yellow"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>
<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
<div class="timeline-body">
Take me to your leader! Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!
</div>
<div class="timeline-footer">
<a class="btn btn-warning btn-flat btn-xs">View comment</a>
</div>
</div>
</li>
<li class="time-label">
<span class="bg-green">
3 Jan. 2014
</span>
</li>
<li>
<i class="fa fa-camera bg-purple"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
<div class="timeline-body">
<img src="http://placehold.it/150x100" alt="..." class="margin">
<img src="http://placehold.it/150x100" alt="..." class="margin">
<img src="http://placehold.it/150x100" alt="..." class="margin">
<img src="http://placehold.it/150x100" alt="..." class="margin">
</div>
</div>
</li>
<li>
<i class="fa fa-video-camera bg-maroon"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span>
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
<div class="timeline-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="timeline-footer">
<a href="#" class="btn btn-xs bg-maroon">See comments</a>
</div>
</div>
</li>
<li>
<i class="fa fa-clock-o bg-gray"></i>
</li>
</ul>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"><i class="fa fa-code"></i> Timeline Markup</h3>
</div>
<div class="box-body">
<pre style="font-weight: 600;">
&lt;ul class="timeline">

&lt;!-- timeline time label -->
&lt;li class="time-label">
&lt;span class="bg-red">
10 Feb. 2014
&lt;/span>
&lt;/li>
&lt;!-- /.timeline-label -->

&lt;!-- timeline item -->
&lt;li>
&lt;!-- timeline icon -->
&lt;i class="fa fa-envelope bg-blue">&lt;/i>
&lt;div class="timeline-item">
&lt;span class="time">&lt;i class="fa fa-clock-o">&lt;/i> 12:05&lt;/span>

&lt;h3 class="timeline-header">&lt;a href="#">Support Team&lt;/a> ...&lt;/h3>

&lt;div class="timeline-body">
...
Content goes here
&lt;/div>

&lt;div class="timeline-footer">
&lt;a class="btn btn-primary btn-xs">...&lt;/a>
&lt;/div>
&lt;/div>
&lt;/li>
&lt;!-- END timeline item -->

...

&lt;/ul>
</pre>
</div>
</div>
</div>
</div>
</section>
16 changes: 16 additions & 0 deletions angular/app/components/ui-timeline/ui-timeline.component.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
class UiTimelineController {
constructor () {
'ngInject'

//
}

$onInit () {}
}

export const UiTimelineComponent = {
templateUrl: './views/app/components/ui-timeline/ui-timeline.component.html',
controller: UiTimelineController,
controllerAs: 'vm',
bindings: {}
}
Empty file added angular/app/components/ui-timeline/ui-timeline.scss
View file
Empty file.
11 changes: 11 additions & 0 deletions angular/config/routes.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
}
}
})
.state('app.uitimeline', {
url: '/ui-timeline',
data: {
auth: true
},
views: {
'main@app': {
template: '<ui-timeline></ui-timeline>'
}
}
})
.state('app.uibuttons', {
url: '/ui-buttons',
data: {
Expand Down
2 changes: 2 additions & 0 deletions angular/index.components.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { UiTimelineComponent } from './app/components/ui-timeline/ui-timeline.component'
import { UiButtonsComponent } from './app/components/ui-buttons/ui-buttons.component'
import { UiIconsComponent } from './app/components/ui-icons/ui-icons.component'
import { UiGeneralComponent } from './app/components/ui-general/ui-general.component'
Expand Down Expand Up @@ -25,6 +26,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
import { RegisterFormComponent } from './app/components/register-form/register-form.component'

angular.module('app.components')
.component('uiTimeline', UiTimelineComponent)
.component('uiButtons', UiButtonsComponent)
.component('uiIcons', UiIconsComponent)
.component('uiGeneral', UiGeneralComponent)
Expand Down
10 changes: 10 additions & 0 deletions tests/angular/app/components/ui-timeline.component.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
ngDescribe({
name: 'Test ui-timeline component',
modules: 'app',
element: '<ui-timeline></ui-timeline>',
tests: function (deps) {
it('basic test', () => {
//
})
}
})

0 comments on commit f15b16e

Please sign in to comment.