From c3076ac53df649f89c19be8fb66fff39df3bdf78 Mon Sep 17 00:00:00 2001
From: Thorsten Eckel <te@znuny.com>
Date: Mon, 30 Jan 2017 18:28:02 +0100
Subject: [PATCH] Fixed issue#570 - Improve feature "show more" with "show
 less" option - thanks to @dennybresch and @mrflix .

---
 .../ticket_zoom/article_view.coffee           | 56 ++++++++++---------
 .../views/ticket_zoom/article_view.jst.eco    |  2 +-
 app/assets/stylesheets/zammad.scss            |  7 +++
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee
index 7dff6740d..31163a60e 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee
@@ -50,9 +50,9 @@ class ArticleViewItem extends App.ObserverController
     '.textBubble-overflowContainer': 'textBubbleOverflowContainer'
 
   events:
-    'click .textBubble':   'toggleMetaWithDelay'
-    'click .textBubble a': 'stopPropagation'
-    'click .js-unfold':    'unfold'
+    'click .textBubble':    'toggleMetaWithDelay'
+    'click .textBubble a':  'stopPropagation'
+    'click .js-toggleFold': 'toggleFold'
 
   constructor: ->
     super
@@ -185,17 +185,16 @@ class ArticleViewItem extends App.ObserverController
     maxHeight               = 560
     minHeight               = 90
     bubbleContent           = @textBubbleContent
-    bubbleOvervlowContainer = @textBubbleOverflowContainer
+    bubbleOverflowContainer = @textBubbleOverflowContainer
 
     # expand if see more is already clicked
     if @seeMore
       bubbleContent.css('height', 'auto')
-      bubbleOvervlowContainer.addClass('hide')
       return
 
     # reset bubble heigth and "see more" opacity
     bubbleContent.css('height', '')
-    bubbleOvervlowContainer.css('opacity', '')
+    bubbleOverflowContainer.css('opacity', '')
 
     # remember offset of "see more"
     signatureMarker = bubbleContent.find('.js-signatureMarker')
@@ -209,8 +208,8 @@ class ArticleViewItem extends App.ObserverController
     if offsetTop && offsetTop.top is 0
       offsetTop = signatureMarker.next('div, p, br').position()
 
-    # remember bubble heigth
-    heigth = bubbleContent.height()
+    # remember bubble content heigth
+    bubbleContentHeigth = bubbleContent.height()
 
     # get marker heigth
     if offsetTop
@@ -218,20 +217,23 @@ class ArticleViewItem extends App.ObserverController
 
     # if signature marker exists and heigth is within maxHeight
     if markerHeight && markerHeight < maxHeight
-      newHeigth = offsetTop.top + 30
+      newHeigth = markerHeight + 30
       if newHeigth < minHeight
         newHeigth = minHeight
-      bubbleContent.attr('data-height', heigth)
+
+      bubbleContent.attr('data-height', bubbleContentHeigth + 30)
+      bubbleContent.attr('data-height-origin', newHeigth)
       bubbleContent.css('height', "#{newHeigth}px")
-      bubbleOvervlowContainer.removeClass('hide')
+      bubbleOverflowContainer.removeClass('hide')
 
     # if heigth is higher then maxHeight
-    else if heigth > maxHeight
-      bubbleContent.attr('data-height', heigth)
+    else if bubbleContentHeigth > maxHeight
+      bubbleContent.attr('data-height', bubbleContentHeigth + 30)
+      bubbleContent.attr('data-height-origin', maxHeight)
       bubbleContent.css('height', "#{maxHeight}px")
-      bubbleOvervlowContainer.removeClass('hide')
+      bubbleOverflowContainer.removeClass('hide')
     else
-      bubbleOvervlowContainer.addClass('hide')
+      bubbleOverflowContainer.addClass('hide')
 
   stopPropagation: (e) ->
     e.stopPropagation()
@@ -323,27 +325,29 @@ class ArticleViewItem extends App.ObserverController
       metaTopClip.velocity({ height: metaTop.outerHeight() }, animSpeed, 'easeOutQuad')
       metaBottomClip.velocity({ height: metaBottom.outerHeight() }, animSpeed, 'easeOutQuad')
 
-  unfold: (e) ->
+  toggleFold: (e) ->
     e.preventDefault()
     e.stopPropagation()
 
-    @seeMore = true
-
     bubbleContent           = @textBubbleContent
-    bubbleOvervlowContainer = @textBubbleOverflowContainer
+    bubbleOverflowContainer = @textBubbleOverflowContainer
 
-    bubbleOvervlowContainer.velocity
-      properties:
-        opacity: 0
-      options:
-        duration: 300
+    if @seeMoreOpen
+      label = App.i18n.translateContent('See more')
+      height = bubbleContent.attr('data-height-origin')
+      @seeMoreOpen = false
+    else
+      label = App.i18n.translateContent('See less')
+      height = bubbleContent.attr('data-height')
+      @seeMoreOpen = true
+
+    bubbleOverflowContainer.toggleClass('is-open', @seeMoreOpen).find('.js-toggleFold').text(label)
 
     bubbleContent.velocity
       properties:
-        height: bubbleContent.attr('data-height')
+        height: height
       options:
         duration: 300
-        complete: -> bubbleOvervlowContainer.addClass('hide')
 
   isOrContains: (node, container) ->
     while node
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index cc367e43f..0dbd6e594 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -42,7 +42,7 @@
         <div class="textBubble-content" id="article-content-<%= @article.id %>" data-id="<%= @article.id %>">
           <div class="richtext-content"><%- @article.html %></div>
           <div class="textBubble-overflowContainer hide">
-            <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
+            <div class="btn btn--text js-toggleFold"><%- @T('See more') %></div>
           </div>
         </div>
         <% if !_.isEmpty(@article.attachments): %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 3a8f61042..63b439146 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -4585,6 +4585,12 @@ footer {
     left: 0;
     right: 0;
     background: white;
+    
+    &.is-open {
+      &:before {
+        opacity: 0;
+      }
+    }
 
     .btn {
       padding-top: 17px;
@@ -4600,6 +4606,7 @@ footer {
       top: -30px;
       height: 30px;
       background: linear-gradient(rgba(255,255,255,0), white);
+      transition: opacity 300ms;
     }
   }