diff --git a/media/css/seahub.css b/media/css/seahub.css index e852fcb3d9..09178e61ed 100644 --- a/media/css/seahub.css +++ b/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 { - position:absolute; +#notice-popover { 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 { - text-align:center; - padding:5px 0 3px; - border-bottom:1px solid #dfdfe1; - margin:0 10px; +#notice-popover .outer-caret { + right:82px; } -#notice-popup .con { - padding:0 10px; - overflow:auto; -} -#notice-popup a { +#notice-popover a { font-weight:normal; } -#notice-popup .close { - position:absolute; - top:.5em; - right:10px; - cursor:pointer; -} -#notice-popup .close { - font-size:16px; - color:#b9b9b9; - margin:0; -} -#notice-popup li { - padding:9px 0 3px; +#notice-popover li { + padding:9px 10px 3px 8px; border-bottom:1px solid #dfdfe1; } -#notice-popup .unread { +#notice-popover li.unread { background:#f5f5f7; border-left:2px solid #feac74; - margin:0 -10px; - padding-left:8px; - padding-right:10px; + padding-left:6px; } -#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 { diff --git a/media/js/base.js b/media/js/base.js index ea26db829f..ea16ec3680 100644 --- a/media/js/base.js +++ b/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 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('

' + error + '

'); - } 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'); diff --git a/seahub/templates/base.html b/seahub/templates/base.html index 9080dc9a89..bd39103a8d 100644 --- a/seahub/templates/base.html +++ b/seahub/templates/base.html @@ -46,21 +46,11 @@ {% include 'snippets/search_form.html' %} {% endif %} -
+
0 -
-
-

{% trans "Notifications" %}

-
- -
    -

    {% trans "See All Notifications" %}

    -
    - -
    diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html index 6f4897aa5b..5d341ad9d9 100644 --- a/seahub/templates/base_for_backbone.html +++ b/seahub/templates/base_for_backbone.html @@ -57,21 +57,11 @@ {% include 'snippets/search_form.html' %} {% endif %} -
    +
    0 -
    -
    -

    {% trans "Notifications" %}

    -
    - -
      -

      {% trans "See All Notifications" %}

      -
      - -
      diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html index 138fbce2c2..b300c0c43e 100644 --- a/seahub/templates/js/templates.html +++ b/seahub/templates/js/templates.html @@ -1417,3 +1417,17 @@
      + + diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js index 7c8cfd2c8a..e25279621c 100644 --- a/static/scripts/app/router.js +++ b/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); diff --git a/static/scripts/app/views/notifications.js b/static/scripts/app/views/notifications.js new file mode 100644 index 0000000000..ee20ab48ac --- /dev/null +++ b/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 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; +}); diff --git a/static/scripts/common.js b/static/scripts/common.js index ed98c35539..14bfe173a3 100644 --- a/static/scripts/common.js +++ b/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 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('

      ' + error + '

      '); - } 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;