From c3076ac53df649f89c19be8fb66fff39df3bdf78 Mon Sep 17 00:00:00 2001 From: Thorsten Eckel 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 @@
<%- @article.html %>
-
<%- @T('See more') %>
+
<%- @T('See more') %>
<% 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; } }