Implemented "see more" feature.
This commit is contained in:
Martin Edenhofer
parent
c92e4c0f9a
commit
4d1f55ee6b
4 changed files with 80 additions and 22 deletions
|
|
@ -138,6 +138,18 @@ class CommunicationOverview extends App.ControllerContent
|
|||
render: ->
|
||||
@html App.view('layout_ref/communication_overview')()
|
||||
|
||||
# set see more options
|
||||
previewHeight = 240
|
||||
@$('.textBubble-content').each( (index) ->
|
||||
bubble = $( @ )
|
||||
heigth = bubble.height()
|
||||
if heigth > (previewHeight + 30)
|
||||
bubble.attr('data-height', heigth)
|
||||
bubble.css('height', "#{previewHeight}px")
|
||||
else
|
||||
bubble.parent().find('.textBubble-overflowContainer').addClass('hide')
|
||||
)
|
||||
|
||||
App.Config.set( 'layout_ref/communication_overview', CommunicationOverview, 'Routes' )
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -440,6 +440,18 @@ class App.TicketZoom extends App.Controller
|
|||
ui: @
|
||||
)
|
||||
|
||||
# set see more options
|
||||
previewHeight = 240
|
||||
@$('.textBubble-content').each( (index) ->
|
||||
bubble = $( @ )
|
||||
heigth = bubble.height()
|
||||
if heigth > (previewHeight + 30)
|
||||
bubble.attr('data-height', heigth)
|
||||
bubble.css('height', "#{previewHeight}px")
|
||||
else
|
||||
bubble.parent().find('.textBubble-overflowContainer').addClass('hide')
|
||||
)
|
||||
|
||||
# scroll to article if given
|
||||
if @article_id && document.getElementById( 'article-' + @article_id )
|
||||
offset = document.getElementById( 'article-' + @article_id ).offsetTop
|
||||
|
|
@ -1278,13 +1290,14 @@ class Edit extends App.Controller
|
|||
|
||||
class ArticleView extends App.Controller
|
||||
events:
|
||||
'click [data-type=public]': 'public_internal'
|
||||
'click [data-type=internal]': 'public_internal'
|
||||
'click .show_toogle': 'show_toogle'
|
||||
'click [data-type=reply]': 'reply'
|
||||
'click [data-type=replyAll]': 'replyAll'
|
||||
'click .textBubble': 'toggle_meta_with_delay'
|
||||
'click .textBubble a': 'stopPropagation'
|
||||
'click [data-type=public]': 'public_internal'
|
||||
'click [data-type=internal]': 'public_internal'
|
||||
'click .show_toogle': 'show_toogle'
|
||||
'click [data-type=reply]': 'reply'
|
||||
'click [data-type=replyAll]': 'replyAll'
|
||||
'click .textBubble': 'toggle_meta_with_delay'
|
||||
'click .textBubble a': 'stopPropagation'
|
||||
'click .js-unfold': 'unfold'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
|
|
@ -1434,6 +1447,25 @@ class ArticleView extends App.Controller
|
|||
metaTopClip.velocity({ height: metaTop.outerHeight() }, animSpeed, 'easeOutQuad')
|
||||
metaBottomClip.velocity({ height: metaBottom.outerHeight() }, animSpeed, 'easeOutQuad')
|
||||
|
||||
unfold: (e) ->
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
container = $(e.currentTarget).parents('.textBubble-content')
|
||||
overflowContainer = container.find('.textBubble-overflowContainer')
|
||||
|
||||
overflowContainer.velocity
|
||||
properties:
|
||||
opacity: 0
|
||||
options:
|
||||
duration: 300
|
||||
|
||||
container.velocity
|
||||
properties:
|
||||
height: container.attr('data-height')
|
||||
options:
|
||||
duration: 300
|
||||
complete: -> overflowContainer.addClass('hide');
|
||||
|
||||
isOrContains: (node, container) ->
|
||||
while node
|
||||
if node is container
|
||||
|
|
|
|||
|
|
@ -58,17 +58,24 @@
|
|||
<div class="article-content zIndex-1">
|
||||
<span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="textBubble"><div class="bubble-arrow"></div>Welcome!
|
||||
|
||||
Thank you for installing Zammad.
|
||||
|
||||
You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online
|
||||
documentation is available at <a href="http://guides.zammad.org/" title="http://guides.zammad.org/" target="_blank">http://guides.zammad.org/</a>. You can also
|
||||
use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a>
|
||||
|
||||
Regards,
|
||||
<a href="#" class="show_toogle">See more</a><div class="hide preview">
|
||||
The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project</div></div>
|
||||
<div class="textBubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<div class="textBubble-content">
|
||||
Welcome!
|
||||
<br/>
|
||||
Thank you for installing Zammad.<br/>
|
||||
<br/>
|
||||
You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online<br/>
|
||||
documentation is available at <a href="http://guides.zammad.org/" title="http://guides.zammad.org/" target="_blank">http://guides.zammad.org/</a>. You can also<br/>
|
||||
use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a><br/>
|
||||
<br/>
|
||||
Regards,<br/>
|
||||
The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project
|
||||
<div class="textBubble-overflowContainer">
|
||||
<div class="btn btn--text js-unfold"><%- @T('See more') %></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-meta-clip bottom">
|
||||
|
|
@ -196,8 +203,9 @@ Grüße, Peter</div>
|
|||
<div class="article-content zIndex-1">
|
||||
<span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="textBubble"><div class="bubble-arrow"></div>
|
||||
<div class="textBubble-content" style="height: 300px" data-height="539">Lieber HP,<br>
|
||||
<div class="textBubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<div class="textBubble-content">Lieber HP,<br>
|
||||
anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
|
||||
Wünsche dir einen guten Auftritt in Hamburg.<br>
|
||||
<br>
|
||||
|
|
@ -217,7 +225,7 @@ Bin verheiratet, hab Kind. Is doch offensichtlich, Junge!<br>
|
|||
Alles gute,<br>
|
||||
Oliver<br>
|
||||
<div class="textBubble-overflowContainer">
|
||||
<div class="btn btn--text js-unfold">See More</div>
|
||||
<div class="btn btn--text js-unfold"><%- @T('See more') %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
|
|
@ -231,7 +239,8 @@ Oliver<br>
|
|||
<div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
|
||||
<div class="attachment-size">17.1kb</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-meta-clip bottom">
|
||||
|
|
|
|||
|
|
@ -44,7 +44,12 @@
|
|||
<div class="internal-border">
|
||||
<div class="textBubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<div class="textBubble-content">
|
||||
<%- article.html %>
|
||||
<div class="textBubble-overflowContainer">
|
||||
<div class="btn btn--text js-unfold"><%- @T('See more') %></div>
|
||||
</div>
|
||||
</div>
|
||||
<% if !_.isEmpty( article.attachments ): %>
|
||||
<div class="attachments">
|
||||
<div class="paperclip icon"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue