Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix notifications height bug and remove popover dependencies

Browse source
This commit is contained in:
Felix Niklas 2016-03-18 17:34:24 +01:00
parent f2a54bdddc
commit 2f2e7a6fbd
5 changed files with 130 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/app/controllers/navigation.coffee
View file

@ -1,6 +1,9 @@
class App.Navigation extends App.ControllerWidgetPermanent
className: 'navigation vertical'
events:
'click .js-toggleNotifications': 'toggleNotifications'
constructor: ->
super
@render()
@ -202,9 +205,8 @@ class App.Navigation extends App.ControllerWidgetPermanent
@emptyAndClose()
)
new App.OnlineNotificationWidget(
el: @el
)
@notificationWidget = new App.OnlineNotificationWidget()
$('#app').append @notificationWidget.el
listNavigate: (e) =>
if e.keyCode is 27 # close on esc
@ -468,4 +470,8 @@ class App.Navigation extends App.ControllerWidgetPermanent
@renderPersonal()
App.RecentView.fetchFull(load)
toggleNotifications: (event) ->
event.stopPropagation()
@notificationWidget.toggle()
App.Config.set( 'navigation', App.Navigation, 'Navigations' )

204
app/assets/javascripts/app/controllers/widget/online_notification.coffee
View file

@ -1,8 +1,22 @@
class App.OnlineNotificationWidget extends App.Controller
alreadyShown: {}
shown: false
className: 'popover popover--notifications right'
attributes:
role: 'tooltip'
events:
'click .js-mark': 'markAllAsRead'
'click .js-item': 'hide'
'click .js-remove': 'removeItem'
'click .js-locationVerify': 'onItemClick'
'keydown': 'listNavigate'
elements:
'.js-toggleNotifications': 'toggle'
'.js-notificationsContainer': 'container'
'.js-mark': 'mark'
'.js-item': 'item'
'.js-content': 'content'
constructor: ->
super
@ -29,27 +43,26 @@ class App.OnlineNotificationWidget extends App.Controller
# rebuild widget on auth
@bind 'auth', (user) =>
if !user
@el.find('.js-counter').text('')
@counterUpdate(0)
else
if !@access()
@el.find('.js-counter').text('')
@counterUpdate(0)
return
@createContainer()
if @access()
@createContainer()
@subscribeId = App.OnlineNotification.subscribe(@updateContent)
@subscribeId = App.OnlineNotification.subscribe(@show)
@bind('ui:rerender', =>
@updateContent()
@bind('ui:reshow', =>
@show()
'popover'
)
$(window).on 'click.notifications', @hide
release: ->
@removeContainer()
$(window).off 'click.notifications'
$(window).off 'keydown.notifications'
App.OnlineNotification.unsubscribe(@subscribeId)
super
access: ->
return false if !@Session.get()
@ -58,9 +71,8 @@ class App.OnlineNotificationWidget extends App.Controller
return false
listNavigate: (e) =>
if e.keyCode is 27 # close on esc
@hidePopover()
@hide()
return
else if e.keyCode is 38 # up
@nudge(e, -1)
@ -69,25 +81,24 @@ class App.OnlineNotificationWidget extends App.Controller
@nudge(e, 1)
return
else if e.keyCode is 13 # enter
$('.js-notificationsContainer .popover-content .activity-entry.is-hover .js-locationVerify').click()
@item.filter('.is-hover').find('.js-locationVerify').click()
nudge: (e, position) ->
# get current
navigation = $('.js-notificationsContainer .popover-content')
current = navigation.find('.activity-entry.is-hover')
if !current.get(0)
navigation.find('.activity-entry').first().addClass('is-hover')
current = @item.filter('.is-hover')
if !current.size()
@item.first().addClass('is-hover')
return
if position is 1
next = current.next('.activity-entry')
if next.get(0)
next = current.next('.js-item')
if next.size()
current.removeClass('is-hover')
next.addClass('is-hover')
else
prev = current.prev('.activity-entry')
if prev.get(0)
prev = current.prev('.is-item')
if prev.size()
current.removeClass('is-hover')
prev.addClass('is-hover')
@ -97,13 +108,19 @@ class App.OnlineNotificationWidget extends App.Controller
@scrollToIfNeeded(prev, true)
counterUpdate: (count) =>
count = '' if count is 0
$('.js-notificationsCounter').text(count)
@count = count
# show mark all as read if needed
if !count
@$('.js-counter').text('')
return
@mark.addClass('hidden')
else
@mark.removeClass('hidden')
@$('.js-counter').text(count)
markAllAsRead: =>
markAllAsRead: (event) ->
event.preventDefault()
@counterUpdate(0)
@ajax(
id: 'markAllAsRead'
@ -115,80 +132,49 @@ class App.OnlineNotificationWidget extends App.Controller
updateHeight: ->
# set height of notification popover
notificationsContainer = $('.js-notificationsContainer')
heightApp = $('#app').height()
heightPopoverSpacer = 22
heightPopoverHeader = notificationsContainer.find('.popover-notificationsHeader').outerHeight(true)
heightPopoverContent = notificationsContainer.find('.popover-content').prop('scrollHeight')
heightPopoverContentNew = heightPopoverContent
heightPopoverHeader = @header.outerHeight(true)
heightPopoverContent = 0
@item.each -> heightPopoverContent += @clientHeight
if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
heightPopoverContentNew = heightApp - heightPopoverHeader - heightPopoverSpacer
notificationsContainer.addClass('is-overflowing')
heightPopoverContent = heightApp - heightPopoverHeader - heightPopoverSpacer
@container.addClass('is-overflowing')
else
notificationsContainer.removeClass('is-overflowing')
@container.removeClass('is-overflowing')
notificationsContainer.find('.popover-content').css('height', "#{heightPopoverContentNew}px")
onShow: =>
@updateContent()
@updateHeight()
# mark all notifications as read
notificationsContainer = $('.js-notificationsContainer')
notificationsContainer.find('.js-markAllAsRead').on('click', (e) =>
e.preventDefault()
@markAllAsRead()
@hidePopover()
)
notificationsContainer.on 'click', @stopPropagation
$(window).on 'click.notifications', @hidePopover
$(window).on 'keydown.notifications', @listNavigate
onHide: ->
$(window).off 'click.notifications'
$(window).off 'keydown.notifications'
hidePopover: =>
@toggle.popover('hide')
@content.css('height', heightPopoverContent)
fetch: =>
load = (items) =>
@fetchedData = true
App.OnlineNotification.refresh(items, { clear: true })
@updateContent()
@show()
App.OnlineNotification.fetchFull(load)
updateContent: =>
toggle: =>
if @shown
@hide()
else
@show()
show: =>
@shown = true
if !@Session.get()
$('.js-notificationsContainer .popover-content').html('')
@content.html('')
return
items = App.OnlineNotification.search(sortBy: 'created_at', order: 'DESC')
counter = 0
@count = 0
for item in items
if !item.seen
counter = counter + 1
@counterUpdate(counter)
@count++
# update title
$('.js-notificationsContainer .popover-title').html(
App.i18n.translateInline('Notifications') + " <span class='popover-notificationsCounter'>#{counter}</span>"
)
# show mark all as read if needed
if counter is 0
$('.js-notificationsContainer .js-markAllAsRead').addClass('hidden')
else
$('.js-notificationsContainer .js-markAllAsRead').removeClass('hidden')
@counterUpdate(@count)
# update content
items = @prepareForObjectList(items)
$('.js-notificationsContainer .popover-content').html(
$( App.view('widget/online_notification_content')(items: items) )
)
notificationsContainer = $('.js-notificationsContainer .popover-content')
# generate desktop notifications
for item in items
@ -206,54 +192,24 @@ class App.OnlineNotificationWidget extends App.Controller
)
App.OnlineNotification.play()
# execute controller again of already open (because hash hasn't changed, we need to do it manually)
notificationsContainer.find('.js-locationVerify').on('click', (e) =>
@locationVerify(e)
@hidePopover()
)
@html App.view('widget/online_notification')
items: items
count: @count
# close notification list on click
notificationsContainer.find('.activity-entry').on('click', (e) =>
@hidePopover()
)
@el.show()
# remove
notificationsContainer.find('.js-remove').on('click', (e) =>
e.preventDefault()
e.stopPropagation()
row = $(e.target).closest('.activity-entry')
hide: =>
@shown = false
@el.hide()
onItemClick: (event) ->
@locationVerify(event)
@hide()
removeItem: (event) ->
event.preventDefault()
event.stopPropagation()
row = $(e.target).closest('.js-item')
id = row.data('id')
App.OnlineNotification.destroy(id)
@updateHeight()
)
createContainer: =>
@removeContainer()
# show popover
waitUntilOldPopoverIsRemoved = =>
@toggle.popover
trigger: 'click'
container: 'body'
html: true
placement: 'right'
viewport: { selector: '#app', padding: 10 }
template: App.view('widget/online_notification')()
title: ' '
content: ' '
.on
'shown.bs.popover': @onShow
'hide.bs.popover': @onHide
@updateContent()
@delay(
-> waitUntilOldPopoverIsRemoved()
600
'popover'
)
removeContainer: =>
@counterUpdate(0)
@toggle.popover('destroy')

2
app/assets/javascripts/app/views/navigation.jst.eco
View file

@ -8,7 +8,7 @@
</div>
<div class="logo js-toggleNotifications">
<%- @Icon('logo') %>
<div class="activity-counter js-counter"></div>
<div class="activity-counter js-notificationsCounter"></div>
</div>
<ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
</form>

41
app/assets/javascripts/app/views/widget/online_notification.jst.eco
View file

@ -1,8 +1,37 @@
<div class="popover popover--notifications js-notificationsContainer" role="tooltip">
<div class="arrow"></div>
<div class="popover-notificationsHeader">
<div class="popover-title"></div>
<a class="btn btn--text btn--subtle js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
<div class="arrow js-arrow"></div>
<div class="popover-notificationsHeader js-header">
<div class="popover-title"><%- @T('Notifications') %><span class='popover-notificationsCounter js-notificationsCounter'><%- @count %></span></div>
<a class="btn btn--text btn--subtle js-mark<%- ' hidden' if !@count %>"><%- @T( 'Mark all as read' ) %></a>
</div>
<div class="popover-content"></div>
<div class="popover-content js-content">
<% if @items.length: %>
<% for item in @items: %>
<div class="js-item activity-entry activity-entry--removeable<% if item.seen: %> is-inactive<% end %>" data-id="<%- item.id %>">
<a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" <% if item.created_by_id isnt 1: %>href="<%- item.created_by.uiUrl() %>"<% end %>>
<%- item.created_by.avatar() %>
</a>
<div class="activity-body">
<a class="activity-message js-locationVerify" href="<%- item.link %>">
<span class="activity-text">
<% if item.objectNative && item.objectNative.activityMessage: %>
<%- item.objectNative.activityMessage(item) %>
<% else: %>
Need objectNative in item <%= item.object %>.find(<%= item.o_id %>)
<% end %>
</span>
<%- @humanTime(item.created_at, false, 'activity-time') %>
</a>
<div class="activity-remove js-remove">
<div class="activity-remove-icon-holder">
<%- @Icon('diagonal-cross') %>
</div>
</div>
</div>
</div>
<% end %>
<% else: %>
<div class="activity-placeholder">
<%- @T("No unread Notifications for you. :) ") %>
</div>
<% end %>
</div>

3
app/assets/stylesheets/zammad.scss
View file

@ -3654,6 +3654,8 @@ footer {
}
.popover--notifications {
left: $navigationWidth;
margin: 8px 2px;
min-height: 91px;
width: auto;
max-width: 400px;
@ -3667,6 +3669,7 @@ footer {
.arrow {
top: 23px !important;
left: -11px;
}
.popover-content {