From 6d6631ae2f2bfa4e8b7fec4f939cf340a58740b2 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 19 Jan 2015 13:21:43 +0100
Subject: [PATCH] style notification header

---
 .../widget/online_notification.js.coffee       |  8 ++++----
 .../javascripts/app/views/navigation.jst.eco   |  2 +-
 .../widget/online_notification_header.jst.eco  |  5 +++++
 app/assets/stylesheets/zammad.css.scss         | 18 ++++++++++++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/widget/online_notification_header.jst.eco

diff --git a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
index a998599f5..4901bd594 100644
--- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
+++ b/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
diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco
index 0b8297f16..b92c6be9e 100644
--- a/app/assets/javascripts/app/views/navigation.jst.eco
+++ b/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>
 
diff --git a/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco b/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco
new file mode 100644
index 000000000..6a0f33942
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 6bf9c33ea..e0f0af029 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/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;
 }