fix notifications height bug and remove popover dependencies

app/assets/javascripts/app/controllers/navigation.coffee

@@ -1,6 +1,9 @@
 class App.Navigation extends App.ControllerWidgetPermanent
   className: 'navigation vertical'
 
+  events:
+    'click .js-toggleNotifications': 'toggleNotifications'
+
   constructor: ->
     super
     @render()
@@ -202,9 +205,8 @@ class App.Navigation extends App.ControllerWidgetPermanent
       @emptyAndClose()
     )
 
-    new App.OnlineNotificationWidget(
+    @notificationWidget = new App.OnlineNotificationWidget()
-      el: @el
+    $('#app').append @notificationWidget.el
-    )
 
   listNavigate: (e) =>
     if e.keyCode is 27 # close on esc
@@ -468,4 +470,8 @@ class App.Navigation extends App.ControllerWidgetPermanent
       @renderPersonal()
     App.RecentView.fetchFull(load)
 
+  toggleNotifications: (event) ->
+    event.stopPropagation()
+    @notificationWidget.toggle()
+
 App.Config.set( 'navigation', App.Navigation, 'Navigations' )

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

@@ -1,8 +1,22 @@
 class App.OnlineNotificationWidget extends App.Controller
   alreadyShown: {}
+  shown: false
+  className: 'popover popover--notifications right'
+  attributes:
+    role: 'tooltip'
+
+  events:
+    'click .js-mark': 'markAllAsRead'
+    'click .js-item': 'hide'
+    'click .js-remove': 'removeItem'
+    'click .js-locationVerify': 'onItemClick'
+    'keydown': 'listNavigate'
 
   elements:
-    '.js-toggleNotifications': 'toggle'
+    '.js-notificationsContainer': 'container'
+    '.js-mark': 'mark'
+    '.js-item': 'item'
+    '.js-content': 'content'
 
   constructor: ->
     super
@@ -29,27 +43,26 @@ class App.OnlineNotificationWidget extends App.Controller
     # rebuild widget on auth
     @bind 'auth', (user) =>
       if !user
-        @el.find('.js-counter').text('')
+        @counterUpdate(0)
       else
         if !@access()
-          @el.find('.js-counter').text('')
+          @counterUpdate(0)
           return
-        @createContainer()
 
     if @access()
-      @createContainer()
+      @subscribeId = App.OnlineNotification.subscribe(@show)
-      @subscribeId = App.OnlineNotification.subscribe(@updateContent)
 
