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 class App.OnlineNotificationWidget extends App.Controller
elements:
'.js-toggleNavigation': 'toggle'
constructor: -> constructor: ->
super super
@ -38,10 +41,10 @@ class App.OnlineNotificationWidget extends App.Controller
@el.find('.activity-counter').remove() @el.find('.activity-counter').remove()
return return
if @el.find('.logo .activity-counter')[0] if @el.find('.js-toggleNavigation .activity-counter')[0]
@el.find('.logo .activity-counter').html(count) @el.find('.js-toggleNavigation .activity-counter').html(count)
else else
@el.find('.logo').append('<div class="activity-counter">' + count.toString() + '</div>') @toggle.append('<div class="activity-counter">' + count.toString() + '</div>')
markAllAsSeen: () => markAllAsSeen: () =>
@ajax( @ajax(
@ -56,9 +59,35 @@ class App.OnlineNotificationWidget extends App.Controller
fail: => 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: => stop: =>
@counterUpdate(0) @counterUpdate(0)
@el.find('.logo').popover('destroy') @toggle.popover('destroy')
start: => start: =>
@stop() @stop()
@ -73,28 +102,21 @@ class App.OnlineNotificationWidget extends App.Controller
items = @prepareForObjectList(items) items = @prepareForObjectList(items)
@el.find('.logo').popover( @toggle.popover
trigger: 'click' trigger: 'click'
container: 'body' container: 'body'
html: true html: true
placement: 'right' placement: 'right'
title: => viewport: { "selector": "#app", "padding": 10 }
# add header with counter and mark as read button template: App.view('widget/online_notification')()
$( App.view('widget/online_notification_header')(counter: counter) ) title: ->
App.i18n.translateInline( 'Notifications' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
content: => content: =>
# insert data # insert data
$( App.view('widget/online_notification')(items: items) ) $( App.view('widget/online_notification_content')(items: items) )
).on('shown.bs.popover', => .on
'shown.bs.popover': @onShow
# show frontend times 'hide.bs.popover': @onHide
$('#markAllAsSeen').bind('click', (e) =>
e.preventDefault()
@markAllAsSeen()
);
@frontendTimeUpdate()
).on('hide.bs.popover', =>
$('#markAllAsSeen').unbind('click')
)
fetch: => fetch: =>
load = (items) => 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 ($) { +function ($) {
'use strict'; 'use strict';
@ -176,8 +185,8 @@
$tip $tip
.detach() .detach()
.css({ top: 0, left: 0, display: 'block' }) .css({ top: 0, left: 0 })
.addClass(placement) .addClass(placement + ' is-visible')
.data('bs.' + this.type, this) .data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
@ -249,6 +258,10 @@
} }
}, offset), 0) }, offset), 0)
var maxHeight = $('#app').height() - 18
if(height > maxHeight)
$tip.height(maxHeight)
$tip.addClass('in') $tip.addClass('in')
// check to see if placing tip in new offset caused the tip to resize itself // 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 class="white close icon"></div>
</div> </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> <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
</form> </form>

View file

@ -1,22 +1,8 @@
<% if @items.length: %> <div class="popover popover--notifications" role="tooltip">
<a href="#" id="markAllAsSeen"><%- @T( 'Mark all as seen.' ) %></a> <div class="arrow"></div>
<% for item in @items: %> <div class="popover-notificationsHeader">
<div class="activity-entry horizontal"> <span class="popover-title"></span>
<a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>"> <a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
<%- item.created_by.avatar() %> </div>
</a> <div class="popover-content"></div>
<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> </div>
<% end %>
<% else: %>
<h3 class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%- @T("No unread Notifications for you. :) ") %>
</h3>
<% end %>

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, label,
.checkbox.form-group label { .checkbox.form-group label,
.label {
text-transform: uppercase; text-transform: uppercase;
color: hsl(0,0%,60%); color: hsl(0,0%,60%);
display: block; display: block;
@ -575,6 +576,8 @@ label,
font-weight: normal; font-weight: normal;
letter-spacing: 0.1em; letter-spacing: 0.1em;
margin-bottom: 4px; margin-bottom: 4px;
text-align: left;
padding: 0;
} }
fieldset { fieldset {
@ -2198,12 +2201,12 @@ footer {
} }
.search { .search {
padding: 14px 15px 10px 10px; padding: 14px 2px 10px 10px;
border-bottom: 1px solid rgba(240, 250, 255, .05); border-bottom: 1px solid rgba(240, 250, 255, .05);
} }
.search-holder { .search-holder {
margin-right: 15px; margin-right: 2px;
position: relative; position: relative;
transition: 240ms; transition: 240ms;
} }
@ -2245,12 +2248,13 @@ footer {
} }
.search .logo { .search .logo {
width: 41px; width: 67px;
height: 36px; height: 36px;
background: image_url("/assets/images/logo.svg"); background: image_url("/assets/images/logo.svg") no-repeat center;
transition: 240ms; transition: 240ms;
position: relative; position: relative;
@extend .u-clickable; @extend .u-clickable;
@extend .zIndex-5;
} }
.logo .activity-counter { .logo .activity-counter {
@ -2623,18 +2627,18 @@ footer {
border: none; border: none;
z-index: 1110; z-index: 1110;
box-shadow: 0 1px 14px rgba(0,8,14,.25); box-shadow: 0 1px 14px rgba(0,8,14,.25);
// max-height: calc(100vh - 20px);
} }
.popover-title { .popover-title {
border: none; border: none;
background: none; background: none;
padding: 20px 17px 4px; padding: 21px 17px 4px;
} }
.popover-content { .popover-content {
padding: 0 17px 10px; padding: 0 17px 10px;
max-height: 600px; overflow-y: auto;
overflow-y: scroll;
} }
.popover.right { margin-left: 4px; } .popover.right { margin-left: 4px; }
@ -2693,22 +2697,41 @@ footer {
margin-bottom: 8px; margin-bottom: 8px;
} }
.popover-notificationsTitle { .popover--notifications {
@extend h1; @extend .zIndex-5;
&.is-visible {
@extend .vertical;
}
}
.popover-notificationsHeader {
@extend .horizontal; @extend .horizontal;
@extend .justified; @extend .end;
@extend .popover-title;
padding-bottom: 29px;
.popover-title {
@extend h1;
padding: 0;
line-height: 1;
}
} }
.popover-notificationsCounter { .popover-notificationsCounter {
color: #e25253; color: #e25253;
padding-left: 10px; padding-left: 3px;
} }
.popover-notificationsMarkRead { .popover-notificationsMarkRead {
@extend .btn; @extend .btn;
@extend .btn--subtle; @extend .btn--subtle;
@extend .align-right; @extend .align-right;
margin-top: -8px; padding: 5px 0 0;
&:hover {
padding: 5px 0 0;
}
} }
.stat-widgets { .stat-widgets {