add article Read More prototype

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

@@ -104,6 +104,8 @@ App.Config.set( 'layout_ref/content', Content, 'Routes' )
 
 
 class CommunicationOverview extends App.ControllerContent
+  events:
+    'click .js-unfold': 'unfold'
 
   constructor: ->
     super
@@ -116,6 +118,22 @@ class CommunicationOverview extends App.ControllerContent
     scrollHolder = pageHeader.scrollParent()
     scrollBody = scrollHolder.get(0).scrollHeight - scrollHolder.height()
 
+  unfold: (e) ->
+    container = $(e.currentTarget).parents('.textBubble-content')
+
+    container.find('.textBubble-overflowContainer').velocity
+      properties:
+        opacity: 0
+      options:
+        duration: 300
+
+    container.velocity
+      properties:
+        height: container.attr('data-height')
+      options:
+        duration: 300
+        complete: -> container.parents('.textBubble').removeClass('is-overflowing')
+
   render: ->
     @html App.view('layout_ref/communication_overview')()
 
@@ -133,7 +151,7 @@ class LayoutRefCommunicationReply extends App.ControllerContent
     '.attachmentUpload':            'attachmentUpload'
     '.attachmentUpload-progressBar':'progressBar'
     '.js-percentage':               'progressText'
-    '.text-bubble':                 'textBubble'
+    '.textBubble':                 'textBubble'
 
   events:
     'focus .js-textarea':                     'open_textarea'

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

@@ -196,12 +196,30 @@ 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="text-bubble"><div class="bubble-arrow"></div>Lieber HP,<br>
+            <div class="textBubble is-overflowing"><div class="bubble-arrow"></div>
+              <div class="textBubble-content" style="height: 300px" data-height="539">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>
+Deine Frau bekommt ein Kind haben wir gehört.<br>
+Gratulation dazu! Wir schicken dir was liebes.<br>
+<br>
+Und wenn du noch mal Probleme mit der Stimme hast sag bescheid – ich kenn da ein Wundermittel.<br>
+<br>
+Das ist eine Pille von einem Druiden aus dem Bayerischen Wald. Die ölt einem so richtig die Stimmbänder.<br>
+<br>
+Verwende ich immer wenn ich meine Frau anschreien will. Die macht meinen Tenor richtig zum Löwen.<br>
+<br>
+Ach ja und dein Freund Tim. Richt dem mal aus dass er das doch bitte sein lassen soll mit den Anrufen.<br>
+<br>Ich weiß schon dass ich ein hübscher bin. Aber ich hab ihm schon tausend mal gesagt, dass ich seine Gefühle leider nicht erwiedern kann.<br>
+<br>
+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>
+              </div>
               <div class="attachments">
                 <div class="paperclip icon"></div>
                 <h3>2 <%- @T('Attached Files') %></h3>

app/assets/stylesheets/zammad.css.scss

@@ -3121,7 +3121,7 @@ footer {
     display: none;
   }
 
-  .text-bubble {
+  .textBubble {
     padding: 10px 20px;
     background: white;
     border-radius: 2px;
@@ -3130,32 +3130,67 @@ footer {
     position: relative;
     overflow-wrap: break-word;
     word-wrap: break-word;
-  }
     
     /* email css reset */
-    .text-bubble p {
+    p {
       margin: 0;
     }
 
-    .text-bubble blockquote,
+    blockquote,
-    .text-bubble pre
+    pre {
-     {
       margin: 0px;
       padding: 8px 12px 8px 12px;
     }
+  }
 
-
+  .ticket-article-item.state--folde-out .textBubble {
-    .ticket-article-item.state--folde-out .text-bubble {
     border-color: hsl(0,0%,90%);
   }
 
-  .customer.ticket-article-item .text-bubble {
+  .textBubble-content {
+    overflow: hidden;
+    position: relative;
+  }
+    
+  .is-overflowing .textBubble-overflowContainer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    
+    .btn {
+      padding: 7px 0;
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -30px;
+      height: 30px;
+      background: linear-gradient(transparent, white);
+    }
+  }
+
+  .customer .is-overflowing .textBubble-overflowContainer {
+    background: #e5f0f5;
+    &:before {
+      background: linear-gradient(transparent, #e5f0f5);
+    }
+  }
+
+  .customer.ticket-article-item .textBubble {
     background: #e5f0f5;
     border-color: hsl(199,38%,92%);
     box-shadow: none;
+    &.is-overflowing:after { 
+      background: linear-gradient(transparent, #e5f0f5 60px);
+    }
   }
 
-    .customer.ticket-article-item.state--folde-out .text-bubble {
+    .customer.ticket-article-item.state--folde-out .textBubble {
       border-color: hsl(199,44%,85%);
     }