From 749a5c073baf6481d22d733fde3bda33dcb65175 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 19 Jan 2015 13:21:28 +0100 Subject: [PATCH 1/5] document popover enhance.js --- .../javascripts/app/lib/bootstrap/popover-enhance.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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) From 6d6631ae2f2bfa4e8b7fec4f939cf340a58740b2 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 19 Jan 2015 13:21:43 +0100 Subject: [PATCH 2/5] 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' ) + " #{counter}" + 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 @@
- + 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 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; } From cd7b5dd111315dd5bb29a690b87f0dd2a5fc915e Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 20 Jan 2015 02:44:33 +0100 Subject: [PATCH 3/5] restrict popover height --- .../widget/online_notification.js.coffee | 62 +++++++++++++------ .../javascripts/app/lib/bootstrap/tooltip.js | 17 ++++- .../javascripts/app/views/navigation.jst.eco | 2 +- .../views/widget/online_notification.jst.eco | 28 +++------ .../online_notification_content.jst.eco | 21 +++++++ app/assets/stylesheets/zammad.css.scss | 49 +++++++++++---- 6 files changed, 122 insertions(+), 57 deletions(-) create mode 100644 app/assets/javascripts/app/views/widget/online_notification_content.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 4901bd594..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 placement: 'right' - title: => - # add header with counter and mark as read button - $( App.view('widget/online_notification_header')(counter: counter) ) + viewport: { "selector": "#app", "padding": 10 } + template: App.view('widget/online_notification')() + title: -> + 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/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 b92c6be9e..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/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index e0f0af029..668c1bc6c 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/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: scroll; + overflow-y: auto; } .popover.right { margin-left: 4px; } @@ -2693,22 +2697,41 @@ footer { margin-bottom: 8px; } - .popover-notificationsTitle { - @extend h1; + .popover--notifications { + @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 { From c8a98d37b08900338eb919f1d00ac4183ce032ef Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 20 Jan 2015 02:51:52 +0100 Subject: [PATCH 4/5] reduce disco --- app/assets/stylesheets/zammad.css.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 668c1bc6c..82c90157d 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -2090,8 +2090,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 { From 41662ff3690c1e5002dd39383ea1773738802cf8 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 20 Jan 2015 02:57:08 +0100 Subject: [PATCH 5/5] fix readMore gradient in FF --- app/assets/stylesheets/zammad.css.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 82c90157d..93281270b 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -3241,14 +3241,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%)); } }