restrict popover height
This commit is contained in:
Felix Niklas
parent
6d6631ae2f
commit
cd7b5dd111
6 changed files with 122 additions and 57 deletions
|
|
@ -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('<div class="activity-counter">' + count.toString() + '</div>')
|
||||
@toggle.append('<div class="activity-counter">' + count.toString() + '</div>')
|
||||
|
||||
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' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
|
||||
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) =>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="white close icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo"></div>
|
||||
<div class="logo js-toggleNavigation"></div>
|
||||
<ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,8 @@
|
|||
<% if @items.length: %>
|
||||
<a href="#" id="markAllAsSeen"><%- @T( 'Mark all as seen.' ) %></a>
|
||||
<% for item in @items: %>
|
||||
<div class="activity-entry horizontal">
|
||||
<a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
|
||||
<%- item.created_by.avatar() %>
|
||||
</a>
|
||||
<a href="<%- item.link %>" class="activity-body flex horizontal">
|
||||
<span class="activity-message flex">
|
||||
<span class="activity-text <% if item.seen: %>inactive<% end %>">
|
||||
<%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
|
||||
</span>
|
||||
<span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="popover popover--notifications" role="tooltip">
|
||||
<div class="arrow"></div>
|
||||
<div class="popover-notificationsHeader">
|
||||
<span class="popover-title"></span>
|
||||
<a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
|
||||
</div>
|
||||
<div class="popover-content"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else: %>
|
||||
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
|
||||
<%- @T("No unread Notifications for you. :) ") %>
|
||||
</h3>
|
||||
<% end %>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<% if @items.length: %>
|
||||
<% for item in @items: %>
|
||||
<div class="activity-entry horizontal">
|
||||
<a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
|
||||
<%- item.created_by.avatar() %>
|
||||
</a>
|
||||
<a href="<%- item.link %>" class="activity-body flex horizontal">
|
||||
<span class="activity-message flex">
|
||||
<span class="activity-text <% if item.seen: %>inactive<% end %>">
|
||||
<%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
|
||||
</span>
|
||||
<span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else: %>
|
||||
<div class="label u-textTruncate" title="<%- @Ti( 'Name') %>">
|
||||
<%- @T("No unread Notifications for you. :) ") %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue