Merge branch 'develop' of github.com:martini/zammad into develop

This commit is contained in:
Martin Edenhofer 2015-01-20 08:36:24 +01:00
commit 0740ffdb5d
8 changed files with 156 additions and 56 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
delay: { show: 100, hide: 0 }
placement: 'right' placement: 'right'
viewport: { "selector": "#app", "padding": 10 }
template: App.view('widget/online_notification')()
title: -> title: ->
App.i18n.translateInline( 'Notifications' ) + " <span>#{counter}</span>" 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

@ -1,6 +1,13 @@
/* from here http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/ */ /*
Makes the popover stay when hovered over it
from here http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/
*/
var originalLeave = $.fn.popover.Constructor.prototype.leave; var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){ $.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ? var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)

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" title="<%- @C( 'product_name' ) %>"></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

@ -0,0 +1,5 @@
<span class="popover-notificationsTitle">
<%- @T( 'Notifications' ) %>
<span class="popover-notificationsCounter"><%= @counter %></span>
<a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
</span>

View file

@ -571,7 +571,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;
@ -579,6 +580,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 {
@ -2091,8 +2094,13 @@ footer {
margin-top: -3px; margin-top: -3px;
&.loading { &.loading {
width: 14px; width: 10px;
height: 14px; height: 10px;
border-radius: 100%;
position: relative;
&:after {
@extend .priority.icon:after;
}
} }
&.error { &.error {
@ -2202,12 +2210,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;
} }
@ -2249,12 +2257,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 {
@ -2627,18 +2636,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; }
@ -2697,6 +2706,43 @@ footer {
margin-bottom: 8px; margin-bottom: 8px;
} }
.popover--notifications {
@extend .zIndex-5;
&.is-visible {
@extend .vertical;
}
}
.popover-notificationsHeader {
@extend .horizontal;
@extend .end;
@extend .popover-title;
padding-bottom: 29px;
.popover-title {
@extend h1;
padding: 0;
line-height: 1;
}
}
.popover-notificationsCounter {
color: #e25253;
padding-left: 3px;
}
.popover-notificationsMarkRead {
@extend .btn;
@extend .btn--subtle;
@extend .align-right;
padding: 5px 0 0;
&:hover {
padding: 5px 0 0;
}
}
.stat-widgets { .stat-widgets {
margin: 0 -7px 20px; margin: 0 -7px 20px;
} }
@ -3200,14 +3246,14 @@ footer {
right: 0; right: 0;
top: -30px; top: -30px;
height: 30px; height: 30px;
background: linear-gradient(transparent, white); background: linear-gradient(rgba(255,255,255,0), white);
} }
} }
.customer .textBubble-overflowContainer { .customer .textBubble-overflowContainer {
background: #e5f0f5; background: #e5f0f5;
&:before { &:before {
background: linear-gradient(transparent, #e5f0f5); background: linear-gradient(hsla(199,44%,93%,0), hsl(199,44%,93%));
} }
} }