Improved online notification. Widget should stay open on updates and close after click to an object.

app/assets/javascripts/app/controllers/widget/online_notification.js.coffee

@@ -8,7 +8,7 @@ class App.OnlineNotificationWidget extends App.Controller
     @bind 'OnlineNotification::changed', =>
       @delay(
         => @fetch()
-        1000
+        1200
         'online-notification-changed'
       )
 
@@ -20,14 +20,14 @@ class App.OnlineNotificationWidget extends App.Controller
         if !@access()
           @el.find('activity-counter').html('')
           return
-        @start()
+        @createContainer()
 
     if @access()
-      @start()
-      @subscribeId = App.OnlineNotification.subscribe( @start )
+      @createContainer()
+      @subscribeId = App.OnlineNotification.subscribe( @updateContent )
 
   release: =>
-    @stop()
+    @removeContainer()
     App.OnlineNotification.unsubscribe( @subscribeId )
 
   access: ->
@@ -46,17 +46,13 @@ class App.OnlineNotificationWidget extends App.Controller
     else
       @toggle.append('<div class="activity-counter">' + count.toString() + '</div>')
 
-  markAllAsSeen: () =>
+  markAllAsRead: =>
     @ajax(
-      id:   'markAllAsSeen'
+      id:   'markAllAsRead'
       type: 'POST'
-      url:  @apiPath + '/online_notifications/markAllAsSeen'
+      url:  @apiPath + '/online_notifications/mark_all_as_read'
       data: JSON.stringify( '' )
       processData: true
-      success: (data, status, xhr) =>
-        if data.result is 'ok'
-        else
-      fail: =>
     )
 
   removeClickCatcher: () =>
@@ -65,34 +61,44 @@ class App.OnlineNotificationWidget extends App.Controller
     @clickCatcher = null
 
   onShow: =>
