You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by jo...@apache.org on 2014/01/18 01:50:58 UTC

[1/2] git commit: [#4257] Added basic paging to Activity page

Updated Branches:
  refs/heads/cj/4257 [created] daca639d6


[#4257] Added basic paging to Activity page

Signed-off-by: Cory Johns <cj...@slashdotmedia.com>


Project: http://git-wip-us.apache.org/repos/asf/incubator-allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-allura/commit/75764592
Tree: http://git-wip-us.apache.org/repos/asf/incubator-allura/tree/75764592
Diff: http://git-wip-us.apache.org/repos/asf/incubator-allura/diff/75764592

Branch: refs/heads/cj/4257
Commit: 75764592b3d98a9fe1231e5e5cba74761e1af21c
Parents: f6b77b8
Author: Cory Johns <cj...@slashdotmedia.com>
Authored: Sat Jan 18 00:46:57 2014 +0000
Committer: Cory Johns <cj...@slashdotmedia.com>
Committed: Sat Jan 18 00:46:57 2014 +0000

----------------------------------------------------------------------
 Allura/allura/lib/widgets/form_fields.py         | 14 +++++++++++++-
 Allura/allura/templates/widgets/page_list.html   |  6 ++++--
 ForgeActivity/forgeactivity/main.py              | 13 +++++++++++--
 ForgeActivity/forgeactivity/templates/index.html |  1 +
 4 files changed, 29 insertions(+), 5 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/75764592/Allura/allura/lib/widgets/form_fields.py
----------------------------------------------------------------------
diff --git a/Allura/allura/lib/widgets/form_fields.py b/Allura/allura/lib/widgets/form_fields.py
index 2249372..e3060dc 100644
--- a/Allura/allura/lib/widgets/form_fields.py
+++ b/Allura/allura/lib/widgets/form_fields.py
@@ -285,7 +285,9 @@ class PageList(ew_core.Widget):
         limit=None,
         count=0,
         page=0,
-        show_label=False)
+        show_label=True,
+        show_if_single_page=False,
+        force_next=False)
 
     def paginator(self, count, page, limit, zero_based_pages=True):
         page_offset = 1 if zero_based_pages else 0
@@ -298,6 +300,16 @@ class PageList(ew_core.Widget):
         return paginate.Page(range(count), page + page_offset, int(limit),
                              url=page_url)
 
+    def prepare_context(self, context):
+        context = super(PageList, self).prepare_context(context)
+        count = context['count']
+        page = context['page']
+        limit = context['limit']
+        context['paginator'] = self.paginator(count, page, limit)
+        if context['force_next']:
+            context['paginator'].next_page = context['paginator'].page + 1
+        return context
+
     def resources(self):
         yield ew.CSSLink('css/page_list.css')
 

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/75764592/Allura/allura/templates/widgets/page_list.html
----------------------------------------------------------------------
diff --git a/Allura/allura/templates/widgets/page_list.html b/Allura/allura/templates/widgets/page_list.html
index a5f39b2..64ff18f 100644
--- a/Allura/allura/templates/widgets/page_list.html
+++ b/Allura/allura/templates/widgets/page_list.html
@@ -18,8 +18,10 @@
 -#}
 <div>
   <div class="page_list">
-    {% set paginator = widget.paginator(count, page, limit) %}
-    {{paginator.pager('$link_first $link_previous ~2~ $link_next $link_last (Page $page of $page_count)')}}
+    {{paginator.pager(
+            format='$link_first $link_previous ~2~ $link_next $link_last' + (show_label and ' (Page $page of $page_count)' or ''),
+            show_if_single_page=show_if_single_page
+        )}}
   </div>
   <div class="clear"></div>
 </div>

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/75764592/ForgeActivity/forgeactivity/main.py
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/main.py b/ForgeActivity/forgeactivity/main.py
index 6bf1199..a942a34 100644
--- a/ForgeActivity/forgeactivity/main.py
+++ b/ForgeActivity/forgeactivity/main.py
@@ -22,7 +22,7 @@ from pylons import tmpl_context as c, app_globals as g
 from pylons import request, response
 from tg import expose, validate, config
 from tg.decorators import with_trailing_slash, without_trailing_slash
-from paste.deploy.converters import asbool
+from paste.deploy.converters import asbool, asint
 from webob import exc
 from webhelpers import feedgenerator as FG
 
