style notification header

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

@@ -77,13 +77,13 @@ class App.OnlineNotificationWidget extends App.Controller
       trigger:    'click'
       container:  'body'
       html:       true
-      delay:      { show: 100, hide: 0 }
       placement:  'right'
-      title: ->
-        App.i18n.translateInline( 'Notifications' ) + " <span>#{counter}</span>"
+      title: =>
+        # add header with counter and mark as read button
+        $( App.view('widget/online_notification_header')(counter: counter) )
       content: =>
         # insert data
-       $( App.view('widget/online_notification')(items: items))
+        $( App.view('widget/online_notification')(items: items) )
     ).on('shown.bs.popover', =>
 
       # show frontend times

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

@@ -5,7 +5,7 @@
       <div class="white close icon"></div>
     </div>
   </div>
-  <div class="logo" title="<%- @C( 'product_name' ) %>"></div>
+  <div class="logo"></div>
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 

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

@@ -0,0 +1,5 @@
+<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

@@ -2693,6 +2693,24 @@ footer {
     margin-bottom: 8px;
   }
 
+  .popover-notificationsTitle {
+    @extend h1;
+    @extend .horizontal;
+    @extend .justified;
+  }
+
+  .popover-notificationsCounter {
+    color: #e25253;
+    padding-left: 10px;
+  }
+
+  .popover-notificationsMarkRead {
+    @extend .btn;
+    @extend .btn--subtle;
+    @extend .align-right;
+    margin-top: -8px;
+  }
+
 .stat-widgets {
   margin: 0 -7px 20px;
 }