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..d9d7da867 100644 --- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee +++ b/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] - @el.find('.logo .activity-counter').html(count) + if @el.find('.js-toggleNavigation .activity-counter')[0] + @el.find('.js-toggleNavigation .activity-counter').html(count) else - @el.find('.logo').append('
' + count.toString() + '
') + @toggle.append('
' + count.toString() + '
') 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 - delay: { show: 100, hide: 0 } placement: 'right' + viewport: { "selector": "#app", "padding": 10 } + template: App.view('widget/online_notification')() title: -> - App.i18n.translateInline( 'Notifications' ) + " #{counter}" + App.i18n.translateInline( 'Notifications' ) + " #{counter}" content: => # insert data - $( App.view('widget/online_notification')(items: items)) - ).on('shown.bs.popover', => - - # show frontend times - $('#markAllAsSeen').bind('click', (e) => - e.preventDefault() - @markAllAsSeen() - ); - @frontendTimeUpdate() - ).on('hide.bs.popover', => - $('#markAllAsSeen').unbind('click') - ) + $( App.view('widget/online_notification_content')(items: items) ) + .on + 'shown.bs.popover': @onShow + 'hide.bs.popover': @onHide fetch: => load = (items) => diff --git a/app/assets/javascripts/app/lib/bootstrap/popover-enhance.js b/app/assets/javascripts/app/lib/bootstrap/popover-enhance.js index aa751027c..961ddd428 100644 --- a/app/assets/javascripts/app/lib/bootstrap/popover-enhance.js +++ b/app/assets/javascripts/app/lib/bootstrap/popover-enhance.js @@ -1,6 +1,13 @@ -/* from here http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/ */ +/* + + Makes the popover stay when hovered over it + + from here http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/ + +*/ var originalLeave = $.fn.popover.Constructor.prototype.leave; + $.fn.popover.Constructor.prototype.leave = function(obj){ var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) diff --git a/app/assets/javascripts/app/lib/bootstrap/tooltip.js b/app/assets/javascripts/app/lib/bootstrap/tooltip.js index cda147d9c..6fd404906 100644 --- a/app/assets/javascripts/app/lib/bootstrap/tooltip.js +++ b/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' }) - .addClass(placement) + .css({ top: 0, left: 0 }) + .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 diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco index 0b8297f16..9750c56ab 100644 --- a/app/assets/javascripts/app/views/navigation.jst.eco +++ b/app/assets/javascripts/app/views/navigation.jst.eco @@ -5,7 +5,7 @@
- + diff --git a/app/assets/javascripts/app/views/widget/online_notification.jst.eco b/app/assets/javascripts/app/views/widget/online_notification.jst.eco index b9e59222c..e8fb00f31 100644 --- a/app/assets/javascripts/app/views/widget/online_notification.jst.eco +++ b/app/assets/javascripts/app/views/widget/online_notification.jst.eco @@ -1,22 +1,8 @@ -<% if @items.length: %> - <%- @T( 'Mark all as seen.' ) %> - <% for item in @items: %> -
- - <%- item.created_by.avatar() %> - - - - - <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %> - - ? - - + \ No newline at end of file diff --git a/app/assets/javascripts/app/views/widget/online_notification_content.jst.eco b/app/assets/javascripts/app/views/widget/online_notification_content.jst.eco new file mode 100644 index 000000000..d9d41fba8 --- /dev/null +++ b/app/assets/javascripts/app/views/widget/online_notification_content.jst.eco @@ -0,0 +1,21 @@ +<% if @items.length: %> + <% for item in @items: %> +
+ + <%- item.created_by.avatar() %> + + + + + <%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %> + + ? + + +
+ <% end %> +<% else: %> +
+ <%- @T("No unread Notifications for you. :) ") %> +
+<% end %> \ No newline at end of file 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 @@ + + <%- @T( 'Notifications' ) %> + <%= @counter %> + <%- @T( 'Mark all as read' ) %> + \ No newline at end of file diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 7e7d545a5..7beee665e 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -571,7 +571,8 @@ h5 { } label, -.checkbox.form-group label { +.checkbox.form-group label, +.label { text-transform: uppercase; color: hsl(0,0%,60%); display: block; @@ -579,6 +580,8 @@ label, font-weight: normal; letter-spacing: 0.1em; margin-bottom: 4px; + text-align: left; + padding: 0; } fieldset { @@ -2091,8 +2094,13 @@ footer { margin-top: -3px; &.loading { - width: 14px; - height: 14px; + width: 10px; + height: 10px; + border-radius: 100%; + position: relative; + &:after { + @extend .priority.icon:after; + } } &.error { @@ -2202,12 +2210,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; } @@ -2249,12 +2257,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 { @@ -2627,18 +2636,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: scroll; + overflow-y: auto; } .popover.right { margin-left: 4px; } @@ -2697,6 +2706,43 @@ footer { margin-bottom: 8px; } + .popover--notifications { + @extend .zIndex-5; + + &.is-visible { + @extend .vertical; + } + } + + .popover-notificationsHeader { + @extend .horizontal; + @extend .end; + @extend .popover-title; + padding-bottom: 29px; + + .popover-title { + @extend h1; + padding: 0; + line-height: 1; + } + } + + .popover-notificationsCounter { + color: #e25253; + padding-left: 3px; + } + + .popover-notificationsMarkRead { + @extend .btn; + @extend .btn--subtle; + @extend .align-right; + padding: 5px 0 0; + + &:hover { + padding: 5px 0 0; + } + } + .stat-widgets { margin: 0 -7px 20px; } @@ -3200,14 +3246,14 @@ footer { right: 0; top: -30px; height: 30px; - background: linear-gradient(transparent, white); + background: linear-gradient(rgba(255,255,255,0), white); } } .customer .textBubble-overflowContainer { background: #e5f0f5; &:before { - background: linear-gradient(transparent, #e5f0f5); + background: linear-gradient(hsla(199,44%,93%,0), hsl(199,44%,93%)); } }