@@ -33,6 +33,7 @@ from allura.lib.security import require_authenticated
 from allura.model.timeline import perm_check
 from allura.lib import helpers as h
 from allura.lib.decorators import require_post
+from allura.lib.widgets.form_fields import PageList
 
 from .widgets.follow import FollowToggle
 
@@ -64,6 +65,7 @@ class ForgeActivityApp(Application):
 
 class W:
     follow_toggle = FollowToggle()
+    page_list = PageList()
 
 
 class ForgeActivityController(BaseController):
@@ -90,6 +92,7 @@ class ForgeActivityController(BaseController):
             raise exc.HTTPNotFound()
 
         c.follow_toggle = W.follow_toggle
+        c.page_list = W.page_list
         if c.project.is_user_project:
             followee = c.project.user_project_of
             actor_only = followee != c.user
@@ -101,7 +104,13 @@ class ForgeActivityController(BaseController):
         timeline = g.director.get_timeline(followee, page=kw.get('page', 0),
                                            limit=kw.get('limit', 100), actor_only=actor_only,
                                            filter_func=perm_check(c.user))
-        return dict(followee=followee, following=following, timeline=timeline)
+        return dict(
+                followee=followee,
+                following=following,
+                timeline=timeline,
+                page=asint(kw.get('page', 0)),
+                limit=asint(kw.get('limit', 100)),
+            )
 
     @expose('jinja:forgeactivity:templates/index.html')
     @with_trailing_slash

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/75764592/ForgeActivity/forgeactivity/templates/index.html
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/templates/index.html b/ForgeActivity/forgeactivity/templates/index.html
index 8293763..1119e45 100644
--- a/ForgeActivity/forgeactivity/templates/index.html
+++ b/ForgeActivity/forgeactivity/templates/index.html
@@ -71,6 +71,7 @@
           {% endif %}
         </li>
         {% endfor %}
+        {{c.page_list.display(limit=1, page=page, count=page+1, show_label=False, show_if_single_page=True, force_next=True)}}
     </ul>
   {% endif %}
 </div>


[2/2] git commit: [#4257] Added PJAX Show More paging with scroll state saving

Posted by jo...@apache.org.
[#4257] Added PJAX Show More paging with scroll state saving

Signed-off-by: Cory Johns <cj...@slashdotmedia.com>


Project: http://git-wip-us.apache.org/repos/asf/incubator-allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-allura/commit/daca639d
Tree: http://git-wip-us.apache.org/repos/asf/incubator-allura/tree/daca639d
Diff: http://git-wip-us.apache.org/repos/asf/incubator-allura/diff/daca639d

Branch: refs/heads/cj/4257
Commit: daca639d6a24d26562f618bcf396df884f6d1b6e
Parents: 7576459
Author: Cory Johns <cj...@slashdotmedia.com>
Authored: Sat Jan 18 00:50:38 2014 +0000
Committer: Cory Johns <cj...@slashdotmedia.com>
Committed: Sat Jan 18 00:50:38 2014 +0000

----------------------------------------------------------------------
 Allura/LICENSE                                  |   2 +
 Allura/allura/public/nf/js/jquery.viewport.js   |  58 +++++
 ForgeActivity/forgeactivity/main.py             |   4 +
 .../forgeactivity/nf/activity/css/activity.css  |  10 +
 .../forgeactivity/nf/activity/js/activity.js    | 209 +++++++++++++++++++
 .../forgeactivity/templates/index.html          |  36 +---
 .../forgeactivity/templates/macros.html         |  33 +++
 .../forgeactivity/templates/timeline.html       |  35 ++++
 8 files changed, 357 insertions(+), 30 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/Allura/LICENSE
----------------------------------------------------------------------
diff --git a/Allura/LICENSE b/Allura/LICENSE
index 13b7b54..7422a68 100644
--- a/Allura/LICENSE
+++ b/Allura/LICENSE
@@ -232,6 +232,8 @@ under the MIT license.  For details, see the individual files:
     allura/lib/widgets/resources/js/jquery.tools.min.js
     allura/public/nf/js/jquery.flot.js
     allura/public/nf/js/jquery.maxlength.min.js
+    allura/public/nf/js/jquery.viewport.js
+    allura/public/nf/js/jquery.pjax.js
 
 Blueprint, which is available under the MIT license.
 For details, see allura/public/nf/css/blueprint/

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/Allura/allura/public/nf/js/jquery.viewport.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/jquery.viewport.js b/Allura/allura/public/nf/js/jquery.viewport.js
new file mode 100644
index 0000000..7826000
--- /dev/null
+++ b/Allura/allura/public/nf/js/jquery.viewport.js
@@ -0,0 +1,58 @@
+/*
+ * Viewport - jQuery selectors for finding elements in viewport
+ *
+ * Copyright (c) 2008-2009 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ *  http://www.appelsiini.net/projects/viewport
+ *
+ */
+(function($) {
+    
+    $.belowthefold = function(element, settings) {
+        var fold = $(window).height() + $(window).scrollTop();
+        return fold <= $(element).offset().top - settings.threshold;
+    };
+
+    $.abovethetop = function(element, settings) {
+        var top = $(window).scrollTop();
+        return top >= $(element).offset().top + $(element).height() - settings.threshold;
+    };
+    
+    $.rightofscreen = function(element, settings) {
+        var fold = $(window).width() + $(window).scrollLeft();
+        return fold <= $(element).offset().left - settings.threshold;
+    };
+    
+    $.leftofscreen = function(element, settings) {
+        var left = $(window).scrollLeft();
+        return left >= $(element).offset().left + $(element).width() - settings.threshold;
+    };
+    
+    $.inviewport = function(element, settings) {
+        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
+    };
+    
+    $.extend($.expr[':'], {
+        "below-the-fold": function(a, i, m) {
+            return $.belowthefold(a, {threshold : 0});
+        },
+        "above-the-top": function(a, i, m) {
+            return $.abovethetop(a, {threshold : 0});
+        },
+        "left-of-screen": function(a, i, m) {
+            return $.leftofscreen(a, {threshold : 0});
+        },
+        "right-of-screen": function(a, i, m) {
+            return $.rightofscreen(a, {threshold : 0});
+        },
+        "in-viewport": function(a, i, m) {
+            return $.inviewport(a, {threshold : 0});
+        }
+    });
+
+    
+})(jQuery);

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/ForgeActivity/forgeactivity/main.py
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/main.py b/ForgeActivity/forgeactivity/main.py
index a942a34..7f29dd9 100644
--- a/ForgeActivity/forgeactivity/main.py
+++ b/ForgeActivity/forgeactivity/main.py
@@ -117,6 +117,10 @@ class ForgeActivityController(BaseController):
     def index(self, **kw):
         return self._get_activities_data(**kw)
 
+    @expose('jinja:forgeactivity:templates/timeline.html')
+    def pjax(self, **kw):
+        return self._get_activities_data(**kw)
+
     @without_trailing_slash
     @expose()
     def feed(self, **kw):

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/ForgeActivity/forgeactivity/nf/activity/css/activity.css
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/nf/activity/css/activity.css b/ForgeActivity/forgeactivity/nf/activity/css/activity.css
index dc71608..66395ff 100644
--- a/ForgeActivity/forgeactivity/nf/activity/css/activity.css
+++ b/ForgeActivity/forgeactivity/nf/activity/css/activity.css
@@ -46,3 +46,13 @@
   float: left;
   margin: 10px 10px 0 0;
 }
+.activity .page_list {
+    margin-top: 5px;
+}
+.activity .show-more {
+    display: block;
+    text-align: center;
+}
+.activity .show-more.older {
+    margin-top: 10px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/ForgeActivity/forgeactivity/nf/activity/js/activity.js
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/nf/activity/js/activity.js b/ForgeActivity/forgeactivity/nf/activity/js/activity.js
new file mode 100644
index 0000000..e8c0346
--- /dev/null
+++ b/ForgeActivity/forgeactivity/nf/activity/js/activity.js
@@ -0,0 +1,209 @@
+/*
+       Licensed to the Apache Software Foundation (ASF) under one
+       or more contributor license agreements.  See the NOTICE file
+       distributed with this work for additional information
+       regarding copyright ownership.  The ASF licenses this file
+       to you under the Apache License, Version 2.0 (the
+       "License"); you may not use this file except in compliance
+       with the License.  You may obtain a copy of the License at
+
+         http://www.apache.org/licenses/LICENSE-2.0
+
+       Unless required by applicable law or agreed to in writing,
+       software distributed under the License is distributed on an
+       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+       KIND, either express or implied.  See the License for the
+       specific language governing permissions and limitations
+       under the License.
+*/
+
+ActivityBrowseOptions = {
+    maintainScrollState: true,
+    usePjax: true,
+    useHash: true,
+    forceAdvancedScroll: false,
+    useShowMore: true,
+    useInfiniteScroll: false
+}
+
+$(function() {
+    var hasAPI = window.history && window.history.pushState && window.history.replaceState;
+    var iOS4 = navigator.userAgent.match(/iP(od|one|ad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork/);
+    if (!hasAPI || iOS4) {
+        ActivityBrowseOptions.usePjax = false;
+    }
+    if (!ActivityBrowseOptions.usePjax) {
+        if (!ActivityBrowseOptions.useHash) {
+            ActivityBrowseOptions.maintainScrollState = false;
+        }
+        if (!ActivityBrowseOptions.forceAdvancedScroll) {
+            ActivityBrowseOptions.useShowMore = false;
+            ActivityBrowseOptions.useInfiniteScroll = false;
+        }
+    }
+
+    var firstVisibleId = null;
+    var oldScrollTop = null;
+    var oldTop = null;
+    function saveScrollPosition() {
+        var $firstVisible = $('.timeline li:in-viewport:first');
+        firstVisibleId = $firstVisible.attr('id');
+        oldScrollTop = $(window).scrollTop();
+        oldTop = $firstVisible.offset().top;
+    }
+    function restoreScrollPosition() {
+        var $window = $(window);
+        var $firstVisible = $('#'+firstVisibleId);
+        if (!$firstVisible.length) {
+            return;
+        }
+        var newTop = $firstVisible.offset().top;
+        var scrollTop = $window.scrollTop();
+        var elemAdjustment = newTop - oldTop;
+        var viewportAdjustment = scrollTop - oldScrollTop;
+        $window.scrollTop(scrollTop + elemAdjustment - viewportAdjustment);
+        //console.log('restoreSP', oldTop, newTop, elemAdjustment, viewportAdjustment, scrollTop, $window.scrollTop());
+        $(window).trigger('scroll');
+    }
+
+    function maintainScrollState_pjax() {
+        var $firstVisibleActivity = $('.timeline li:in-viewport:first');
+        var page = $firstVisibleActivity.data('page');
+        var limit = $('.timeline').data('limit');
+        var hash = $firstVisibleActivity.attr('id');
+        if (page != null && limit != null && hash != null) {
+            history.replaceState(null, null, '?page='+page+'&limit='+limit+'#'+hash);
+        }
+    }
+
+    function maintainScrollState_hash() {
+        var $firstVisibleActivity = $('.timeline li:in-viewport:first');
+        saveScrollPosition();
+        window.location.hash = $firstVisibleActivity.attr('id');  // causes jump...
+        restoreScrollPosition();
+    }
+
+    var delayed = null;
+    function scrollHandler(event) {
+        clearTimeout(delayed);
+        delayed = setTimeout(ActivityBrowseOptions.usePjax
+            ? maintainScrollState_pjax
+            : maintainScrollState_hash, 100);
+    }
+
+    function maintainScrollState() {
+        if (!ActivityBrowseOptions.maintainScrollState) {
+            return;
+        }
+        $(window).scroll(scrollHandler);
+    }
+
+    function pageOut(newer) {
+        var $timeline = $('.timeline li');
+        var limit = $('.timeline').data('limit') || 100;
+        var range = newer ? [0, limit] : [-limit, undefined];
+        $timeline.slice(range[0], range[1]).remove();
+        if (!newer && $('.show-more.older').hasClass('no-more')) {
+            $('.no-more').removeClass('no-more');
+            updateShowMore();
+        }
+    }
+    window.pageOut = pageOut;
+
+    function pageIn(newer, url) {
+        $.get(url, function(html) {
+            saveScrollPosition();
+            if (newer) {
+                $('.timeline').prepend(html);
+            } else {
+                if (html.match(/^\s*$/)) {
+                    $('.show-more.older').addClass('no-more');
+                } else {
+                    $('.timeline').append(html);
+                }
+            }
+            var firstPage = $('.timeline li:first').data('page');
+            var lastPage = $('.timeline li:last').data('page');
+            if (lastPage - firstPage >= 3) {
+                pageOut(!newer);
+            }
+            if (ActivityBrowseOptions.useShowMore) {
+                updateShowMore();
+            }
+            restoreScrollPosition();
+        }).fail(function() {
+            flash('Error loading activities', 'error');
+        });
+    }
+
+    function makeShowMoreHandler(newer) {
+        // has to be factory to prevent closure memory leak
+        // see: https://www.meteor.com/blog/2013/08/13/an-interesting-kind-of-javascript-memory-leak
+        return function(event) {
+            event.preventDefault();
+            pageIn(newer, this.href);
+        };
+    }
+
+    function makeShowMoreLink(newer, targetPage, limit) {
+        var $link = $('<a class="show-more">Show more</a>');
+        $link.addClass(newer ? 'newer' : 'older');
+        $link.attr('href', 'pjax?page='+targetPage+'&limit='+limit);
+        $link.click(makeShowMoreHandler(newer));  // has to be factory to prevent closure memory leak
+        return $link;
+    }
+
+    function updateShowMore() {
+        var $timeline = $('.timeline');
+        if (!$timeline.length) {
+            return;
+        }
+        var noMoreActivities = $('.show-more.older').hasClass('no-more');
+        $('.page_list, .show-more').remove();
+        var limit = $('.timeline').data('limit');
+        var firstPage = $('.timeline li:first').data('page');
+        var lastPage = $('.timeline li:last').data('page');
+        if (firstPage > 0) {
+            $timeline.before(makeShowMoreLink(true, firstPage-1, limit));
+        }
+        if (noMoreActivities) {
+            $timeline.after('<div class="show-more older no-more">No more activities</div>');
+        } else {
+            $timeline.after(makeShowMoreLink(false, lastPage+1, limit));
+        }
+    }
+    window.updateShowMore = updateShowMore;
+
+    function enableInfiniteScroll() {
+    }
+
+    function enableAdvancedPaging() {
+        if (ActivityBrowseOptions.useInfiniteScroll) {
+            enableInfiniteScroll();
+        } else if (ActivityBrowseOptions.useShowMore) {
+            updateShowMore();
+        }
+    }
+
+    maintainScrollState();  // http://xkcd.com/1309/
+    enableAdvancedPaging();
+});
+
+function markTop() {
+    var $marker = $('#offset-marker');
+    if (!$marker.length) {
+        $marker = $('<div id="offset-marker">&nbsp;</div>');
+        $marker.css({
+            'position': 'absolute',
+            'top': 0,
+            'width': '100%',
+            'border-top': '1px solid green'
+        });
+        $marker.appendTo($('body'));
+    }
+    $marker.css({'top': $(window).scrollTop()});
+}
+
+function markFirst() {
+    $('.timeline li:in-viewport:first').css({'background-color': '#f0fff0'});
+}

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/ForgeActivity/forgeactivity/templates/index.html
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/templates/index.html b/ForgeActivity/forgeactivity/templates/index.html
index 1119e45..4fe9e48 100644
--- a/ForgeActivity/forgeactivity/templates/index.html
+++ b/ForgeActivity/forgeactivity/templates/index.html
@@ -36,43 +36,19 @@
     {% endif %}
 {% endblock %}
 
-{% macro activity_obj(o) %}
-  <a href="{{o.activity_url}}">{{o.activity_name}}</a>
-{% endmacro %}
-
-{% macro icon(o, size, className) -%}
-  {% if o.activity_extras.get('icon_url') %}
-    <img src="{{ o.activity_extras.get('icon_url') }}"
-         alt="{{ o.activity_name }}"
-         title="{{ o.activity_name }}"
-         class="emboss{% if size %} x{{size}}{% endif %}{% if className %} {{className}}{% endif %}">
-  {% else %}
-    <b data-icon="{{g.icons['user'].char}}" class="ico emboss {{g.icons['user'].css}}{% if size %} x{{size}}{% endif %}{% if className %} {{className}}{% endif %}"></b>
-  {% endif %}
-{%- endmacro %}
-
 {% block content %}
+{% do g.register_forge_js('js/jquery.viewport.js') %}
+{% do g.register_app_js('js/activity.js') %}
+
 <div class="activity">
   {% if not timeline %}
     No activity to display.
   {% else %}
-    <ul class="timeline">
-        {% for a in timeline %}
-        <li>
-          <time datetime="{{a.published|datetimeformat}}" title="{{a.published|datetimeformat}}">{{h.ago(a.published, show_date_after=None)}}</time>
-          <h1>
-              {{ icon(a.actor, 32, 'avatar') }}
-              {{activity_obj(a.actor)}} {{a.verb}} {{activity_obj(a.obj)}} {% if a.target.activity_name %}on {{activity_obj(a.target)}}{% endif %}
-          </h1>
-          {% if a.obj.activity_extras.get('summary') %}
-          <p>
-            {{ a.obj.activity_extras.get('summary') }}
-          </p>
-          {% endif %}
-        </li>
-        {% endfor %}
+    <ul class="timeline" data-limit="{{limit}}">
+        {% include 'forgeactivity:templates/timeline.html' %}
         {{c.page_list.display(limit=1, page=page, count=page+1, show_label=False, show_if_single_page=True, force_next=True)}}
     </ul>
+    {{c.page_list.display(limit=1, page=page, count=page+1, show_label=False, show_if_single_page=True, force_next=True)}}
   {% endif %}
 </div>
 {% endblock %}

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/ForgeActivity/forgeactivity/templates/macros.html
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/templates/macros.html b/ForgeActivity/forgeactivity/templates/macros.html
new file mode 100644
index 0000000..c60582e
--- /dev/null
+++ b/ForgeActivity/forgeactivity/templates/macros.html
@@ -0,0 +1,33 @@
+{#-
+       Licensed to the Apache Software Foundation (ASF) under one
+       or more contributor license agreements.  See the NOTICE file
+       distributed with this work for additional information
+       regarding copyright ownership.  The ASF licenses this file
+       to you under the Apache License, Version 2.0 (the
+       "License"); you may not use this file except in compliance
+       with the License.  You may obtain a copy of the License at
+
+         http://www.apache.org/licenses/LICENSE-2.0
+
+       Unless required by applicable law or agreed to in writing,
+       software distributed under the License is distributed on an
+       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+       KIND, either express or implied.  See the License for the
+       specific language governing permissions and limitations
+       under the License.
+-#}
+
+{% macro activity_obj(o) %}
+  <a href="{{o.activity_url}}">{{o.activity_name}}</a>
+{% endmacro %}
+
+{% macro icon(o, size, className) -%}
+  {% if o.activity_extras.get('icon_url') %}
+    <img src="{{ o.activity_extras.get('icon_url') }}"
+         alt="{{ o.activity_name }}"
+         title="{{ o.activity_name }}"
+         class="emboss{% if size %} x{{size}}{% endif %}{% if className %} {{className}}{% endif %}">
+  {% else %}
+    <b data-icon="{{g.icons['user'].char}}" class="ico emboss {{g.icons['user'].css}}{% if size %} x{{size}}{% endif %}{% if className %} {{className}}{% endif %}"></b>
+  {% endif %}
+{%- endmacro %}

http://git-wip-us.apache.org/repos/asf/incubator-allura/blob/daca639d/ForgeActivity/forgeactivity/templates/timeline.html
----------------------------------------------------------------------
diff --git a/ForgeActivity/forgeactivity/templates/timeline.html b/ForgeActivity/forgeactivity/templates/timeline.html
new file mode 100644
index 0000000..499fe03
--- /dev/null
+++ b/ForgeActivity/forgeactivity/templates/timeline.html
@@ -0,0 +1,35 @@
+{#-
+       Licensed to the Apache Software Foundation (ASF) under one
+       or more contributor license agreements.  See the NOTICE file
+       distributed with this work for additional information
+       regarding copyright ownership.  The ASF licenses this file
+       to you under the Apache License, Version 2.0 (the
+       "License"); you may not use this file except in compliance
+       with the License.  You may obtain a copy of the License at
+
+         http://www.apache.org/licenses/LICENSE-2.0
+
+       Unless required by applicable law or agreed to in writing,
+       software distributed under the License is distributed on an
+       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+       KIND, either express or implied.  See the License for the
+       specific language governing permissions and limitations
+       under the License.
+-#}
+
+{% import 'forgeactivity:templates/macros.html' as am with context %}
+
+{% for a in timeline %}
+<li id="{{a._id}}" data-page="{{page}}">
+  <time datetime="{{a.published|datetimeformat}}" title="{{a.published|datetimeformat}}">{{h.ago(a.published, show_date_after=None)}}</time>
+  <h1>
+      {{ am.icon(a.actor, 32, 'avatar') }}
+      {{am.activity_obj(a.actor)}} {{a.verb}} {{am.activity_obj(a.obj)}} {% if a.target.activity_name %}on {{am.activity_obj(a.target)}}{% endif %}
+  </h1>
+  {% if a.obj.activity_extras.get('summary') %}
+  <p>
+    {{ a.obj.activity_extras.get('summary') }}
+  </p>
+  {% endif %}
+</li>
+{% endfor %}