restrict popover height

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

@@ -1,4 +1,7 @@
 class App.OnlineNotificationWidget extends App.Controller
+  elements:
+    '.js-toggleNavigation': 'toggle'
+
   constructor: ->
     super
 
@@ -38,10 +41,10 @@ class App.OnlineNotificationWidget extends App.Controller
       @el.find('.activity-counter').remove()
       return
 
-    if @el.find('.logo .activity-counter')[0]
+    if @el.find('.js-toggleNavigation .activity-counter')[0]
-      @el.find('.logo .activity-counter').html(count)
+      @el.find('.js-toggleNavigation .activity-counter').html(count)
     else
-      @el.find('.logo').append('<div class="activity-counter">' + count.toString() + '</div>')
+      @toggle.append('<div class="activity-counter">' + count.toString() + '</div>')
 
   markAllAsSeen: () =>
     @ajax(
@@ -56,9 +59,35 @@ class App.OnlineNotificationWidget extends App.Controller
       fail: =>
     )
 
+  removeClickCatcher: () =>
+    return if !@clickCatcher
+    @clickCatcher.remove()
+    @clickCatcher = null
+
+  onShow: =>
+    # show frontend times
+    $('#markAllAsSeen').bind('click', (e) =>
+      e.preventDefault()
+      @markAllAsSeen()
+    )
+    @frontendTimeUpdate()
+    
+    # add clickCatcher
+    @clickCatcher = new App.clickCatcher
+      holder: @el.offsetParent()
+      callback: @hidePopover
+      zIndexScale: 4
+
+  onHide: =>
+    $('#markAllAsSeen').unbind('click')
+    @removeClickCatcher()
+
+  hidePopover: =>
+    @toggle.popover('hide')
+
   stop: =>
     @counterUpdate(0)
-    @el.find('.logo').popover('destroy')
+    @toggle.popover('destroy')
 
   start: =>
     @stop()
@@ -73,28 +102,21 @@ class App.OnlineNotificationWidget extends App.Controller
 
     items = @prepareForObjectList(items)
 
-    @el.find('.logo').popover(
+    @toggle.popover
       trigger:    'click'
       container:  'body'
       html:       true
       placement:  'right'
-      title: =>
+      viewport: { "selector": "#app", "padding": 10 }
-        # add header with counter and mark as read button
+      template: App.view('widget/online_notification')()
-        $( App.view('widget/online_notification_header')(counter: counter) )
+      title: ->
+        App.i18n.translateInline( 'Notifications' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
       content: =>
         # insert data
-        $( App.view('widget/online_notification')(items: items) )
+        $( App.view('widget/online_notification_content')(items: items) )
-    ).on('shown.bs.popover', =>
+    .on
-
+      'shown.bs.popover': @onShow
-      # show frontend times
+      'hide.bs.popover': @onHide
-      $('#markAllAsSeen').bind('click', (e) =>
-        e.preventDefault()
-        @markAllAsSeen()
-      );
-      @frontendTimeUpdate()
-    ).on('hide.bs.popover', =>
-      $('#markAllAsSeen').unbind('click')
-    )
 
   fetch: =>
     load = (items) =>

app/assets/javascripts/app/lib/bootstrap/tooltip.js

@@ -8,6 +8,15 @@
  * ======================================================================== */
 
 
+/*
+
+  Modified 19-01-2014 by Felix
+  
+  add tooltip height desctriction to 100% viewport height - 18px padding
+  line 260-263
+
+*/
+
 +function ($) {
   'use strict';
 
@@ -176,8 +185,8 @@
 
       $tip
         .detach()
-        .css({ top: 0, left: 0, display: 'block' })
+        .css({ top: 0, left: 0 })
-        .addClass(placement)
+        .addClass(placement + ' is-visible')
         .data('bs.' + this.type, this)
 
       this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
@@ -249,6 +258,10 @@
       }
     }, offset), 0)
 
+    var maxHeight = $('#app').height() - 18
+    if(height > maxHeight)
+      $tip.height(maxHeight)
+
     $tip.addClass('in')
 
     // check to see if placing tip in new offset caused the tip to resize itself

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

@@ -5,7 +5,7 @@
       <div class="white close icon"></div>
     </div>
   </div>
-  <div class="logo"></div>
+  <div class="logo js-toggleNavigation"></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,22 +1,8 @@
-<% if @items.length: %>
+<div class="popover popover--notifications" role="tooltip">
-  <a href="#" id="markAllAsSeen"><%- @T( 'Mark all as seen.' ) %></a>
+  <div class="arrow"></div>
-  <% for item in @items: %>
+  <div class="popover-notificationsHeader">
-  <div class="activity-entry horizontal">
+    <span class="popover-title"></span>
-    <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
+    <a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
-      <%- item.created_by.avatar() %>
+  </div>
-    </a>
+  <div class="popover-content"></div>
-    <a href="<%- item.link %>" class="activity-body flex horizontal">
-      <span class="activity-message flex">
-        <span class="activity-text <% if item.seen: %>inactive<% end %>">
-          <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
-        </span>
-        <span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
-      </span>
-    </a>
 </div>
-  <% end %>
-<% else: %>
-  <h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
-    <%- @T("No unread Notifications for you. :) ") %>
-  </h3>
-<% end %>

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

@@ -0,0 +1,21 @@
+<% if @items.length: %>
+  <% for item in @items: %>
+  <div class="activity-entry horizontal">
+    <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
+      <%- item.created_by.avatar() %>
+    </a>
+    <a href="<%- item.link %>" class="activity-body flex horizontal">
+      <span class="activity-message flex">
+        <span class="activity-text <% if item.seen: %>inactive<% end %>">
+          <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
+        </span>
+        <span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
+      </span>
+    </a>
+  </div>
+  <% end %>
+<% else: %>
+  <div class="label u-textTruncate" title="<%- @Ti( 'Name') %>">
+    <%- @T("No unread Notifications for you. :) ") %>
+  </div>
+<% end %>

app/assets/stylesheets/zammad.css.scss

@@ -567,7 +567,8 @@ h5 {
 }
 
 label,
-.checkbox.form-group label {
+.checkbox.form-group label,
+.label {
   text-transform: uppercase;
   color: hsl(0,0%,60%);
   display: block;
@@ -575,6 +576,8 @@ label,
   font-weight: normal;
   letter-spacing: 0.1em;
   margin-bottom: 4px;
+  text-align: left;
+  padding: 0;
 }
 
 fieldset {
@@ -2198,12 +2201,12 @@ footer {
     } 
 
 .search {
-  padding: 14px 15px 10px 10px;
+  padding: 14px 2px 10px 10px;
   border-bottom: 1px solid rgba(240, 250, 255, .05);
 }
   
   .search-holder {
-    margin-right: 15px;
+    margin-right: 2px;
     position: relative;
     transition: 240ms;
   }
@@ -2245,12 +2248,13 @@ footer {
   }
 
   .search .logo {
-    width: 41px;
+    width: 67px;
     height: 36px;
-    background: image_url("/assets/images/logo.svg");
+    background: image_url("/assets/images/logo.svg") no-repeat center;
     transition: 240ms;
     position: relative;
     @extend .u-clickable;
+    @extend .zIndex-5;
   }
 
     .logo .activity-counter {
@@ -2623,18 +2627,18 @@ footer {
   border: none;
   z-index: 1110;
   box-shadow: 0 1px 14px rgba(0,8,14,.25);
+  // max-height: calc(100vh - 20px);
 }
 
   .popover-title {
     border: none;
     background: none;
-    padding: 20px 17px 4px;
+    padding: 21px 17px 4px;
   }
 
   .popover-content {
     padding: 0 17px 10px;
-    max-height: 600px;
+    overflow-y: auto;
-    overflow-y: scroll;
   }
 
   .popover.right { margin-left: 4px; }
@@ -2693,22 +2697,41 @@ footer {
     margin-bottom: 8px;
   }
 
-  .popover-notificationsTitle {
+  .popover--notifications {
-    @extend h1;
+    @extend .zIndex-5;
+    
+    &.is-visible {
+      @extend .vertical;
+    }
+  }
+
+  .popover-notificationsHeader {
     @extend .horizontal;
-    @extend .justified;
+    @extend .end;
+    @extend .popover-title;
+    padding-bottom: 29px;
+    
+    .popover-title {
+      @extend h1;
+      padding: 0;
+      line-height: 1;
+    }
   }
 
   .popover-notificationsCounter {
     color: #e25253;
-    padding-left: 10px;
+    padding-left: 3px;
   }
 
   .popover-notificationsMarkRead {
     @extend .btn;
     @extend .btn--subtle;
     @extend .align-right;
-    margin-top: -8px;
+    padding: 5px 0 0;
+    
+    &:hover {
+      padding: 5px 0 0;
+    }
   }
 
 .stat-widgets {