From ef0d569d33d418f43bcc3d57b74f15729f2dff12 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 1 Jun 2015 17:39:36 +0200
Subject: [PATCH] fix activity counter

- counter now has a .js-counter class
- counter doesn't get removed from the dom, the counter gets hidden via css when its content is empty
- the logo is in a .logo div again
---
 .../widget/online_notification.js.coffee      | 13 +++----
 .../javascripts/app/views/navigation.jst.eco  |  5 ++-
 app/assets/stylesheets/zammad.css.scss        | 35 ++++++++++++-------
 3 files changed, 31 insertions(+), 22 deletions(-)

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 2dd7e937e..1f54ca68b 100644
--- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
@@ -15,10 +15,10 @@ class App.OnlineNotificationWidget extends App.Controller
     # rebuild widget on auth
     @bind 'auth', (user) =>
       if !user
-        @el.find('activity-counter').html('')
+        @el.find('.js-counter').text('')
       else
         if !@access()
-          @el.find('activity-counter').html('')
+          @el.find('.js-counter').text('')
           return
         @createContainer()
 
@@ -38,13 +38,10 @@ class App.OnlineNotificationWidget extends App.Controller
 
   counterUpdate: (count) =>
     if !count
-      @el.find('.activity-counter').remove()
+      @el.find('.js-counter').text('')
       return
-
-    if @el.find('.js-toggleNavigation .activity-counter')[0]
-      @el.find('.js-toggleNavigation .activity-counter').html(count)
-    else
-      @toggle.append('<div class="activity-counter">' + count.toString() + '</div>')
+    
+    @el.find('.js-counter').text(count)
 
   markAllAsRead: =>
     @counterUpdate(0)
diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco
index 96f6749c0..113c10e9e 100644
--- a/app/assets/javascripts/app/views/navigation.jst.eco
+++ b/app/assets/javascripts/app/views/navigation.jst.eco
@@ -6,7 +6,10 @@
       <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
     </div>
   </div>
-  <svg class="icon-logo js-toggleNavigation"><use xlink:href="#icon-logo" /></svg>
+  <div class="logo js-toggleNavigation">
+    <svg class="icon-logo"><use xlink:href="#icon-logo" /></svg>
+    <div class="activity-counter js-counter"></div>
+  </div>
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
 </form>
 
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index d866348bf..2fa929950 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -1765,7 +1765,7 @@ footer {
 }
 
 .search {
-  padding: 9px 2px 10px 10px;
+  padding: 8px 5px 4px 10px;
   border-bottom: 1px solid rgba(240, 250, 255, .05);
   flex-shrink: 0;
   display: flex;
@@ -1827,33 +1827,42 @@ footer {
     margin-right: -46px;
   }
 
-  .search.focused .icon-logo {
+  .search.focused .logo {
     opacity: 0;
     z-index: -1;
   }
 
-  .search .icon-logo {
-    margin: 0 10px;
-    transition: 240ms;
+  .logo {
     position: relative;
     @extend .u-clickable, .zIndex-5;
+    margin: 0 10px;
+    transition: 240ms;
+  }
+
+  .logo .icon-logo {
+    position: relative;
   }
 
     .logo .activity-counter {
-      height: 19px;
-      min-width: 19px;
+      height: 20px;
+      min-width: 21px;
       position: absolute;
-      right: 0;
-      bottom: 0;
-      padding: 0 3px;
-      font-size: 11px;
-      line-height: 17px;
+      right: -3px;
+      bottom: 6px;
+      padding: 0 4px;
+      font-size: 13px;
+      font-weight: 300;
+      line-height: 16px;
       text-align: center;
       color: white;
       text-shadow: 0 1px 1px rgba(0,0,0,.21);
       background: hsl(360,71%,60%);
       border-radius: 10px;
-      border: 2px solid hsl(232,10%,16%);
+      border: 2px solid hsl(233,10%,16%);
+    }
+
+    .logo .activity-counter:empty {
+      display: none;
     }
 
   .search .custom-dropdown-menu {