fix notifications height bug and remove popover dependencies
This commit is contained in:
Felix Niklas
parent
f2a54bdddc
commit
2f2e7a6fbd
5 changed files with 130 additions and 136 deletions
|
|
@ -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' )
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div class="popover-content"></div>
|
||||
<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 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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue