From 5eece9f5d9ede5a58ba3e9737f06cf4a814975e1 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 13 Jan 2017 15:30:31 +0000 Subject: [PATCH] Add collapsing behaviour to long entries. --- .../web/app/views/project/editor/review-panel.jade | 14 ++++++++++++-- .../ide/review-panel/directives/changeEntry.coffee | 12 ++++++++++-- .../stylesheets/app/editor/review-panel.less | 11 +++++++++++ 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index a994a87de2..a664c02e23 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -137,9 +137,19 @@ script(type='text/ng-template', id='changeEntryTemplate') .rp-entry-details .rp-entry-description(ng-switch="entry.type") span(ng-switch-when="insert") Added  - ins.rp-content-highlight {{ entry.content }} + ins.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }} + a.rp-collapse-toggle( + href + ng-if="needsCollapsing" + ng-click="toggleCollapse();" + )  {{ isCollapsed ? '(more)' : '(less)' }} span(ng-switch-when="delete") Deleted  - del.rp-content-highlight {{ entry.content }} + del.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }} + a.rp-collapse-toggle( + href + ng-if="needsCollapsing" + ng-click="toggleCollapse();" + )  {{ isCollapsed ? '(more)' : '(less)' }} .rp-entry-metadata | {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} •  span.rp-entry-user(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }} diff --git a/services/web/public/coffee/ide/review-panel/directives/changeEntry.coffee b/services/web/public/coffee/ide/review-panel/directives/changeEntry.coffee index 0ff205a7ec..d21cdc10b2 100644 --- a/services/web/public/coffee/ide/review-panel/directives/changeEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/changeEntry.coffee @@ -1,7 +1,7 @@ define [ "base" ], (App) -> - App.directive "changeEntry", () -> + App.directive "changeEntry", ($timeout) -> restrict: "E" templateUrl: "changeEntryTemplate" scope: @@ -11,4 +11,12 @@ define [ onAccept: "&" onReject: "&" onIndicatorClick: "&" - \ No newline at end of file + link: (scope, element, attrs) -> + scope.contentLimit = 40 + scope.needsCollapsing = scope.entry.content.length > scope.contentLimit + scope.isCollapsed = true + + scope.toggleCollapse = () -> + scope.isCollapsed = !scope.isCollapsed + $timeout () -> + scope.$emit "review-panel:layout" \ No newline at end of file diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 652bf55e5b..79006446ab 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -785,3 +785,14 @@ padding: 5px; overflow-y: auto; } + +.rp-collapse-toggle { + color: @rp-type-blue; + font-weight: @rp-semibold-weight; + + &:hover, + &:focus { + color: darken(@rp-type-blue, 5%); + text-decoration: none; + } +} \ No newline at end of file