[notice] refactor html & js

media/js/base.js

@@ -16,85 +16,62 @@ if ($('.messages')[0]) {
     setTimeout(function() { $('.messages').addClass('hide'); }, 10000);
 }
 
-$(function(){
+$(function() {
 
     var msg_ct = $("#msg-count"); 
-    $.ajax({
+    // original title
-        url: msg_ct.data('cturl'),
+    var orig_doc_title = document.title;
-        dataType: 'json',
+    var reqUnreadNum = function() {
-        cache: false,
+        $.ajax({
-        success: function(data) {
+            url: msg_ct.data('url'),
-            if (data['count'] > 0) {
+            dataType: 'json',
-                $('.num', msg_ct).html(data['count']).removeClass('hide');
+            cache: false,
-                $('.num').data('count', data['count']);
+            success: function(data) {
+                var count = data['count'],
+                    num = $('.num', msg_ct);
+                num.html(count);
+                if (count > 0) {
+                    num.removeClass('hide');
+                    document.title = '(' + count + ')' + orig_doc_title;
+                } else {
+                    num.addClass('hide');
+                    document.title = orig_doc_title;
+                }
             }
-        }
+        });
-    });
+    };
+    reqUnreadNum();
+    // request every 30s
+    setInterval(reqUnreadNum, 30*1000);
 
     $('#notice-icon').click(function() {
         var popup = $('#notice-popup');
         popup.toggleClass('hide');
-
+        if (!popup.hasClass('hide')) {
-        //to prevent duplicately send ajax
+            $('.con', popup).css({'max-height':$(window).height() - $('#header').outerHeight() - $('#notice-popup .hd').outerHeight() - 3});
-        if ($('#notice-icon').data('ajax') != 1){
+            var loading_tip = $('.loading-tip', popup);
+            loading_tip.show();
             $.ajax({
-                url: popup.data('pop_url'),
+                url: popup.data('url'),
-                dataType: 'json',
+                dataType: 'json', 
-                cache: false,
                 success: function(data) {
-                    popup.find('.loading-tip').remove();
+                    loading_tip.hide();
-                    popup.html(data['notifications_popup_html']);
-                    $('.con', popup).css({'max-height':$(window).height() - $('#header').outerHeight() - $('#notice-popup .hd').outerHeight() - 3});
-                    $('#notice-icon').data('ajax', 1);
 
+                    var notice_list = $('#notice-list');
+                    notice_list.html(data['notice_html']).removeClass('hide');
 
-                    $('#notice-popup .close').click(function() {
+                    // set a notice to be read when <a> in it is clicked
-                        if ($('.num').data('count') > 0){
+                    $('.unread a', notice_list).click(function() {
-                            $.ajax({
+                        var notice_id = $(this).parents('.unread').data('id');
-                                url: popup.data('seen_url'),
+                        $.ajax({
-                                dataType: 'json',
+                            url: notice_list.data('url') + '?notice_id=' + e(notice_id),
-                                cache: false,
+                            dataType:'json'
-                                success: function() {
+                        });
-                                    popup.addClass('hide');
-                                    $('.num').data('count', 0);
-                                    $('.num').addClass('hide');
-                                    $('li').each(function() {
-                                        if ($(this).hasClass('unread')){
-                                            $(this).removeClass('unread');
-                                            $(this).addClass('read');
-                                        }
-                                    });
-                                }
-                            });
-                        }else{
-                            popup.addClass('hide');
-                        }
-                    });
-
-                    $("a[id$='-notice']").click(function() {
-                        var notice_id = $(this).data('notice_id');
-                        var url = popup.data('seen_by_id_url');
-                        var href = $(this).data('href');
-
-                        if ($(this).parent().parent().hasClass('unread')){
-                            $.ajax({
-                                url: url + '?notice_id=' + notice_id,
-                                type: 'GET',
-                                dataType: 'json',
-                                cache: false,
-                                success: function() {
-                                    location.href = href;
-                                }
-                            });
-                        }else{
-                            location.href = href;
-                        }
                     });
                 }
             });
         }
     });
-
     $(window).resize(function() {
         var popup = $('#notice-popup');
         if (!popup.hasClass('hide')) {
@@ -102,6 +79,22 @@ $(function(){
         }
     });
 
+    $('#notice-popup .close').click(function() {
+        $('#notice-popup').addClass('hide');   
+        if ($('#notice-list .unread').length > 0) {
+            // set all unread notice to be read
+            var url = $(this).data('url');
+            $.ajax({
+                url: url,
+                dataType: 'json',
+                success: function() {
+                    $('.num', msg_ct).html(0).addClass('hide');
+                    document.title = orig_doc_title;
+                }
+            });
+        }
+    });
+
     (function () {
         var my_info = $('#my-info');
         var popup = $('#user-info-popup');
@@ -125,6 +118,7 @@ $(function(){
             return false;
         });
     })();
+
 });
 
 $(document).click(function(e) {
@@ -137,15 +131,6 @@ $(document).click(function(e) {
     closePopup($('#user-info-popup'), $('#my-info'));
     closePopup($('#top-nav-grp-info'), $('#top-nav-grp'));
     closePopup($('#notice-popup'), $('#notice-icon'));
-
-    var closeNum = function(num, num_switch) {
-        if (num.hasClass('hide') && !num.is(target) && !num_switch.is(target) && !num_switch.find('*').is(target) ) {
-            if ($('.num').data('count') > 0){
-                num.removeClass('hide');
-            }
-        }
-    };
-    closeNum($('.num'), $('#msg-count'));
 });
 
 // search: disable submit when input nothing

seahub/notifications/models.py

@@ -486,12 +486,11 @@ class UserNotification(models.Model):
         folder_link = reverse('repo', args=[repo_id]) + '?p=' + urlquote(uploaded_to)
         folder_name = os.path.basename(uploaded_to)
 
-        msg = _(u"A file named <a id='file-upload-notice' data-notice_id='%(notice_id)s' href='#' data-href='%(file_link)s'>%(file_name)s</a> is uploaded to your folder <a href='%(folder_link)s'>%(folder)s</a>") % {
+        msg = _(u"A file named <a href='%(file_link)s'>%(file_name)s</a> is uploaded to your folder <a href='%(folder_link)s'>%(folder)s</a>") % {
             'file_link': file_link,
             'file_name': filename,
             'folder_link': folder_link,
             'folder': folder_name,
-            'notice_id': self.id,
             }
         return msg
 
@@ -510,11 +509,10 @@ class UserNotification(models.Model):
             self.delete()
             return None
 
-        msg = _(u"%(user)s has shared a library named <a id='repo-share-notice' data-notice_id='%(notice_id)s' href='#' data-href='%(href)s'>%(repo_name)s</a> to you.") %  {
+        msg = _(u"%(user)s has shared a library named <a href='%(href)s'>%(repo_name)s</a> to you.") %  {
             'user': escape(share_from),
             'href': reverse('repo', args=[repo.id]),
             'repo_name': repo.name,
-            'notice_id': self.id,
             }
         return msg
         
@@ -529,11 +527,10 @@ class UserNotification(models.Model):
         file_name = d['file_name']
         priv_share_token = d['priv_share_token']
 
-        msg = _(u"%(user)s has shared a file named <a id='priv-file-share-notice' data-notice_id='%(notice_id)s' href='#' data-href='%(href)s'>%(file_name)s</a> to you.") % {
+        msg = _(u"%(user)s has shared a file named <a href='%(href)s'>%(file_name)s</a> to you.") % {
             'user': escape(share_from),
             'href': reverse('view_priv_shared_file', args=[priv_share_token]),
             'file_name': file_name,
-            'notice_id': self.id,
             }
         return msg
     def format_user_message_title(self):
@@ -550,7 +547,7 @@ class UserNotification(models.Model):
         msg_from = d.get('msg_from')
         nickname = email2nickname(msg_from)
 
-        msg = _(u"You have received a <a id='file-upload-notice' href='%(href)s'>new message</a> from %(user)s.") % {
+        msg = _(u"You have received a <a href='%(href)s'>new message</a> from %(user)s.") % {
             'user': escape(nickname),
             'href': reverse('user_msg_list', args=[msg_from]),
             }
@@ -593,11 +590,11 @@ class UserNotification(models.Model):
         msg_from = d.get('msg_from')
 
         if msg_from is None:
-            msg = _(u"<a id='grpmsg-notice' href='%(href)s'>%(group_name)s</a> has new discussion.") % {
+            msg = _(u"<a href='%(href)s'>%(group_name)s</a> has a new discussion.") % {
                 'href': reverse('group_discuss', args=[group.id]),
                 'group_name': group.group_name}
         else:
-            msg = _(u"%(user)s posted a new discussion in <a id='grpmsg-notice' href='%(href)s'>%(group_name)s</a>.") % {
+            msg = _(u"%(user)s posted a new discussion in <a href='%(href)s'>%(group_name)s</a>.") % {
                 'href': reverse('group_discuss', args=[group.id]),
                 'user': escape(email2nickname(msg_from)),
                 'group_name': group.group_name}
@@ -634,11 +631,11 @@ class UserNotification(models.Model):
         reply_from = d.get('reply_from')
 
         if reply_from is None:
-            msg = _(u"One <a id='grpmsg-reply-notice' href='%(href)s'>group discussion</a> has new reply.") % {
+            msg = _(u"One <a href='%(href)s'>group discussion</a> has a new reply.") % {
                 'href': reverse('msg_reply_new'),
                 }
         else:
-            msg = _(u"%(user)s replied your <a id='grpmsg-reply-notice' href='%(href)s'>group discussion</a>.") % {
+            msg = _(u"%(user)s replied your <a href='%(href)s'>group discussion</a>.") % {
                 'user': escape(email2nickname(reply_from)),
                 'href': reverse('msg_reply_new'),
                 }
@@ -677,13 +674,12 @@ class UserNotification(models.Model):
             self.delete()
             return None
 
-        msg = _(u"User <a href='%(user_profile)s'>%(username)s</a> has asked to join group <a id='grp-join-request-notice' data-notice_id='%(notice_id)s' href='#' data-href='%(href)s'>%(group_name)s</a>, verification message: %(join_request_msg)s") % {
+        msg = _(u"User <a href='%(user_profile)s'>%(username)s</a> has asked to join group <a href='%(href)s'>%(group_name)s</a>, verification message: %(join_request_msg)s") % {
             'user_profile': reverse('user_profile', args=[username]),
             'username': username,
             'href': reverse('group_members', args=[group_id]),
             'group_name': group.group_name,
             'join_request_msg': escape(join_request_msg),
-            'notice_id': self.id,
             }
         return msg
 

seahub/notifications/templates/notifications/notice_email.html

@@ -5,7 +5,7 @@
 {% block email_con %}
 {% autoescape off %}
 
-<p style="color:#121214;font-size:14px;">Hi, {{ name|email2nickname }}</p>
+<p style="color:#121214;font-size:14px;">{% blocktrans with name=to_user|email2nickname %}Hi {{ name }},{% endblocktrans %}</p>
 
 <p style="font-size:14px;color:#434144;">
 {% blocktrans count num=notice_count %}
@@ -15,8 +15,8 @@ You've got {{num}} new notices on {{ site_name }}:
 {% endblocktrans %}
 </p>
 
-<div id="notices" style="background-color:#f2f2f2;">
+<div style="background-color:#f2f2f2;">
-    <table id="notices-table">
+    <table>
         <tr>
             <th width="70%">{% trans "Message"%}</th>
             <th width="30%">{% trans "Time"%}</th>
@@ -24,38 +24,38 @@ You've got {{num}} new notices on {{ site_name }}:
 
         {% for notice in notices %}
             {% if notice.is_group_msg %}
-                <tr >
+                <tr>
-                    <td>{{notice.group_msg_from}} posted a new discussion in <a href='{{url_base}}{{notice.group_url}}'>{{notice.group_name}}</a></td>
+                    <td>{% blocktrans with user=notice.group_msg_from grp_url=notice.group_url grp_name=notice.group_name%}{{user}} posted a new discussion in <a href="{{url_base}}{{grp_url}}">{{grp_name}}</a>{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
             {% elif notice.is_grpmsg_reply %}
-                <tr >
+                <tr>
-                    <td>{{notice.group_msg_reply_from}} replied your<a href='{{url_base}}{{notice.group_msg_reply_url}}'>group discussion</a></td>
+                    <td>{% blocktrans with user=notice.group_msg_reply_from reply_url=notice.group_msg_reply_url%}{{user}} replied your<a href="{{url_base}}{{reply_url}}">group discussion</a>{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
             {% elif notice.is_repo_share_msg %}
-                <tr >
+                <tr>
-                    <td>{{notice.repo_share_from}} has shared a library named <a href='{{url_base}}{{notice.repo_url}}'>{{notice.repo_name}}</a> to you.</td>
+                    <td>{% blocktrans with user=notice.repo_share_from lib_url=notice.repo_url lib_name=notice.repo_name%}{{user}} has shared a library named <a href="{{url_base}}{{lib_url}}">{{lib_name}}</a> to you.{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
             {% elif notice.is_priv_file_share_msg %}
-                <tr >
+                <tr>
-                    <td>{{notice.priv_shared_file_from}} has shared a file named <a href='{{url_base}}{{notice.priv_shared_file_url}}'>{{notice.priv_shared_file_name}}</a> to you.</td>
+                    <td>{% blocktrans with user=notice.priv_shared_file_from file_url=notice.priv_shared_file_url file_name=notice.priv_shared_file_name %}{{user}} has shared a file named <a href="{{url_base}}{{file_url}}">{{file_name}}</a> to you.{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
             {% elif notice.is_user_message %}
-                <tr >
+                <tr>
-                    <td> You have received a <a href='{{ url_base }}{{notice.user_msg_url}}'>new message</a> from {{notice.user_msg_from}}</td>
+                    <td>{% blocktrans with msg_url=notice.user_msg_url user=notice.user_msg_from %}You have received a <a href="{{ url_base }}{{msg_url}}">new message</a> from {{user}}.{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
             {% elif notice.is_file_uploaded_msg %}
-                <tr >
+                <tr>
-                    <td>A file named <a href='{{url_base}}{{notice.uploaded_file_link}}'>{{notice.uploaded_file_name}}</a> is uploaded to your folder <a href='{{url_base}}{{notice.uploaded_folder_link}}'>{{notice.uploaded_folder_name}}</a>.</td>
+                    <td>{% blocktrans with file_url=notice.uploaded_file_link file_name=notice.uploaded_file_name folder_url=notice.uploaded_folder_link folder_name=notice.uploaded_folder_name %}A file named <a href="{{url_base}}{{file_url}}">{{file_name}}</a> is uploaded to your folder <a href="{{url_base}}{{folder_link}}">{{folder_name}}</a>.{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
             {% elif notice.is_group_join_request %}
-                <tr >
+                <tr>
-                    <td>User <a href='{{url_base}}{{notice.grpjoin_user_profile_url}}'>{{notice.grpjoin_username}}</a> has asked to join group <a href='{{url_base}}{{notice.grpjoin_group_url}}'>{{notice.grpjoin_group_name}}</a>, verification message: {{notice.grpjoin_request_msg}}.</td>
+                    <td>{% blocktrans with user_url=notice.grpjoin_user_profile_url user_name=notice.grpjoin_username grp_url=notice.grpjoin_group_url grp_name=notice.grpjoin_group_name msg=notice.grpjoin_request_msg%}User <a href="{{url_base}}{{user_url}}">{{user_name}}</a> has asked to join group <a href="{{url_base}}{{grp_url}}">{{grp_name}}</a>, verification message: {{msg}}.{% endblocktrans %}</td>
                     <td>{{ notice.timestamp }}</td>
                 </tr>
           {% endif %}

seahub/notifications/templates/notifications/user_notification_list.html

@@ -33,12 +33,6 @@
 
 {% block extra_script %}
 <script type="text/javascript">
-$(function(){       
-    $('tr[data-href]').click(function() {
-        location.href = $(this).data('href');
-    });
-});
-
 $('#clear').click(function() {
     location.href = "{% url 'user_notification_remove' %}";
 });
@@ -69,8 +63,5 @@ $('#notices-more-btn').click(function() {
     });
 });
 
-$("a[id$='-notice']").click(function() {
-    window.location = $(this).data('href');
-});
 </script>
 {% endblock %}

seahub/templates/base.html

@@ -45,13 +45,19 @@
                     {% include 'snippets/search_form.html' %}
                 {% endif %}
 
-                <div data-cturl="{% url 'unseen_notices_count' %}" id="msg-count" class="fleft">
+                <div data-url="{% url 'unseen_notices_count' %}" id="msg-count" class="fleft">
                     <div id="notice-icon" class="cspt" title="{% trans "Notifications" %}">
                         <img src="{{ MEDIA_URL }}img/bell.png" alt="" />
-                        <span class="num hide" data-count="">0</span>
+                        <span class="num hide">0</span>
                     </div>
-                    <div data-pop_url="{% url 'get_popup_notices' %}" data-seen_url="{% url 'set_notices_seen' %}" data-seen_by_id_url="{% url 'set_notice_seen_by_id' %}" data-ajax="" id="notice-popup" class="hide">
+                    <div id="notice-popup" class="hide" data-url="{% url 'get_popup_notices' %}">
-                        <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
+                        <h3 class="hd">{% trans "Notifications" %}</h3>
+                        <div class="con">
+                            <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
+                            <ul class="hide" id="notice-list" data-url="{% url 'set_notice_seen_by_id' %}"></ul>
+                            <p class="alc"><a href="{% url 'user_notification_list' %}" class="all">{% trans "See All Notifications" %}</a></p>
+                        </div>
+                        <img src="{{ MEDIA_URL }}img/del.png" class="close" data-url="{% url 'set_notices_seen' %}" />
                     </div>
                 </div>
 

seahub/templates/snippets/notice_html.html

@@ -0,0 +1,47 @@
+{% load avatar_tags seahub_tags i18n %}
+
+{% for notice in notices %}
+    {% if notice.seen %}
+    <li class="read">
+    {% else %}
+    <li class="unread" data-id="{{notice.id}}">
+    {% endif %}
+
+    {% if notice.msg_from %}
+        <a href="{% url 'user_profile' notice.msg_from %}">{% avatar notice.msg_from 32 %}</a>
+    {% else %}
+        <img src={{notice.default_avatar_url}} width="32" height="32" class="avatar" />
+    {% endif %}
+
+    {% if notice.is_group_msg %}
+        <p class="brief">{{ notice.format_group_message_title|safe }}</p>
+        {% if notice.format_group_message_detail %}
+        <p class="clear detail">{{ notice.format_group_message_detail }}</p>
+        {% endif %}
+    {% elif notice.is_grpmsg_reply %}
+        <p class="brief">{{ notice.format_grpmsg_reply_title|safe }}</p>
+        {% if notice.format_grpmsg_reply_detail %}
+        <p class="clear detail">{{ notice.format_grpmsg_reply_detail }}</p>
+        {% endif %}
+    {% elif notice.is_user_message %}
+        <p class="brief">{{ notice.format_user_message_title|safe }}</p>
+        {% if notice.format_user_message_detail %}
+        <p class="clear detail">{{ notice.format_user_message_detail }}</p>
+        {% endif %}
+
+    {% elif notice.is_file_uploaded_msg %}
+        <p class="brief">{{ notice.format_file_uploaded_msg|safe }}</p>
+
+    {% elif notice.is_repo_share_msg %}
+        <p class="brief">{{ notice.format_repo_share_msg|safe }}</p>
+
+    {% elif notice.is_priv_file_share_msg %}
+        <p class="brief">{{ notice.format_priv_file_share_msg|safe }}</p>
+
+    {% elif notice.is_group_join_request %}
+        <p class="brief">{{ notice.format_group_join_request|safe }}</p>
+    {% endif %}
+
+        <p class="time">{{ notice.timestamp|translate_seahub_time }}</p>
+    </li>
+{% endfor %}

seahub/templates/snippets/notifications_popup.html

@@ -1,59 +0,0 @@
-{% load avatar_tags seahub_tags i18n %}
-<h3 class="hd">{% trans "Notifications" %}</h3>
-<div class="con">
-    <ul>
-        {% for notice in notices %}
-
-            {% if not notice.seen %}
-                <li class="unread">
-            {% else %}
-                <li class="read">
-            {% endif %}
-
-            {% if notice.msg_from %}
-                <a href="{% url 'user_profile' notice.msg_from %}">{% avatar notice.msg_from 32 %}</a>
-            {% else %}
-                <img src={{notice.default_avatar_url}} width="32" height="32" class="avatar" />
-            {% endif %}
-
-            {% if notice.is_group_msg %}
-                <p class="brief">{{ notice.format_group_message_title|safe }}
-                {% if notice.format_group_message_detail %}<br>
-                {{ notice.format_group_message_detail }}
-                {% endif %}
-                </p>
-
-            {% elif notice.is_grpmsg_reply %}
-                <p class="brief">{{ notice.format_grpmsg_reply_title|safe }}
-                {% if notice.format_grpmsg_reply_detail %}<br>
-                {{ notice.format_grpmsg_reply_detail}}
-                {% endif %}
-                </p>
-
-            {% elif notice.is_file_uploaded_msg %}
-                <p class="brief">{{ notice.format_file_uploaded_msg|safe }}</p>
-
-            {% elif notice.is_repo_share_msg %}
-                <p class="brief">{{ notice.format_repo_share_msg|safe }}</p>
-
-            {% elif notice.is_priv_file_share_msg %}
-                <p class="brief">{{ notice.format_priv_file_share_msg|safe }}</p>
-
-            {% elif notice.is_user_message %}
-                <p class="brief">{{ notice.format_user_message_title|safe }}
-                {% if notice.format_user_message_detail %}<br>
-                {{ notice.format_user_message_detail }}
-                {% endif %}
-                </p>
-
-            {% elif notice.is_group_join_request %}
-                <p class="brief">{{ notice.format_group_join_request|safe }}</p>
-
-            {% endif %}
-            <p class="time">{{ notice.timestamp|translate_seahub_time }}</p>
-            </li>
-        {% endfor %}
-    </ul>
-    <p class="alc"><a href="{% url 'user_notification_list' %}" class="all">{% trans "See All Notifications" %}</a></p>
-</div>
-<img src="{{ MEDIA_URL }}img/del.png" class="close" style="cursor:pointer"/>

seahub/views/ajax.py

@@ -1279,7 +1279,7 @@ def get_popup_notices(request):
 
     If unseen notices > 5, return all unseen notices.
     If unseen notices = 0, return last 5 notices.
-    Otherwise return all unseen notices, pluse some seen notices to make the
+    Otherwise return all unseen notices, plus some seen notices to make the
     sum equal to 5.
 
     Arguments:
@@ -1296,18 +1296,18 @@ def get_popup_notices(request):
     seen_notices = []
 
     list_num = 5
-    count = UserNotification.objects.count_unseen_user_notifications(username)
+    unseen_num = UserNotification.objects.count_unseen_user_notifications(username)
-    if count == 0:
+    if unseen_num == 0:
         seen_notices = UserNotification.objects.get_user_notifications(
             username)[:list_num]
-    elif count > list_num:
+    elif unseen_num > list_num:
         unseen_notices = UserNotification.objects.get_user_notifications(
             username, seen=False)
     else:
         unseen_notices = UserNotification.objects.get_user_notifications(
             username, seen=False)
         seen_notices = UserNotification.objects.get_user_notifications(
-            username, seen=True)[:list_num - count]
+            username, seen=True)[:list_num - unseen_num]
 
     result_notices += unseen_notices
     result_notices += seen_notices
@@ -1345,12 +1345,12 @@ def get_popup_notices(request):
             pass
 
     ctx_notices = {"notices": result_notices}
-    notifications_popup_html = render_to_string(
+    notice_html = render_to_string(
-            'snippets/notifications_popup.html', ctx_notices,
+            'snippets/notice_html.html', ctx_notices,
             context_instance=RequestContext(request))
 
     return HttpResponse(json.dumps({
-                "notifications_popup_html": notifications_popup_html,
+                "notice_html": notice_html,
                 }), content_type=content_type)
 
 @login_required