-    # show frontend times
-    $('#markAllAsSeen').bind('click', (e) =>
-      e.preventDefault()
-      @markAllAsSeen()
+    @updateContent()
+
+    # set heigth of notification popover
+    height = $('#app').height()
+    $('.js-notificationsContainer').css('height', "#{height-12}px")
+    $('.js-notificationsContainer .arrow').css('top', '20px')
+
+    # close notification list on click
+    $('.js-notificationsContainer').on('click', (e) =>
+      #console.log('CL')
+      @hidePopover()
     )
-    @frontendTimeUpdate()
-    
+
+    # mark all notifications as read
+    $('.js-markAllAsRead').on('click', (e) =>
+      e.preventDefault()
+      @markAllAsRead()
+    )
+
     # add clickCatcher
     @clickCatcher = new App.clickCatcher
-      holder: @el.offsetParent()
-      callback: @hidePopover
+      holder:      @el.offsetParent()
+      callback:    @hidePopover
       zIndexScale: 4
 
   onHide: =>
-    $('#markAllAsSeen').unbind('click')
     @removeClickCatcher()
 
   hidePopover: =>
     @toggle.popover('hide')
 
-  stop: =>
-    @counterUpdate(0)
-    @toggle.popover('destroy')
+  fetch: =>
+    load = (items) =>
+      App.OnlineNotification.refresh( items, { clear: true } )
+      @updateContent()
+    App.OnlineNotification.fetchFull(load)
 
-  start: =>
-    @stop()
-
-    # show popover
+  updateContent: =>
     items = App.OnlineNotification.search( sortBy: 'created_at', order: 'DESC' )
     counter = 0
     for item in items
@@ -100,26 +106,46 @@ class App.OnlineNotificationWidget extends App.Controller
         counter = counter + 1
     @counterUpdate(counter)
 
+    # update title
+    $('.js-notificationsContainer .popover-title').html(
+      App.i18n.translateInline( 'Notifications' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
+    )
+
+    # update content
     items = @prepareForObjectList(items)
+    $('.js-notificationsContainer .popover-content').html(
+      $( App.view('widget/online_notification_content')(items: items) )
+    )
 
-    @toggle.popover
-      trigger:    'click'
-      container:  'body'
-      html:       true
-      placement:  'right'
-      viewport: { "selector": "#app", "padding": 10 }
-      template: App.view('widget/online_notification')()
-      title: ->
-        App.i18n.translateInline( 'Notifications' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
-      content: =>
-        # insert data
-        $( App.view('widget/online_notification_content')(items: items) )
-    .on
-      'shown.bs.popover': @onShow
-      'hide.bs.popover': @onHide
+    # show frontend times
+    @frontendTimeUpdate()
 
-  fetch: =>
-    load = (items) =>
-      App.OnlineNotification.refresh( items, { clear: true } )
-      @start()
-    App.OnlineNotification.fetchFull(load)
+  createContainer: =>
+    @removeContainer()
+
+    # show popover
+    waitUntilOldPopoverIsRemoved = =>
+      @toggle.popover
+        trigger:   'click'
+        container: 'body'
+        html:      true
+        placement: 'right'
+        viewport:  { "selector": "#app", "padding": 10 }
+        template:  App.view('widget/online_notification')()
+        title:     ' '
+        content:   ' '
+      .on
+        'shown.bs.popover': @onShow
+        'hide.bs.popover':  @onHide
+
+      @updateContent()
+
+    @delay(
+      => waitUntilOldPopoverIsRemoved()
+      600
+      'popover'
+    )
+
+  removeContainer: =>
+    @counterUpdate(0)
+    @toggle.popover('destroy')

app/assets/javascripts/app/views/widget/online_notification.jst.eco

@@ -1,8 +1,8 @@
-<div class="popover popover--notifications" role="tooltip">
+<div class="popover popover--notifications js-notificationsContainer" role="tooltip">
   <div class="arrow"></div>
   <div class="popover-notificationsHeader">
     <span class="popover-title"></span>
-    <a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
+    <a class="popover-notificationsMarkRead js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
   </div>
   <div class="popover-content"></div>
 </div>

app/assets/javascripts/app/views/widget/online_notification_header.jst.eco

@@ -1,5 +0,0 @@
-<span class="popover-notificationsTitle">
-  <%- @T( 'Notifications' ) %>
-  <span class="popover-notificationsCounter"><%= @counter %></span>
-  <a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
-</span>

app/assets/stylesheets/zammad.css.scss

@@ -2605,7 +2605,7 @@ footer {
     margin-left: auto;
   }
 
-  a.list-group-item.active > .badge, 
+  a.list-group-item.active > .badge,
   .nav-pills > .active > a > .badge {
     color: #96969b;
     background: none;
@@ -2634,10 +2634,6 @@ footer {
   z-index: 1110;
   box-shadow: 0 1px 14px rgba(0,8,14,.25);
   // max-height: calc(100vh - 20px);
-  
-  &.is-visible {
-    display: block;
-  }
 }
 
   .popover-title {

app/controllers/online_notifications_controller.rb

@@ -88,12 +88,30 @@ curl http://localhost/api/v1/online_notifications -v -u #{login}:#{password} -H
     model_update_render(OnlineNotification, params)
   end
 
-  def markAllAsSeen
+=begin
+
+Resource:
+PUT /api/v1/online_notifications/mark_all_as_read
+
+Payload:
+{}
+
+Response:
+{}
+
+Test:
+curl http://localhost/api/v1/online_notifications/mark_all_as_read -v -u #{login}:#{password} -X POST -d '{}'
+
+=end
+
+  def mark_all_as_read
       notifications = OnlineNotification.list(current_user,100)
       notifications.each do |notification|
-        OnlineNotification.seen({:id => notification['id']})
+        if !notification['seen']
+          OnlineNotification.seen( :id => notification['id'] )
+        end
       end
-      render :json => {data:'ok'}
+    render :json => {}, :status => :ok
   end
 
-end
+end

config/routes/online_notification.rb

@@ -2,8 +2,8 @@ Zammad::Application.routes.draw do
   api_path = Rails.configuration.api_path
 
   # groups
-  match api_path + '/online_notifications',                   :to => 'online_notifications#index',         :via => :get
-  match api_path + '/online_notifications/:id',               :to => 'online_notifications#update',        :via => :put
-  match api_path + '/online_notifications/markAllAsSeen',     :to => 'online_notifications#markAllAsSeen', :via => :post
+  match api_path + '/online_notifications',                   :to => 'online_notifications#index',            :via => :get
+  match api_path + '/online_notifications/:id',               :to => 'online_notifications#update',           :via => :put
+  match api_path + '/online_notifications/mark_all_as_read',  :to => 'online_notifications#mark_all_as_read', :via => :post
 
 end