notifications popover: fix height issues - switch to css

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

@@ -124,8 +124,10 @@ class App.OnlineNotificationWidget extends App.Controller
 
     if _.isEmpty(items)
       @noNotifications.removeClass('hide')
+      @el.addClass 'is-empty'
     else
       @noNotifications.addClass('hide')
+      @el.removeClass 'is-empty'
 
   markAllAsRead: (e) ->
     e.preventDefault()
@@ -140,28 +142,6 @@ class App.OnlineNotificationWidget extends App.Controller
         @fetch()
     )
 
-  updateHeight: ->
-
-    # set height of notification popover
-    heightApp               = $('#app').height()
-    heightPopoverSpacer     = 22
-    heightPopoverHeader     = @header.outerHeight(true)
-    isOverflowing           = false
-    heightPopoverContent    = 0
-    @$('.js-item').each (i, el) =>
-
-      # accumulate height of items
-      heightPopoverContent += el.clientHeight
-
-      if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
-        containerHeight = heightApp - heightPopoverHeader - heightPopoverSpacer
-        @content.css 'height', containerHeight
-        isOverflowing = true
-        return false # exit .each loop
-
-    @el.toggleClass('is-overflowing', isOverflowing)
-    @content.css 'height', '' if !isOverflowing
-
   fetch: =>
     load = (data) =>
       @fetchedData = true
@@ -199,7 +179,6 @@ class App.OnlineNotificationWidget extends App.Controller
     $(window).on 'keydown.notifications', @listNavigate
     @shown = true
     @el.show()
-    @updateHeight()
 
   hide: =>
     $(window).off 'keydown.notifications'
@@ -225,7 +204,6 @@ class App.OnlineNotificationContentWidget extends App.CollectionController
 
   onRenderEnd: ->
     @container.counterGen()
-    @container.updateHeight()
 
     # generate desktop notifications
     items = App.OnlineNotification.search(sortBy: 'created_at', order: 'DESC')

app/assets/stylesheets/zammad.scss

@@ -3707,17 +3707,20 @@ footer {
   }
 
   .popover--notifications {
+    padding: 0;
     left: $navigationWidth;
     margin: 8px 2px;
-    min-height: 91px;
+    max-height: calc(100% - 16px);
     width: auto;
     max-width: 400px;
     min-width: 350px;
     position: absolute;
+    display: flex;
+    flex-direction: column;
     @extend .zIndex-5;
     
-    &.fade {
+    &.is-empty .popover-notificationsHeader {
-      display: inline-block !important;
+      box-shadow: none;
     }
 
     .arrow {
@@ -3729,15 +3732,25 @@ footer {
       flex: 1;
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 0;
       overflow-y: auto;
-      margin-bottom: 10px;
     }
 
-    &.is-overflowing .popover-notificationsHeader {
+    .popover-notificationsHeader {
       box-shadow:
         0 1px hsla(240,4%,95%,.5),
         0 2px hsla(240,4%,95%,.2);
-      padding-bottom: 17px;
+      padding-bottom: 14px;
+      flex-shrink: 0;
+      
+      .btn {
+        padding-top: 3px;
+        padding-bottom: 5px;
+      }
+    }
+
+    .activity-placeholder {
+      margin-bottom: 21px;
     }
   }
 

public/assets/images/icons/important.svg

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
     <title>important</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="important" sketch:type="MSArtboardGroup" fill="#50E3C2">
+        <g id="important" fill="#50E3C2">
-            <path d="M7.76574321,1 C7.20921701,1 6.78301298,1.44909274 6.81373808,2.00214458 L7.28303384,10.4494683 C7.31378213,11.0029375 7.78652545,11.4516129 8.33717084,11.4516129 L8.66282687,11.4516129 C9.21426237,11.4516129 9.68623877,11.0025202 9.71696387,10.4494683 L10.1862596,2.00214458 C10.2170079,1.44867541 9.78647906,1 9.23425452,1 L7.76574321,1 Z M8.49999914,15.4000001 C9.26963469,15.4000001 9.89354758,14.7760872 9.89354758,14.0064517 C9.89354758,13.2368161 9.26963469,12.6129032 8.49999914,12.6129032 C7.73036359,12.6129032 7.1064507,13.2368161 7.1064507,14.0064517 C7.1064507,14.7760872 7.73036359,15.4000001 8.49999914,15.4000001 Z" id="Path-321" sketch:type="MSShapeGroup"></path>
+            <path d="M7.99895659,1 C7.4472481,1 7.01455388,1.44909274 7.0324768,2.00214458 L7.30623174,10.4494683 C7.32416819,11.0029375 7.78652545,11.4516129 8.33717084,11.4516129 L8.66282687,11.4516129 C9.21426237,11.4516129 9.67584315,11.0025202 9.6937662,10.4494683 L9.96752305,2.00214458 C9.98545961,1.44867541 9.55733973,1 9.00104349,1 L7.99895659,1 Z M8.49999914,15.4000001 C9.26963469,15.4000001 9.89354758,14.7760872 9.89354758,14.0064517 C9.89354758,13.2368161 9.26963469,12.6129032 8.49999914,12.6129032 C7.73036359,12.6129032 7.1064507,13.2368161 7.1064507,14.0064517 C7.1064507,14.7760872 7.73036359,15.4000001 8.49999914,15.4000001 Z" id="Path-321"></path>
         </g>
     </g>
 </svg>