Add collapsing behaviour to long entries.

This commit is contained in:
Paulo Reis 2017-01-13 15:30:31 +00:00
parent b6ea338ff8
commit 5eece9f5d9
3 changed files with 33 additions and 4 deletions

View file

@ -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 }}

View file

@ -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: "&"
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"

View file

@ -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;
}
}