restrict popover height

This commit is contained in:
Felix Niklas 2015-01-20 02:44:33 +01:00
parent 6d6631ae2f
commit cd7b5dd111
6 changed files with 122 additions and 57 deletions

View file

@ -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) =>

View file

@ -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

View file

@ -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>

View file

@ -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>
<% end %>
<% else: %>
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%- @T("No unread Notifications for you. :) ") %>
</h3>
<% end %>
<div class="popover-content"></div>
</div>

View file

@ -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 %>

View file

@ -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 {