Implemented "see more" feature.

app/assets/javascripts/app/controllers/layout_ref.js.coffee

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

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -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=public]':   'public_internal'
-    'click [data-type=internal]':   'public_internal'
+    'click [data-type=internal]': 'public_internal'
-    'click .show_toogle':           'show_toogle'
+    'click .show_toogle':         'show_toogle'
-    'click [data-type=reply]':      'reply'
+    'click [data-type=reply]':    'reply'
-    'click [data-type=replyAll]':   'replyAll'
+    'click [data-type=replyAll]': 'replyAll'
-    'click .textBubble':           'toggle_meta_with_delay'
+    'click .textBubble':          'toggle_meta_with_delay'
-    'click .textBubble a':         'stopPropagation'
+    '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

app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco

@@ -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!
+            <div class="textBubble">
-
+              <div class="bubble-arrow"></div>
-Thank you for installing Zammad.
+              <div class="textBubble-content">
-
+Welcome!
-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
+Thank you for installing Zammad.<br/>
-use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a>
+<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/>
-Regards,
+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/>
-<a href="#" class="show_toogle">See more</a><div class="hide preview">
+use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a><br/>
-The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project</div></div>
+<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">
-              <div class="textBubble-content" style="height: 300px" data-height="539">Lieber HP,<br>
+              <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">

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

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