From fa792f3426dab640ddbbf797d95c2ab2fd55b54a Mon Sep 17 00:00:00 2001 From: alex quiambao Date: Wed, 8 Jun 2016 16:13:48 +0800 Subject: [PATCH] Added ui timeline component --- .../nav-sidebar/nav-sidebar.component.html | 2 +- .../ui-timeline/ui-timeline.component.html | 141 ++++++++++++++++++ .../ui-timeline/ui-timeline.component.js | 16 ++ .../components/ui-timeline/ui-timeline.scss | 0 angular/config/routes.config.js | 11 ++ angular/index.components.js | 2 + .../components/ui-timeline.component.spec.js | 10 ++ 7 files changed, 181 insertions(+), 1 deletion(-) create mode 100644 angular/app/components/ui-timeline/ui-timeline.component.html create mode 100644 angular/app/components/ui-timeline/ui-timeline.component.js create mode 100644 angular/app/components/ui-timeline/ui-timeline.scss create mode 100644 tests/angular/app/components/ui-timeline.component.spec.js diff --git a/angular/app/components/nav-sidebar/nav-sidebar.component.html b/angular/app/components/nav-sidebar/nav-sidebar.component.html index c110ccd..4beac68 100644 --- a/angular/app/components/nav-sidebar/nav-sidebar.component.html +++ b/angular/app/components/nav-sidebar/nav-sidebar.component.html @@ -85,7 +85,7 @@
  • Icons
  • Buttons
  • Sliders
    • -
  • Timeline
    • +
  • Timeline
  • Modals
    • diff --git a/angular/app/components/ui-timeline/ui-timeline.component.html b/angular/app/components/ui-timeline/ui-timeline.component.html new file mode 100644 index 0000000..43a474d --- /dev/null +++ b/angular/app/components/ui-timeline/ui-timeline.component.html @@ -0,0 +1,141 @@ +
    +

    + Timeline + example +

    +
      +
    1. Home
      2. +
    2. UI
      3. +
    3. Timeline
      4. +
    +
    +
    +
    +
    +
      +
    • + + 10 Feb. 2014 + +
      • +
    • + +
      + 12:05 +

      Support Team sent you an email

      +
      + 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... +
      +
      + Read more + Delete +
      +
      +
      • +
    • + +
      + 5 mins ago +

      Sarah Young accepted your friend request

      +
      +
      • +
    • + +
      + 27 mins ago +

      Jay White commented on your post

      +
      + Take me to your leader! Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood! +
      +
      + View comment +
      +
      +
      • +
    • + + 3 Jan. 2014 + +
      • +
    • + +
      + 2 days ago +

      Mina Lee uploaded new photos

      +
      + ... + ... + ... + ... +
      +
      +
      • +
    • + +
      + 5 days ago +

      Mr. Doe shared a video

      +
      +
      + +
      +
      +
      + See comments +
      +
      +
      • +
    • + +
      • +
    +
    +
    +
    +
    +
    +
    +

    Timeline Markup

    +
    +
    + 
    +<ul class="timeline">
+
+    <!-- timeline time label -->
+    <li class="time-label">
+        <span class="bg-red">
+            10 Feb. 2014
+        </span>
+    </li>
+    <!-- /.timeline-label -->
+
+    <!-- timeline item -->
+    <li>
+        <!-- timeline icon -->
+        <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> ...</h3>
+
+            <div class="timeline-body">
+                ...
+                Content goes here
+            </div>
+
+            <div class="timeline-footer">
+                <a class="btn btn-primary btn-xs">...</a>
+            </div>
+        </div>
+    </li>
+    <!-- END timeline item -->
+
+    ...
+
+</ul>
+
    +
    +
    +
    +
    +
    diff --git a/angular/app/components/ui-timeline/ui-timeline.component.js b/angular/app/components/ui-timeline/ui-timeline.component.js new file mode 100644 index 0000000..498d92e --- /dev/null +++ b/angular/app/components/ui-timeline/ui-timeline.component.js @@ -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: {} +} diff --git a/angular/app/components/ui-timeline/ui-timeline.scss b/angular/app/components/ui-timeline/ui-timeline.scss new file mode 100644 index 0000000..e69de29 diff --git a/angular/config/routes.config.js b/angular/config/routes.config.js index bacdf66..5d06d3c 100644 --- a/angular/config/routes.config.js +++ b/angular/config/routes.config.js @@ -52,6 +52,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) { } } }) + .state('app.uitimeline', { + url: '/ui-timeline', + data: { + auth: true + }, + views: { + 'main@app': { + template: '' + } + } + }) .state('app.uibuttons', { url: '/ui-buttons', data: { diff --git a/angular/index.components.js b/angular/index.components.js index 7750f4d..71319a1 100644 --- a/angular/index.components.js +++ b/angular/index.components.js @@ -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' @@ -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) diff --git a/tests/angular/app/components/ui-timeline.component.spec.js b/tests/angular/app/components/ui-timeline.component.spec.js new file mode 100644 index 0000000..048348e --- /dev/null +++ b/tests/angular/app/components/ui-timeline.component.spec.js @@ -0,0 +1,10 @@ +ngDescribe({ + name: 'Test ui-timeline component', + modules: 'app', + element: '', + tests: function (deps) { + it('basic test', () => { + // + }) + } +})