Rewrite notifications with popover class

media/css/seahub.css

@@ -16,6 +16,11 @@
  * (TODO: complete this TOC)
  *
  */
+/*
+ * z-index:
+ *    popover:  20
+ *
+ */
 
 /****** icon-xx ********/
 /* Font Awesome 3.2.1 by Dave Gandy - http://fortawesome.github.com/Font-Awesome */
@@ -493,7 +498,8 @@ a.op-icon:focus {
     background:#dfdfdf;
 }
 .no-deco,
-.no-deco:hover {
+.no-deco:hover,
+.no-deco:focus {
     text-decoration:none;
 }
 .input-disabled {/* for type="password/text" etc*/
@@ -1174,6 +1180,7 @@ textarea:-moz-placeholder {/* for FF */
     border-radius:3px;
     box-shadow:0 0 4px #ccc;
     position:absolute;
+    z-index: 20;
 }
 .popover-hd {
     padding:5px 0 3px;
@@ -1436,16 +1443,16 @@ button.dropdown-toggle:focus {
     text-decoration:underline;
 }
 /* top-bar */
-#msg-count {
+#notifications {
     position:relative;
     margin:10px 32px 0 25px;
 }
-#msg-count .sf2-icon-bell {
+#notifications .sf2-icon-bell {
     font-size:24px;
     line-height:1;
     color:#999;
 }
-#msg-count .num {
+#notifications .num {
     position:absolute;
     color:#fff;
     font-size:12px;
@@ -1456,66 +1463,39 @@ button.dropdown-toggle:focus {
     top:0;
     left:15px;
 }
-#notice-popup {
+#notice-popover {
-    position:absolute;
     top:38px;
     right:-80px;
-    width:240px;
-    background:#fff;
-    border:1px solid #c9c9c9;
-    border-radius:3px;
-    box-shadow:0 0 1px #f3f3f3;
-    z-index:20;
 }
-#notice-popup .hd {
+#notice-popover .outer-caret {
-    text-align:center;
+    right:82px;
-    padding:5px 0 3px;
-    border-bottom:1px solid #dfdfe1;
-    margin:0 10px;
 }
-#notice-popup .con {
+#notice-popover a {
-    padding:0 10px;
-    overflow:auto;
-}
-#notice-popup a {
     font-weight:normal;
 }
-#notice-popup .close {
+#notice-popover li {
-    position:absolute;
+    padding:9px 10px 3px 8px;
-    top:.5em;
-    right:10px;
-    cursor:pointer;
-}
-#notice-popup .close {
-    font-size:16px;
-    color:#b9b9b9;
-    margin:0;
-}
-#notice-popup li {
-    padding:9px 0 3px;
     border-bottom:1px solid #dfdfe1;
 }
-#notice-popup .unread {
+#notice-popover li.unread {
     background:#f5f5f7;
     border-left:2px solid #feac74;
-    margin:0 -10px;
+    padding-left:6px;
-    padding-left:8px;
-    padding-right:10px;
 }
-#notice-popup .avatar {
+#notice-popover .avatar {
     border-radius:1000px;
     float:left;
 }
-#notice-popup .brief {
+#notice-popover .brief {
     margin-left:40px;
     margin-top:0;
 }
-#notice-popup .time {
+#notice-popover .time {
     color:#999;
     text-align:right;
     margin:0;
 }
-#notice-popup .all {
+#notice-popover .all {
     color:#a4a4a4;
 }
 #account {

media/js/base.js

@@ -14,121 +14,6 @@ if ($('.messages')[0]) {
 
 $(function() {
 
-    var msg_ct = $("#msg-count");
-
-    // for login page, and pages without 'header' such as 'file view' page.
-    if (msg_ct.length == 0) {
-        return false;
-    }
-    // original title
-    var orig_doc_title = document.title;
-    msg_ct.data('orig_doc_title', orig_doc_title); // for 'mark all read' in 'notice list' page
-    var reqUnreadNum = function() {
-        $.ajax({
-            url: msg_ct.data('url'),
-            dataType: 'json',
-            cache: false,
-            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')) {
-            $('.con', popup).css({'max-height':$(window).height() - $('#header').outerHeight() - $('#notice-popup .hd').outerHeight() - 3});
-            var loading_tip = $('.loading-tip', popup),
-                notice_list = $('#notice-list');
-            notice_list.addClass('hide');
-            loading_tip.show();
-            $('.error', popup).addClass('hide');
-            $.ajax({
-                url: popup.data('url'),
-                dataType: 'json',
-                success: function(data) {
-                    loading_tip.hide();
-                    notice_list.html(data['notice_html']).removeClass('hide');
-
-                    // set a notice to be read when <a> in it is clicked
-                    $('.unread a', notice_list).click(function() {
-                        var notice_id = $(this).parents('.unread').data('id');
-                        var link_href = $(this).attr('href');
-                        $.ajax({
-                            url: notice_list.data('url') + '?notice_id=' + e(notice_id),
-                            type: 'POST',
-                            dataType: 'json',
-                            beforeSend: prepareCSRFToken,
-                            success: function(data) {
-                                location.href = link_href;
-                            },
-                            error: function() {
-                                location.href = link_href;
-                            }
-                        });
-                        return false;
-                    });
-
-                    $('.detail', notice_list).click(function() {
-                        location.href = $('.brief a', $(this).parent()).attr('href');
-                    });
-                },
-                error: function (xhr, textStatus, errorThrown) {
-                    if (xhr.responseText) {
-                        var error = $.parseJSON(xhr.responseText).error;
-                        loading_tip.hide();
-                        if ($('.error', popup).length == 0) {
-                            loading_tip.after('<p class="error alc">' + error + '</p>');
-                        } else {
-                            $('.error', popup).removeClass('hide');
-                        }
-                    }
-                }
-            });
-        }
-
-        return false;
-    });
-    $(window).resize(function() {
-        var popup = $('#notice-popup');
-        if (!popup.hasClass('hide')) {
-            $('.con', popup).css({'max-height':$(window).height() - $('#header').outerHeight() - $('#notice-popup .hd').outerHeight() - 3});
-        }
-    });
-
-    $('#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,
-                type: 'POST',
-                dataType: 'json',
-                beforeSend: prepareCSRFToken,
-                success: function() {
-                    $('.num', msg_ct).html(0).addClass('hide');
-                    document.title = orig_doc_title;
-                }
-            });
-        }
-
-        return false;
-    });
-
     $('#my-info').click(function() {
         var popup = $('#user-info-popup');
         popup.toggleClass('hide');

seahub/templates/base.html

@@ -46,21 +46,11 @@
                     {% include 'snippets/search_form.html' %}
                 {% endif %}
 
-                <div data-url="{% url 'unseen_notices_count' %}" id="msg-count" class="fleft">
+                <div data-url="{% url 'unseen_notices_count' %}" id="notifications" class="fleft">
                     <a href="#" class="no-deco" id="notice-icon" title="{% trans "Notifications" %}" aria-label="{% trans "Notifications" %}">
                         <span class="sf2-icon-bell"></span>
                         <span class="num hide">0</span>
                     </a>
-                    <div id="notice-popup" class="hide" data-url="{% url 'get_popup_notices' %}">
-                        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-                        <h3 class="hd">{% trans "Notifications" %}</h3>
-                        <div class="con">
-                            <span class="loading-icon loading-tip"></span>
-                            <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>
-                        <a href="#" class="close sf2-icon-x1 op-icon" data-url="{% url 'set_notices_seen' %}" title="{% trans "Close" %}"></a>
-                    </div>
                 </div>
 
                 <div id="account" class="fright">

seahub/templates/base_for_backbone.html

@@ -57,21 +57,11 @@
                     {% include 'snippets/search_form.html' %}
                 {% endif %}
 
-                <div id="msg-count" class="fleft">
+                <div id="notifications" class="fleft">
                     <a href="#" class="no-deco" id="notice-icon" title="{% trans "Notifications" %}" aria-label="{% trans "Notifications" %}">
                         <span class="sf2-icon-bell"></span>
                         <span class="num hide">0</span>
                     </a>
-                    <div id="notice-popup" class="hide">
-                        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-                        <h3 class="hd">{% trans "Notifications" %}</h3>
-                        <div class="con">
-                            <span class="loading-icon loading-tip"></span>
-                            <ul class="hide" id="notice-list"></ul>
-                            <p class="alc"><a href="{% url 'user_notification_list' %}" class="all">{% trans "See All Notifications" %}</a></p>
-                        </div>
-                        <a href="#" class="close sf2-icon-x1 op-icon" title="{% trans "Close" %}"></a>
-                    </div>
                 </div>
 
                 <div id="account" class="fright">

seahub/templates/js/templates.html

@@ -1417,3 +1417,17 @@
         </div>
     </td>
 </script>
+
+<script type="text/template" id="notice-popover-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="popover-hd ovhd">
+        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
+        <h3 class="popover-title">{% trans "Notifications" %}</h3>
+    </div>
+    <div class="popover-con">
+        <span class="loading-icon loading-tip"></span>
+        <ul class="hide notice-list"></ul>
+        <p class="alc"><a href="{% url 'user_notification_list' %}" class="all">{% trans "See All Notifications" %}</a></p>
+        <p class="error alc hide"></p>
+    </div>
+</script>

static/scripts/app/router.js

@@ -12,10 +12,12 @@ define([
     'app/views/dir',
     'app/views/starred-file',
     'app/views/devices',
-    'app/views/activities'
+    'app/views/activities',
+    'app/views/notifications'
 ], function($, Backbone, Common, SideNavView, MyReposView,
     SharedReposView, GroupsView, GroupView,
-    OrgView, DirView, StarredFileView, DevicesView, ActivitiesView) {
+    OrgView, DirView, StarredFileView, DevicesView, ActivitiesView,
+    NotificationsView) {
     "use strict";
 
     var Router = Backbone.Router.extend({
@@ -45,7 +47,7 @@ define([
             Common.prepareApiCsrf();
             Common.initLocale();
             Common.initAccountPopup();
-            Common.initNoticePopup();
+            //Common.initNoticePopup();
 
             this.sideNavView = new SideNavView();
             app.ui.sideNavView = this.sideNavView;
@@ -61,6 +63,8 @@ define([
             this.devicesView = new DevicesView();
             this.activitiesView = new ActivitiesView();
 
+            app.ui.notificationsView = this.notificationsView = new NotificationsView();
+
             this.currentView = this.myReposView;
 
             $('#info-bar .close').click(Common.closeTopNoticeBar);

static/scripts/app/views/notifications.js

@@ -0,0 +1,139 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/widgets/popover'
+], function($, _, Backbone, Common, PopoverView) {
+    'use strict';
+
+    var View = PopoverView.extend({
+        id: 'notice-popover',
+        className: 'popover',
+
+        template:  _.template($('#notice-popover-tmpl').html()),
+
+        initialize: function(options) {
+            PopoverView.prototype.initialize.call(this);
+
+            this.render();
+            this.$loadingTip = this.$('.loading-tip');
+            this.$error = this.$('.error');
+            this.$noticeList = this.$('.notice-list');
+
+            this.$notifications = $("#notifications");
+            this.orig_doc_title = document.title;
+            var _this = this;
+            var reqUnreadNum = function() {
+                $.ajax({
+                    url: Common.getUrl({name: 'get_unseen_notices_num'}),
+                    dataType: 'json',
+                    cache: false,
+                    success: function(data) {
+                        var count = data['count'],
+                            num = $('.num', _this.$notifications);
+                        num.html(count);
+                        if (count > 0) {
+                            num.removeClass('hide');
+                            document.title = '(' + count + ')' + _this.orig_doc_title;
+                        } else {
+                            num.addClass('hide');
+                            document.title =  _this.orig_doc_title;
+                        }
+                    }
+                });
+            };
+            reqUnreadNum();
+            // request every 30s
+            setInterval(reqUnreadNum, 30*1000);
+
+            $('#notice-icon').click(function() {
+                _this.toggle();
+                return false;
+            });
+        },
+
+        render: function() {
+            this.$el.html(this.template());
+            return this;
+        },
+
+        // override hide function
+        hide: function() {
+            var _this = this;
+            app.ui.currentPopover = null;
+            this.$el.detach();
+
+            if (this.$(".unread").length > 0) {
+                // set all unread notice to be read
+                $.ajax({
+                    url: Common.getUrl({name: 'set_notices_seen'}),
+                    type: 'POST',
+                    dataType: 'json',
+                    beforeSend: Common.prepareCSRFToken,
+                    success: function() {
+                        $('.num', _this.$notifications).html(0).addClass('hide');
+                        document.title = _this.orig_doc_title;
+                    }
+                });
+            }
+
+            return false;
+        },
+
+        showContent: function() {
+            var _this = this;
+
+            this.$noticeList.addClass('hide');
+            this.$error.hide();
+            this.$loadingTip.show();
+
+            $.ajax({
+                url: Common.getUrl({name: 'get_popup_notices'}),
+                dataType: 'json',
+                success: function(data) {
+                    _this.$loadingTip.hide();
+                    _this.$noticeList.html(data['notice_html']).show();
+
+                    // set a notice to be read when <a> in it is clicked
+                    $('.unread a', _this.$noticeList).click(function() {
+                        var notice_id = $(this).parents('.unread').data('id');
+                        var link_href = $(this).attr('href');
+                        $.ajax({
+                            url: Common.getUrl({name: 'set_notice_seen_by_id'}) + '?notice_id=' + encodeURIComponent(notice_id),
+                            type: 'POST',
+                            dataType: 'json',
+                            beforeSend: Common.prepareCSRFToken,
+                            success: function(data) {
+                                location.href = link_href;
+                            },
+                            error: function() {
+                                location.href = link_href;
+                            }
+                        });
+                        return false;
+                    });
+                    $('.detail', _this.$noticeList).click(function() {
+                        location.href = $('.brief a', $(this).parent()).attr('href');
+                    });
+                },
+                error: function (xhr, textStatus, errorThrown) {
+                    _this.$loadingTip.hide();
+                    var err_msg;
+                    if (xhr.responseText) {
+                        err_msg = $.parseJSON(xhr.responseText).error;
+                    } else {
+                        err_msg = gettext('Please check the network.');
+                    }
+                    _this.$error.html(err_msg).show();
+                }
+            });
+
+            this.$notifications.append(this.$el);
+            return false;
+        }
+
+    });
+
+    return View;
+});

static/scripts/common.js

@@ -536,127 +536,6 @@ define([
             });
         },
 
-        initNoticePopup: function() {
-            var _this = this;
-            var msg_ct = $("#msg-count");
-
-            // for login page, and pages without 'header' such as 'file view' page.
-            if (msg_ct.length == 0) {
-                return false;
-            }
-            // original title
-            var orig_doc_title = document.title;
-            msg_ct.data('orig_doc_title', orig_doc_title); // for 'mark all read' in 'notice list' page
-            var reqUnreadNum = function() {
-                $.ajax({
-                    url: _this.getUrl({name: 'get_unseen_notices_num'}),
-                    dataType: 'json',
-                    cache: false,
-                    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')) {
-                    $('.con', popup).css({'max-height':$(window).height() - $('#header').outerHeight() - $('.hd', popup).outerHeight() - 3});
-                    var loading_tip = $('.loading-tip', popup),
-                        notice_list = $('#notice-list');
-                    notice_list.addClass('hide');
-                    loading_tip.show();
-                    $('.error', popup).addClass('hide');
-
-                    $.ajax({
-                        url: _this.getUrl({name: 'get_popup_notices'}),
-                        dataType: 'json',
-                        success: function(data) {
-                            loading_tip.hide();
-                            notice_list.html(data['notice_html']).removeClass('hide');
-
-                            // set a notice to be read when <a> in it is clicked
-                            $('.unread a', notice_list).click(function() {
-                                var notice_id = $(this).parents('.unread').data('id');
-                                var link_href = $(this).attr('href');
-                                $.ajax({
-                                    url: _this.getUrl({name: 'set_notice_seen_by_id'}) + '?notice_id=' + encodeURIComponent(notice_id),
-                                    type: 'POST',
-                                    dataType: 'json',
-                                    beforeSend: _this.prepareCSRFToken,
-                                    success: function(data) {
-                                        location.href = link_href;
-                                    },
-                                    error: function() {
-                                        location.href = link_href;
-                                    }
-                                });
-                                return false;
-                            });
-                            $('.detail', notice_list).click(function() {
-                                location.href = $('.brief a', $(this).parent()).attr('href');
-                            });
-                        },
-                        error: function (xhr, textStatus, errorThrown) {
-                            if (xhr.responseText) {
-                                var error = $.parseJSON(xhr.responseText).error;
-                                loading_tip.hide();
-                                if ($('.error', popup).length == 0) {
-                                    loading_tip.after('<p class="error alc">' + error + '</p>');
-                                } else {
-                                    $('.error', popup).removeClass('hide');
-                                }
-                            }
-                        }
-                    });
-                }
-                return false;
-            });
-            $(window).resize(function() {
-                var popup = $('#notice-popup');
-                if (!popup.hasClass('hide')) {
-                    $('.con', popup).css({'max-height':$(window).height() - $('#header').outerHeight() - $('.hd', popup).outerHeight() - 3});
-                }
-            });
-
-            $('#notice-popup .close').click(function() {
-                $('#notice-popup').addClass('hide');
-                if ($('#notice-list .unread').length > 0) {
-                    // set all unread notice to be read
-                    $.ajax({
-                        url: _this.getUrl({name: 'set_notices_seen'}),
-                        type: 'POST',
-                        dataType: 'json',
-                        beforeSend: _this.prepareCSRFToken,
-                        success: function() {
-                            $('.num', msg_ct).html(0).addClass('hide');
-                            document.title = orig_doc_title;
-                        }
-                    });
-                }
-
-                return false;
-            });
-
-            $(document).click(function(e) {
-                _this.closePopup(e, $('#notice-popup'), $('#notice-icon'));
-            });
-        },
-
         closeTopNoticeBar: function () {
             if (!app.pageOptions.cur_note) {
                 return false;