mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Add collapsing behaviour to long entries.
This commit is contained in:
parent
b6ea338ff8
commit
5eece9f5d9
3 changed files with 33 additions and 4 deletions
|
@ -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 }}
|
||||
|
|
|
@ -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"
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue