diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index a155431ac..4d4106c40 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -72,6 +72,18 @@ .modal_main(); }; & { + @keyframes notification { + 0% { + background: rgba(0,0,0,0); + } + 50% { + background: rgba(0,0,0,0.2); + } + 100% { + background: rgba(0,0,0,0); + } + } + .toolbar_vars(); @toolbar_line-height: 32px; @toolbar_top-height: 64px; @@ -1001,6 +1013,11 @@ width: 125px; text-align: center; } + #cp-toolbar-chat-drawer-open button { + &.cp-toolbar-notification { + animation: notification 2s ease-in-out infinite; + } + } .cp-toolbar-share-button { width: 50px; text-align: center; diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index 0c4fdb6ac..ffb35d54d 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -420,7 +420,7 @@ Messenger, MessengerUI, Messages) { }).prependTo(toolbar.chatContent); var sframeChan = Common.getSframeChannel(); var messenger = Messenger.create(sframeChan); - MessengerUI.create(messenger, $container, Common); + MessengerUI.create(messenger, $container, Common, toolbar); }; var createChat = function (toolbar, config) { if (!config.metadataMgr) { @@ -459,6 +459,7 @@ Messenger, MessengerUI, Messages) { $content.show(); $button.addClass('cp-toolbar-button-active'); config.$contentContainer.addClass('cp-chat-visible'); + $button.removeClass('cp-toolbar-notification'); }; $closeIcon.click(function () { Common.setAttribute(['toolbar', 'chat-drawer'], false); diff --git a/www/contacts/messenger-ui.js b/www/contacts/messenger-ui.js index 99fa0a903..d66b44e9d 100644 --- a/www/contacts/messenger-ui.js +++ b/www/contacts/messenger-ui.js @@ -40,7 +40,7 @@ define([ }; }; - MessengerUI.create = function (messenger, $container, common) { + MessengerUI.create = function (messenger, $container, common, toolbar) { var sframeChan = common.getSframeChannel(); var metadataMgr = common.getMetadataMgr(); var origin = metadataMgr.getPrivateData().origin; @@ -96,8 +96,15 @@ define([ return $userlist.find(dataQuery(id)); }; + var notifyToolbar = function () { + if (!toolbar || !toolbar['chat']) { return; } + if (toolbar['chat'].find('button').hasClass('cp-toolbar-button-active')) { return; } + toolbar['chat'].find('button').addClass('cp-toolbar-notification'); + }; + var notify = function (id) { find.inList(id).addClass('cp-app-contacts-notify'); + notifyToolbar(); }; var unnotify = function (id) { find.inList(id).removeClass('cp-app-contacts-notify');