-    @bind('ui:rerender', =>
+    @bind('ui:reshow', =>
-      @updateContent()
+      @show()
       'popover'
     )
 
+    $(window).on 'click.notifications', @hide
+
   release: ->
-    @removeContainer()
     $(window).off 'click.notifications'
-    $(window).off 'keydown.notifications'
     App.OnlineNotification.unsubscribe(@subscribeId)
+    super
 
   access: ->
     return false if !@Session.get()
@@ -58,9 +71,8 @@ class App.OnlineNotificationWidget extends App.Controller
     return false
 
   listNavigate: (e) =>
-
     if e.keyCode is 27 # close on esc
-      @hidePopover()
+      @hide()
       return
     else if e.keyCode is 38 # up
       @nudge(e, -1)
@@ -69,25 +81,24 @@ class App.OnlineNotificationWidget extends App.Controller
       @nudge(e, 1)
       return
     else if e.keyCode is 13 # enter
-      $('.js-notificationsContainer .popover-content .activity-entry.is-hover .js-locationVerify').click()
+      @item.filter('.is-hover').find('.js-locationVerify').click()
 
   nudge: (e, position) ->
 
     # get current
-    navigation = $('.js-notificationsContainer .popover-content')
+    current = @item.filter('.is-hover')
-    current = navigation.find('.activity-entry.is-hover')
+    if !current.size()
-    if !current.get(0)
+      @item.first().addClass('is-hover')
-      navigation.find('.activity-entry').first().addClass('is-hover')
       return
 
     if position is 1
-      next = current.next('.activity-entry')
+      next = current.next('.js-item')
-      if next.get(0)
+      if next.size()
         current.removeClass('is-hover')
         next.addClass('is-hover')
     else
-      prev = current.prev('.activity-entry')
+      prev = current.prev('.is-item')
-      if prev.get(0)
+      if prev.size()
         current.removeClass('is-hover')
         prev.addClass('is-hover')
 
@@ -97,13 +108,19 @@ class App.OnlineNotificationWidget extends App.Controller
       @scrollToIfNeeded(prev, true)
 
   counterUpdate: (count) =>
+    count = '' if count is 0
+
+    $('.js-notificationsCounter').text(count)
+    @count = count
+
+    # show mark all as read if needed
     if !count
-      @$('.js-counter').text('')
+      @mark.addClass('hidden')
-      return
+    else
+      @mark.removeClass('hidden')
 
-    @$('.js-counter').text(count)
+  markAllAsRead: (event) ->
-
+    event.preventDefault()
-  markAllAsRead: =>
     @counterUpdate(0)
     @ajax(
       id:   'markAllAsRead'
@@ -115,80 +132,49 @@ class App.OnlineNotificationWidget extends App.Controller
 
   updateHeight: ->
     # set height of notification popover
-    notificationsContainer  = $('.js-notificationsContainer')
     heightApp               = $('#app').height()
     heightPopoverSpacer     = 22
-    heightPopoverHeader     = notificationsContainer.find('.popover-notificationsHeader').outerHeight(true)
+    heightPopoverHeader     = @header.outerHeight(true)
-    heightPopoverContent    = notificationsContainer.find('.popover-content').prop('scrollHeight')
+    heightPopoverContent    = 0
-    heightPopoverContentNew = heightPopoverContent
+    @item.each -> heightPopoverContent += @clientHeight
+
     if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
-      heightPopoverContentNew = heightApp - heightPopoverHeader - heightPopoverSpacer
+      heightPopoverContent = heightApp - heightPopoverHeader - heightPopoverSpacer
-      notificationsContainer.addClass('is-overflowing')
+      @container.addClass('is-overflowing')
     else
-      notificationsContainer.removeClass('is-overflowing')
+      @container.removeClass('is-overflowing')
 
-    notificationsContainer.find('.popover-content').css('height', "#{heightPopoverContentNew}px")
+    @content.css('height', heightPopoverContent)
-
-  onShow: =>
-    @updateContent()
-    @updateHeight()
-
-    # mark all notifications as read
-    notificationsContainer = $('.js-notificationsContainer')
-    notificationsContainer.find('.js-markAllAsRead').on('click', (e) =>
-      e.preventDefault()
-      @markAllAsRead()
-      @hidePopover()
-    )
-
-    notificationsContainer.on 'click', @stopPropagation
-    $(window).on 'click.notifications', @hidePopover
-    $(window).on 'keydown.notifications', @listNavigate
-
-  onHide: ->
-    $(window).off 'click.notifications'
-    $(window).off 'keydown.notifications'
-
-  hidePopover: =>
-    @toggle.popover('hide')
 
   fetch: =>
     load = (items) =>
       @fetchedData = true
       App.OnlineNotification.refresh(items, { clear: true })
-      @updateContent()
+      @show()
     App.OnlineNotification.fetchFull(load)
 
-  updateContent: =>
+  toggle: =>
+    if @shown
+      @hide()
+    else
+      @show()
+
+  show: =>
+    @shown = true
     if !@Session.get()
-      $('.js-notificationsContainer .popover-content').html('')
+      @content.html('')
       return
 
     items = App.OnlineNotification.search(sortBy: 'created_at', order: 'DESC')
-    counter = 0
+    @count = 0
     for item in items
       if !item.seen
-        counter = counter + 1
+        @count++
-    @counterUpdate(counter)
 
-    # update title
+    @counterUpdate(@count)
-    $('.js-notificationsContainer .popover-title').html(
-      App.i18n.translateInline('Notifications') + " <span class='popover-notificationsCounter'>#{counter}</span>"
-    )
-
-    # show mark all as read if needed
-    if counter is 0
-      $('.js-notificationsContainer .js-markAllAsRead').addClass('hidden')
-    else
-      $('.js-notificationsContainer .js-markAllAsRead').removeClass('hidden')
 
     # update content
     items = @prepareForObjectList(items)
-    $('.js-notificationsContainer .popover-content').html(
-      $( App.view('widget/online_notification_content')(items: items) )
-    )
-
-    notificationsContainer  = $('.js-notificationsContainer .popover-content')
 
     # generate desktop notifications
     for item in items
@@ -206,54 +192,24 @@ class App.OnlineNotificationWidget extends App.Controller
           )
           App.OnlineNotification.play()
 
-    # execute controller again of already open (because hash hasn't changed, we need to do it manually)
+    @html App.view('widget/online_notification')
-    notificationsContainer.find('.js-locationVerify').on('click', (e) =>
+      items: items
-      @locationVerify(e)
+      count: @count
-      @hidePopover()
-    )
 
-    # close notification list on click
+    @el.show()
-    notificationsContainer.find('.activity-entry').on('click', (e) =>
-      @hidePopover()
-    )
 
-    # remove
+  hide: =>
-    notificationsContainer.find('.js-remove').on('click', (e) =>
+    @shown = false
-      e.preventDefault()
+    @el.hide()
-      e.stopPropagation()
-      row = $(e.target).closest('.activity-entry')
-      id = row.data('id')
-      App.OnlineNotification.destroy(id)
-      @updateHeight()
-    )
 
-  createContainer: =>
+  onItemClick: (event) ->
-    @removeContainer()
+    @locationVerify(event)
-
+    @hide()
-    # 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')
 
+  removeItem: (event) ->
+    event.preventDefault()
+    event.stopPropagation()
+    row = $(e.target).closest('.js-item')
+    id = row.data('id')
+    App.OnlineNotification.destroy(id)
+    @updateHeight()

app/assets/javascripts/app/views/navigation.jst.eco

@@ -8,7 +8,7 @@
   </div>
   <div class="logo js-toggleNotifications">
     <%- @Icon('logo') %>
-    <div class="activity-counter js-counter"></div>
+    <div class="activity-counter js-notificationsCounter"></div>
   </div>
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>

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

@@ -1,8 +1,37 @@
-<div class="popover popover--notifications js-notificationsContainer" role="tooltip">
+<div class="arrow js-arrow"></div>
-  <div class="arrow"></div>
+<div class="popover-notificationsHeader js-header">
-  <div class="popover-notificationsHeader">
+  <div class="popover-title"><%- @T('Notifications') %><span class='popover-notificationsCounter js-notificationsCounter'><%- @count %></span></div>
-    <div class="popover-title"></div>
+  <a class="btn btn--text btn--subtle js-mark<%- ' hidden' if !@count %>"><%- @T( 'Mark all as read' ) %></a>
-    <a class="btn btn--text btn--subtle js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
+</div>
-  </div>
+<div class="popover-content js-content">
-  <div class="popover-content"></div>
+  <% if @items.length: %>
+    <% for item in @items: %>
+    <div class="js-item activity-entry activity-entry--removeable<% if item.seen: %> is-inactive<% end %>" data-id="<%- item.id %>">
+      <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" <% if item.created_by_id isnt 1: %>href="<%- item.created_by.uiUrl() %>"<% end %>>
+        <%- item.created_by.avatar() %>
+      </a>
+      <div class="activity-body">
+        <a class="activity-message js-locationVerify" href="<%- item.link %>">
+          <span class="activity-text">
+            <% if item.objectNative && item.objectNative.activityMessage: %>
+              <%- item.objectNative.activityMessage(item) %>
+            <% else: %>
+              Need objectNative in item <%= item.object %>.find(<%= item.o_id %>)
+            <% end %>
+          </span>
+          <%- @humanTime(item.created_at, false, 'activity-time') %>
+        </a>
+        <div class="activity-remove js-remove">
+          <div class="activity-remove-icon-holder">
+            <%- @Icon('diagonal-cross') %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <% end %>
+  <% else: %>
+    <div class="activity-placeholder">
+      <%- @T("No unread Notifications for you. :) ") %>
+    </div>
+  <% end %>
 </div>

app/assets/stylesheets/zammad.scss

@@ -3654,6 +3654,8 @@ footer {
   }
 
   .popover--notifications {
+    left: $navigationWidth;
+    margin: 8px 2px;
     min-height: 91px;
     width: auto;
     max-width: 400px;
@@ -3667,6 +3669,7 @@ footer {
 
     .arrow {
       top: 23px !important;
+      left: -11px;
     }
 
     .popover-content {