From 79b6a898ba51816102bfcb041fce6afd895cdecc Mon Sep 17 00:00:00 2001 From: Jake Hartnell Date: Tue, 9 Jun 2015 17:39:17 -0700 Subject: [PATCH] Visually truncate long bodies and quotes - Introduce collapsing bodies and quotes which expand when you click more. - This is done through the new excerpt directive which looks to see if text is overflowing its container and appends 'More...' and 'Less ^' spans. - Watch annotation controller to see if an annotation is being edited so that excerpts can be applied to newly created and updated annotation. - Add event for threadToggleCollapse in the thread directive, and revaluate excerpts after thread expansion. --- h/static/scripts/app.coffee | 1 + h/static/scripts/directive/excerpt.coffee | 35 ++++++++++++++++++++++ h/static/scripts/directive/thread.coffee | 4 ++- h/static/styles/annotations.scss | 8 +++++ h/static/styles/common.scss | 1 + h/static/styles/excerpt.scss | 36 +++++++++++++++++++++++ h/templates/client/annotation.html | 4 +-- 7 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 h/static/scripts/directive/excerpt.coffee create mode 100644 h/static/styles/excerpt.scss diff --git a/h/static/scripts/app.coffee b/h/static/scripts/app.coffee index c5998f97b05..6c33c4d9856 100644 --- a/h/static/scripts/app.coffee +++ b/h/static/scripts/app.coffee @@ -92,6 +92,7 @@ module.exports = angular.module('h', [ .directive('annotation', require('./directive/annotation')) .directive('deepCount', require('./directive/deep-count')) +.directive('excerpt', require('./directive/excerpt')) .directive('formInput', require('./directive/form-input')) .directive('formValidate', require('./directive/form-validate')) .directive('groupList', require('./directive/group-list')) diff --git a/h/static/scripts/directive/excerpt.coffee b/h/static/scripts/directive/excerpt.coffee new file mode 100644 index 00000000000..caa30e3e1d8 --- /dev/null +++ b/h/static/scripts/directive/excerpt.coffee @@ -0,0 +1,35 @@ +###* +# @ngdoc directive +# @name excerpt +# @restrict C +# @description Checks to see if text is overflowing its container. +# If so, it prepends/appends expanders/collapsers. Note, to work +# the element needs a max height. +### +module.exports = [ '$timeout', ($timeout) -> + link: (scope, elem, attr, ctrl) -> + # Check for excerpts if an annotation has been created / edited. + scope.$watch (-> scope.vm.editing), (editing) -> + if editing + elem.find('.more').remove() + elem.find('.less').remove() + scope.excerpt() + + # Check for excerpts on threadCollapseToggle event. + scope.$on 'threadToggleCollapse', (value) -> + scope.excerpt() + + do scope.excerpt = -> + $timeout -> + if elem.find('.more').length == 0 + if elem[0].scrollHeight > elem[0].clientHeight + elem.prepend angular.element ' More...' + elem.append angular.element ' Less ^' + elem.find('.more').on 'click', -> + $(this).hide() + elem.addClass('show-full-excerpt') + elem.find('.less').on 'click', -> + elem.find('.more').show() + elem.removeClass('show-full-excerpt') + restrict: 'C' +] diff --git a/h/static/scripts/directive/thread.coffee b/h/static/scripts/directive/thread.coffee index 2cc4f705c94..fb4eb3f3356 100644 --- a/h/static/scripts/directive/thread.coffee +++ b/h/static/scripts/directive/thread.coffee @@ -13,7 +13,8 @@ uuid = require('node-uuid') # the collapsing behavior. ### ThreadController = [ - -> + '$scope', + ($scope) -> @container = null @collapsed = true @parent = null @@ -33,6 +34,7 @@ ThreadController = [ !!value else not @collapsed + $scope.$broadcast('threadToggleCollapse', value) @collapsed = newval ###* diff --git a/h/static/styles/annotations.scss b/h/static/styles/annotations.scss index d1cc4f83b9c..2d0cc0899bd 100644 --- a/h/static/styles/annotations.scss +++ b/h/static/styles/annotations.scss @@ -66,6 +66,9 @@ .annotation-quote { @include quote; + max-height: 2.9em; + overflow: hidden; + del { background:#ffe6e6; } @@ -74,6 +77,11 @@ } } +.annotation-body { + max-height: 13.5em; + overflow: hidden; +} + .annotation-citation-domain { color: $gray-light; font-size: .923em; diff --git a/h/static/styles/common.scss b/h/static/styles/common.scss index 37b34629288..ca2e22ed3c7 100644 --- a/h/static/styles/common.scss +++ b/h/static/styles/common.scss @@ -9,6 +9,7 @@ $headings-color: $text-color; @import 'mixins/responsive'; @import 'grid'; @import 'annotations'; +@import 'excerpt'; @import 'forms'; @import 'markdown-editor'; @import 'spinner'; diff --git a/h/static/styles/excerpt.scss b/h/static/styles/excerpt.scss new file mode 100644 index 00000000000..dc40bd75867 --- /dev/null +++ b/h/static/styles/excerpt.scss @@ -0,0 +1,36 @@ +.excerpt { + position: relative; + + &.show-full-excerpt { + max-height: 100% !important; + } + + .more, .less { + color: rgba(189, 28, 43, 0.5); + background: #fff; + font-style: italic; + font-family: Georgia,"Bitstream Charter","Times","Times New Roman",serif; + + &:hover { + color: #BD1C2B; + } + } + + .more { + position: absolute; + bottom: 0; + left: 87%; + + &:before { + opacity: .8; + content: " "; + margin-left: -3em; + padding-right: 40px; + background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); + background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); + background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); + background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); + background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); + } + } +} diff --git a/h/templates/client/annotation.html b/h/templates/client/annotation.html index 21876dc4bf1..9bb34d5edbf 100644 --- a/h/templates/client/annotation.html +++ b/h/templates/client/annotation.html @@ -60,7 +60,7 @@
-