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

notifications popover: fix height issues - switch to css

Browse source
This commit is contained in:
Felix Niklas 2016-04-15 11:22:38 +02:00
parent 8015303032
commit fa68eaf5de
5 changed files with 28 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -124,8 +124,10 @@ class App.OnlineNotificationWidget extends App.Controller
if _.isEmpty(items)
@noNotifications.removeClass('hide')
@el.addClass 'is-empty'
else
@noNotifications.addClass('hide')
@el.removeClass 'is-empty'
markAllAsRead: (e) ->
e.preventDefault()
@ -140,28 +142,6 @@ class App.OnlineNotificationWidget extends App.Controller
@fetch()
)
updateHeight: ->
# set height of notification popover
heightApp = $('#app').height()
heightPopoverSpacer = 22
heightPopoverHeader = @header.outerHeight(true)
isOverflowing = false
heightPopoverContent = 0
@$('.js-item').each (i, el) =>
# accumulate height of items
heightPopoverContent += el.clientHeight
if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
containerHeight = heightApp - heightPopoverHeader - heightPopoverSpacer
@content.css 'height', containerHeight
isOverflowing = true
return false # exit .each loop
@el.toggleClass('is-overflowing', isOverflowing)
@content.css 'height', '' if !isOverflowing
fetch: =>
load = (data) =>
@fetchedData = true
@ -199,7 +179,6 @@ class App.OnlineNotificationWidget extends App.Controller
$(window).on 'keydown.notifications', @listNavigate
@shown = true
@el.show()
@updateHeight()
hide: =>
$(window).off 'keydown.notifications'
@ -225,7 +204,6 @@ class App.OnlineNotificationContentWidget extends App.CollectionController
onRenderEnd: ->
@container.counterGen()
@container.updateHeight()
# generate desktop notifications
items = App.OnlineNotification.search(sortBy: 'created_at', order: 'DESC')

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

@ -3707,17 +3707,20 @@ footer {
}
.popover--notifications {
padding: 0;
left: $navigationWidth;
margin: 8px 2px;
min-height: 91px;
max-height: calc(100% - 16px);
width: auto;
max-width: 400px;
min-width: 350px;
position: absolute;
display: flex;
flex-direction: column;
@extend .zIndex-5;
&.fade {
display: inline-block !important;
&.is-empty .popover-notificationsHeader {
box-shadow: none;
}
.arrow {
@ -3729,15 +3732,25 @@ footer {
flex: 1;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
overflow-y: auto;
margin-bottom: 10px;
}
&.is-overflowing .popover-notificationsHeader {
.popover-notificationsHeader {
box-shadow:
0 1px hsla(240,4%,95%,.5),
0 2px hsla(240,4%,95%,.2);
padding-bottom: 17px;
padding-bottom: 14px;
flex-shrink: 0;
.btn {
padding-top: 3px;
padding-bottom: 5px;
}
}
.activity-placeholder {
margin-bottom: 21px;
}
}

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

10
public/assets/images/icons/important.svg
View file

@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
<title>important</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="important" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M7.76574321,1 C7.20921701,1 6.78301298,1.44909274 6.81373808,2.00214458 L7.28303384,10.4494683 C7.31378213,11.0029375 7.78652545,11.4516129 8.33717084,11.4516129 L8.66282687,11.4516129 C9.21426237,11.4516129 9.68623877,11.0025202 9.71696387,10.4494683 L10.1862596,2.00214458 C10.2170079,1.44867541 9.78647906,1 9.23425452,1 L7.76574321,1 Z M8.49999914,15.4000001 C9.26963469,15.4000001 9.89354758,14.7760872 9.89354758,14.0064517 C9.89354758,13.2368161 9.26963469,12.6129032 8.49999914,12.6129032 C7.73036359,12.6129032 7.1064507,13.2368161 7.1064507,14.0064517 C7.1064507,14.7760872 7.73036359,15.4000001 8.49999914,15.4000001 Z" id="Path-321" sketch:type="MSShapeGroup"></path>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="important" fill="#50E3C2">
<path d="M7.99895659,1 C7.4472481,1 7.01455388,1.44909274 7.0324768,2.00214458 L7.30623174,10.4494683 C7.32416819,11.0029375 7.78652545,11.4516129 8.33717084,11.4516129 L8.66282687,11.4516129 C9.21426237,11.4516129 9.67584315,11.0025202 9.6937662,10.4494683 L9.96752305,2.00214458 C9.98545961,1.44867541 9.55733973,1 9.00104349,1 L7.99895659,1 Z M8.49999914,15.4000001 C9.26963469,15.4000001 9.89354758,14.7760872 9.89354758,14.0064517 C9.89354758,13.2368161 9.26963469,12.6129032 8.49999914,12.6129032 C7.73036359,12.6129032 7.1064507,13.2368161 7.1064507,14.0064517 C7.1064507,14.7760872 7.73036359,15.4000001 8.49999914,15.4000001 Z" id="Path-321"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB