[events] redesign it

media/css/seahub.css

@@ -1041,25 +1041,59 @@ textarea:-moz-placeholder {/* for FF */
     margin-bottom:5px;
     position:relative;/* to fix ie7 'scroll position' problem */
 }
+.event-group-hd {
+    margin: 15px 0 0 0;
+    padding: 5px 8px;
+    color: #444;
+    text-shadow: 0 1px white;
+    background: #f8f8f8;
+    border: 1px solid #eee;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px; 
+}
+.event-group-bd {
+    list-style-type: none;
+    padding:0;
+    margin: 0 0 15px 0;
+    border: 1px solid #eee;
+    border-top: none;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px
+}
 .event-item {
-    margin:10px 0 15px;
+    padding: 8px;
+    border-top: 1px solid #eee;
+}
+.event-item:first-child {
+    border-top: none;
+}
+.event-item:last-child {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px
+}
+.event-item:nth-child(2n) {
+    background: #fdfdfd;
 }
 .event-item .txt {
-    width:610px;
-    padding-bottom:8px;
-    border-bottom:1px solid #eee;
+    margin-left:45px;
 }
-.event-hd .time {
+.event-item .cmt-desc {
+    display:block;
+}
+.event-item p {
+    margin:0;
+}
+.event-item .time {
     color:#888;
 }
 .event-item .avatar {
+    float:left;
     border-radius:3px;
 }
 #events-loading,
 #events-more {
     text-align:center;
-    width:610px;
-    margin-left:60px;
+    width:670px;
 }
 #events-more {
     color:#777;

seahub/templates/snippets/events.html

@@ -1,10 +1,15 @@
 {% load i18n %}
-<h3>{% trans 'Recent Events' %}</h3>
-<ul id="events" class="hide"></ul>
+<div id="events">
+<h3>{% trans 'File Activities' %}</h3>
+<div id="events-body">
+    {% include "snippets/events_body.html" %}
+</div>
 <div id="events-loading" class="hide"><img src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" /></div>
-<button id="events-more" class="hide">{% trans 'More' %}</button>
+{% if events_more %}
+<button id="events-more">{% trans 'More' %}</button>
+{% endif %}
 <p id="events-error" class="error hide"></p>
-<form id="repo-decrypt-form" class="simple-input-popup hide">
+<form id="repo-decrypt-form" class="simple-input-popup hide">{% csrf_token %}
     <h3>{% trans 'Library' %} <span class="op-target"></span> {% trans 'is encrypted' %}</h3>
     <input type="hidden" name="repo_id" value="" />
     <label>{% trans 'Password：' %}</label><br />
@@ -14,3 +19,4 @@
     <input type="submit" class="submit" value="{% trans 'Submit' %}" />
     <button class="simplemodal-close">{% trans 'Cancel' %}</button>
 </form>
+</div>

seahub/templates/snippets/events_.html

@@ -1,52 +0,0 @@
-{% load seahub_tags avatar_tags i18n %}
-{% load url from future %}
-
-{% for ev in events %}
-    <li class="event-item w100 ovhd">
-    {% if ev.etype == 'repo-update' %}
-        {% with author=ev.commit.creator_name id=ev.commit.creator_name|email2id commit=ev.commit repo=ev.repo %}
-        <a href="{% url 'user_profile' id %}" class="pic fleft" data-author="{{ id }}">{% avatar author 40 %}</a>
-        <div class="txt fright">
-            <div class="event-hd">
-                <span class="time">{{ commit.ctime|translate_seahub_time }}</span>
-                <a href="{% url 'user_profile' id %}">{{ author|email2nickname }}</a>
-            </div>
-            <p>{% trans 'Updated library' %} <a href="{% url 'repo' repo.id %}">{{ repo.name }}</a></p>
-            <p class="commit-msg ovhd">{{ commit.desc|translate_commit_desc }}
-            {% if repo.encrypted %}
-                <a class="lsch-encrypted"{% if repo.password_set %} data-passwordset="true"{% endif %} href="#" data-url="{% url 'repo_history_changes' repo.id %}?commit_id={{ commit.id }}" data-repoid="{{repo.id}}" data-reponame="{{repo.name}}" data-time="{{ commit.props.ctime|tsstr_sec }}">{% trans 'Details' %}</a>
-            {% else %}
-                <a class="lsch" href="#" data-url="{% url 'repo_history_changes' repo.id %}?commit_id={{ commit.id }}" data-time="{{ commit.props.ctime|tsstr_sec }}">{% trans 'Details' %}</a>
-                {% endif %}
-            </p>
-        </div>
-        {% endwith %}
-    {% endif %}
-
-    {% if ev.etype == 'repo-create' %}
-        {% with author=ev.creator id=ev.creator|email2id %}
-        <a href="{% url 'user_profile' id %}" class="pic fleft" data-author="{{ id }}">{% avatar author 40 %}</a>
-        <div class="txt fright">
-            <div class="event-hd">
-                <span class="time">{{ ev.timestamp|translate_seahub_time }}</span>
-                <a href="{% url 'user_profile' id %}">{{ author|email2nickname }}</a>
-            </div>
-            <p>{% trans 'Created library' %} <a href="{% url 'repo' ev.repo_id %}">{{ ev.repo_name }}</a></p>
-        </div>
-        {% endwith %}
-    {% endif %}
-
-    {% if ev.etype == 'repo-delete' %}
-        {% with author=ev.repo_owner id=ev.repo_owner|email2id %}
-        <a href="{% url 'user_profile' id %}" class="pic fleft" data-author="{{ id }}">{% avatar author 40 %}</a>
-        <div class="txt fright">
-            <div class="event-hd">
-                <span class="time">{{ ev.timestamp|translate_seahub_time }}</span>
-                <a href="{% url 'user_profile' id %}">{{ author|email2nickname }}</a>
-            </div>
-            <p>{% trans 'Deleted library' %} {{ ev.repo_name }}</p>
-        </div>
-        {% endwith %}
-    {% endif %}
-    </li>
-{% endfor %}

seahub/templates/snippets/events_body.html

@@ -0,0 +1,39 @@
+{% load seahub_tags avatar_tags i18n %}
+
+{% for e_group in event_groups %}
+<h4 class="event-group-hd">{{ e_group.date }}</h4>
+<ol class="event-group-bd">
+    {% for e in e_group.events %}
+    <li class="event-item">
+        {% avatar e.author 36 %}
+        <div class="txt">
+            {% if e.etype == "repo-update" %}
+            {% with repo=e.repo commit=e.commit %} 
+            <p class="w100 ovhd">
+            <a href="{% url 'repo' repo.id %}" class="updated-repo fright">{{ repo.name }}</a>
+            <span class="cmt-desc">
+            {{ commit.desc|translate_commit_desc }}
+            {% if repo.encrypted %}
+            <a class="lsch-encrypted"{% if repo.password_set %} data-passwordset="true"{% endif %} href="#" data-url="{% url 'repo_history_changes' repo.id %}?commit_id={{ commit.id }}" data-repoid="{{repo.id}}" data-reponame="{{repo.name}}" data-time="{{ commit.props.ctime|tsstr_sec }}">{% trans 'Details' %}</a>
+            {% else %}
+            <a class="lsch" href="#" data-url="{% url 'repo_history_changes' repo.id %}?commit_id={{ commit.id }}" data-time="{{ commit.props.ctime|tsstr_sec }}">{% trans 'Details' %}</a>
+            {% endif %}
+            </span>
+            </p>
+            {% endwith %}
+            {% endif %}
+
+            {% if e.etype == "repo-create" %}
+            <p>{% trans "Created library" %} <a href="{% url 'repo' e.repo_id %}">{{ e.repo_name }}</a></p>
+            {% endif %}
+
+            {% if e.etype == "repo-delete" %}
+            <p>{% blocktrans with library_name=e.repo_name %}Deleted library {{ library_name }}{% endblocktrans %}</p>
+            {% endif %}
+
+            <p><a href="{% url 'user_profile' e.author|email2id %}">{{ e.author|email2nickname }}</a> <span class="time">{{ e.time|translate_seahub_time }}</span></p>
+        </div>
+    </li>
+    {% endfor %}
+</ol>
+{% endfor %}

seahub/templates/snippets/events_js.html

@@ -7,21 +7,33 @@ function reqEvents(start) {
         dataType: 'json',
         cache: false,
         success: function(data) {
-            $('#events').append(data['html']);
-            $('.event-item').each(function(index) {
-                if (index > 0 && $(this).children('.pic').data('author') == $(this).prev().children('.pic').data('author')) {
-                    $(this).children('.pic').addClass('hide');
-                }
-            });
-            if (start == 0) {
-                $('#events').removeClass('hide');
-            }
+            // for data fetched by clicking 'more'
+            var original_last_date = $('.event-group-hd:last'),
+                original_last_events,
+                new_first_date, new_first_events;
+
             $('#events-loading').addClass('hide');
-            if (data['more']) {
-                $('#events-more').data('start', start + 10).removeClass('hide');
+            $('#events-body').append(data['html']);
+
+            new_first_date = original_last_date.next().next();
+            if (original_last_date.text() == new_first_date.text()) {
+                original_last_events = original_last_date.next();
+                new_first_events = new_first_date.next();
+                original_last_events.append(new_first_events.html());
+                new_first_date.remove();
+                new_first_events.remove();
+            }
+
+            $('.updated-repo').each(function() {
+                $(this).next().css({'margin-right':$(this).width() + 10});
+            });
+
+            if (data['events_more']) {
+                $('#events-more').data('start', start + events_more_offset).removeClass('hide');
             } else {
                 $('#events-more').addClass('hide');
             }
+
             if ($.browser.mozilla || $.browser.msie) {
                 $('#events a').focus(function() {
                     $(this).blur();
@@ -32,34 +44,44 @@ function reqEvents(start) {
                 return false;
             });
             $('.lsch-encrypted').click(function() {
-                if ($(this).data('passwordset')) {
-                    listCommitDetails($(this).data('url'), $(this).data('time'));
-                } else {
-                    var form = $('#repo-decrypt-form');
-                    form.find('input[name="repo_id"]').val($(this).data('repoid'));
-                    form.find('.op-target').html($(this).data('reponame'));
-                    form.data({'url':$(this).data('url'), 'time':$(this).data('time')}).modal({appendTo:'#main'});
-                    $('#simplemodal-container').css({'width':'auto'});
-                    $(window).resize();
-                }
+                showDetailForEncrypRepo($(this));
                 return false;
             });
         },
-        error: function() {
-            var str = '{% trans "Unknown error." %} '; 
-            if ($('#events-more').hasClass('hide')) {
-                str += '{% trans "Please refresh the page later." %}';
-            } else {
-                str += '{% trans "Please try again later." %}';
-            }
+        error: function(jqXHR, textStatus, errorThrown) {
             $('#events-loading').addClass('hide');
-            $('#events-error').html(str).removeClass('hide');  
+            if (!jqXHR.responseText) {
+                $('#events-error').html("{% trans "Failed. Please check the network." %}").removeClass('hide');  
+            }   
         }
     });
 }
-reqEvents(0);
-$('#events-more').click(function() {
+
+function showDetailForEncrypRepo(obj) {
+    if (obj.data('passwordset')) {
+        listCommitDetails(obj.data('url'), obj.data('time'));
+    } else {
+        var form = $('#repo-decrypt-form');
+        form.find('input[name="repo_id"]').val(obj.data('repoid'));
+        form.find('.op-target').html(obj.data('reponame'));
+        form.data({'url':obj.data('url'), 'time':obj.data('time')}).modal({appendTo:'#main'});
+        $('#simplemodal-container').css({'width':'auto'});
+        $(window).resize();
+    }
+}
+
+var events_more_offset = 10;
+
+$('.lsch-encrypted').click(function() {
+    showDetailForEncrypRepo($(this));
+    return false;
+});
+
+$('#events-more').data('start', events_more_offset).click(function() {
     $(this).addClass('hide');
     reqEvents($(this).data('start'));
 });
+$('.updated-repo').each(function() {
+    $(this).next().css({'margin-right':$(this).width() + 10});
+});
 {% include 'snippets/repo_decrypt_js.html' %}

seahub/views/__init__.py

@@ -8,6 +8,7 @@ import urllib
 import urllib2
 import logging
 import chardet
+from datetime import datetime
 from math import ceil
 from urllib import quote
 from django.core.cache import cache
@@ -805,9 +806,12 @@ def myhome(request):
 
     # events
     if EVENTS_ENABLED:
-        events = True
+        events = get_user_events(email, 0)
+        events_more, event_groups = handle_events_data(events)
     else:
         events = None
+        events_more = False
+        event_groups = None
 
     starred_files = get_starred_files(request.user.username)
 
@@ -837,6 +841,8 @@ def myhome(request):
             "create_shared_repo": False,
             "allow_public_share": allow_public_share,
             "events": events,
+            "events_more": events_more,
+            "event_groups": event_groups,
             "starred_files": starred_files,
             "TRAFFIC_STATS_ENABLED": TRAFFIC_STATS_ENABLED,
             "traffic_stat": traffic_stat,
@@ -2479,6 +2485,9 @@ def repo_download_dir(request, repo_id):
     return redirect(url)
 
 def events(request):
+    if not request.is_ajax():
+        raise Http404
+
     username = request.user.username
     start = int(request.GET.get('start', 0))
     if request.cloud_mode:
@@ -2487,17 +2496,43 @@ def events(request):
     else:
         events = get_user_events(username, start)
    
+    events_more, event_groups = handle_events_data(events)
+    ctx = {'event_groups': event_groups}
+    html = render_to_string("snippets/events_body.html", ctx)
+
+    return HttpResponse(json.dumps({'html':html, 'events_more':events_more}),
+                            content_type='application/json; charset=utf-8')
+
+def handle_events_data(events):
     events_more = False
     if len(events) == 11:
         events_more = True
         events = events[:10]
 
-    ctx = {}
-    ctx['events'] = events
-    html = render_to_string("snippets/events_.html", ctx)
+    # group events according to the date
+    event_groups = []
+    for e in events:
+        if e.etype == 'repo-update':
+            e.time = datetime.fromtimestamp(int(e.commit.ctime)) # e.commit.ctime is a timestamp
+            e.author = e.commit.creator_name
+        else:
+            e.time = e.timestamp # e.timestamp actually is '%Y-%m-%d h:m:s'
+            if e.etype == 'repo-create':
+                e.author = e.creator
+            else:
+                e.author = e.repo_owner
+        e.date = (e.time).strftime("%Y-%m-%d")
+        
+        if len(event_groups) == 0 or \
+            len(event_groups) > 0 and e.date != event_groups[-1]['date']:
+            event_group = {}
+            event_group['date'] = e.date
+            event_group['events'] = [e]
+            event_groups.append(event_group)
+        else:
+            event_groups[-1]['events'].append(e)
 
-    return HttpResponse(json.dumps({'html':html, 'more':events_more}),
-                            content_type='application/json; charset=utf-8')
+    return events_more, event_groups
 
 def pdf_full_view(request):
     '''For pdf view with pdf.js.'''