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

Improved positioning of notification popover (way done in controller and css with unmodified BS popover.js).

Browse source
This commit is contained in:
Martin Edenhofer 2015-01-21 17:20:34 +01:00
parent f55b6c76c7
commit 0404fe31ae
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
View file

@ -64,17 +64,19 @@ class App.OnlineNotificationWidget extends App.Controller
onShow: => onShow: =>
@updateContent() @updateContent()
# set heigth of notification popover # set height of notification popover
heightApp = $('#navigation').height() notificationsContainer = $('.js-notificationsContainer')
heightPopoverHeader = $('.js-notificationsContainer .popover-notificationsHeader').height() heightApp = $('#app').height()
heightPopoverContent = $('.js-notificationsContainer .popover-content').get(0).scrollHeight heightPopoverSpacer = 36
height = heightPopoverHeader + heightPopoverContent heightPopoverHeader = notificationsContainer.find('.popover-notificationsHeader').outerHeight()
if height > heightApp heightPopoverContent = notificationsContainer.find('.popover-content').get(0).scrollHeight
height = heightApp - heightPopoverHeader - 56 heightPopoverContentNew = heightPopoverContent
$('.js-notificationsContainer .popover-content').css('height', "#{height}px") if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
heightPopoverContentNew = heightApp - heightPopoverHeader - heightPopoverSpacer
# set popover arrow notificationsContainer.addClass('is-overflowing')
$('.js-notificationsContainer .arrow').css('top', '20px') else
notificationsContainer.removeClass('is-overflowing')
notificationsContainer.find('.popover-content').css('height', "#{heightPopoverContentNew}px")
# close notification list on click # close notification list on click
$('.js-notificationsContainer').on('click', (e) => $('.js-notificationsContainer').on('click', (e) =>

11
app/assets/stylesheets/zammad.css.scss
View file

@ -2710,18 +2710,23 @@ footer {
} }
.popover--notifications { .popover--notifications {
min-height: 100px;
@extend .zIndex-5; @extend .zIndex-5;
&.is-visible { &.is-visible {
@extend .vertical; @extend .vertical;
} }
.arrow {
top: 23px !important;
}
.popover-content { .popover-content {
@extend .flex; @extend .flex;
} }
&.is-overflowing .popover-notificationsHeader { &.is-overflowing .popover-notificationsHeader {
box-shadow: box-shadow:
0 1px hsla(240,4%,95%,.5), 0 1px hsla(240,4%,95%,.5),
0 2px hsla(240,4%,95%,.2); 0 2px hsla(240,4%,95%,.2);
} }
@ -2732,7 +2737,7 @@ footer {
@extend .end; @extend .end;
padding-bottom: 22px; padding-bottom: 22px;
margin: 21px 17px 0; margin: 21px 17px 0;
.popover-title { .popover-title {
@extend h1; @extend h1;
padding: 0; padding: 0;