github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-09 14:29:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Make mini review panel entries scroll and stack like main panel

Browse source
This commit is contained in:
James Allen 2016-11-15 17:07:06 +00:00
parent 69692934a9
commit b443c5d7dc
4 changed files with 67 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
services/web/app/views/project/editor/editor.jade
View file

@ -51,7 +51,7 @@ div.full-size(
| Track Changes
input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
.review-panel-scroller
.rp-entry-list(review-panel-sorted)
.rp-entry-list(review-panel-sorted, review-panel-sorted-entry-class="ui.reviewPanelOpen ? 'rp-entry' : 'rp-entry-indicator'")
.rp-entry-wrapper(
ng-repeat="(entry_id, entry) in reviewPanel.entries"
)
@ -60,11 +60,11 @@ div.full-size(
)
div(ng-switch="entry.type")
.rp-entry-indicator(ng-switch-when="insert")
.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
i.fa.fa-pencil
.rp-entry-indicator(ng-switch-when="delete")
.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
i.rp-icon-delete
.rp-entry-indicator(ng-switch-when="comment")
.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
i.fa.fa-comment
.rp-entry-indicator(
ng-switch-when="add-comment"

2
services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee
View file

@ -53,7 +53,6 @@ define [
$scope.$watch "ui.reviewPanelOpen", (reviewPanelOpen) ->
return if !reviewPanelOpen?
if reviewPanelOpen
$scope.$broadcast "review-panel:layout"
scroller.on "scroll", scrollAce
$scope.onScroll = scrollPanel # Passed into the editor directive for it to call
else
@ -61,6 +60,7 @@ define [
$scope.onScroll = null
$timeout () ->
$scope.$broadcast "review-panel:toggle"
$scope.$broadcast "review-panel:layout"
$scope.$watch (() -> Object.keys($scope.reviewPanel.entries).length), (nEntries) ->
$scope.reviewPanel.hasEntries = nEntries > 0

59
services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee
View file

@ -5,7 +5,8 @@ define [
return {
link: (scope, element, attrs) ->
TOOLBAR_HEIGHT = 28
ENTRY_PADDING = 12
BOX_PADDING = 12
INDICATOR_PADDING = 4
previous_focused_entry_index = 0
@ -43,31 +44,55 @@ define [
focused_entry.$indicator_el.css(top: focused_entry_top)
focused_entry.$callout_el.css(top: focused_entry_top + line_height, height: 0)
previousBottom = focused_entry_top + focused_entry.$box_el.height()
previousBoxBottom = focused_entry_top + focused_entry.$box_el.height()
previousIndicatorBottom = focused_entry_top + focused_entry.$indicator_el.height()
for entry in entries_after
height = entry.$box_el.height()
original_top = entry.scope.entry.screenPos.y
top = Math.max(original_top, previousBottom + ENTRY_PADDING)
previousBottom = top + height
entry.$box_el.css(top: top, bottom: 'auto')
entry.$indicator_el.css(top: top, bottom: 'auto')
box_height = entry.$box_el.height()
box_top = Math.max(original_top, previousBoxBottom + BOX_PADDING)
indicator_height = entry.$indicator_el.height()
indicator_top = Math.max(original_top, previousIndicatorBottom + INDICATOR_PADDING)
previousBoxBottom = box_top + box_height
previousIndicatorBottom = indicator_top + indicator_height
entry.$box_el.css(top: box_top, bottom: 'auto')
entry.$indicator_el.css(top: indicator_top, bottom: 'auto')
entry.$callout_el.removeClass("rp-entry-callout-inverted")
entry.$callout_el.css(top: original_top + line_height, height: top - original_top)
if scope.ui.reviewPanelOpen
callout_height = box_top - original_top
else
callout_height = indicator_top - original_top
entry.$callout_el.css(top: original_top + line_height, height: callout_height)
sl_console.log "ENTRY", {entry: entry.scope.entry, top}
previousTop = focused_entry_top
previousBoxTop = focused_entry_top
previousIndicatorTop = focused_entry_top
entries_before.reverse() # Work through backwards, starting with the one just above
for entry in entries_before
height = entry.$box_el.height()
original_top = entry.scope.entry.screenPos.y
original_bottom = original_top + height
bottom = Math.min(original_bottom, previousTop - ENTRY_PADDING)
top = bottom - height
previousTop = top
entry.$box_el.css(top: top)
entry.$indicator_el.css(top: top, bottom: 'auto')
box_height = entry.$box_el.height()
original_box_bottom = original_top + box_height
box_bottom = Math.min(original_box_bottom, previousBoxTop - BOX_PADDING)
box_top = box_bottom - box_height
indicator_height = entry.$indicator_el.height()
original_indicator_bottom = original_top + indicator_height
indicator_bottom = Math.min(original_indicator_bottom, previousIndicatorTop - INDICATOR_PADDING)
indicator_top = indicator_bottom - indicator_height
previousBoxTop = box_top
previousIndicatorTop = indicator_top
entry.$box_el.css(top: box_top, bottom: 'auto')
entry.$indicator_el.css(top: indicator_top, bottom: 'auto')
entry.$callout_el.addClass("rp-entry-callout-inverted")
entry.$callout_el.css(top: top + line_height + 1, height: original_top - top)
if scope.ui.reviewPanelOpen
callout_top = box_top + line_height
else
callout_top = indicator_top + line_height
entry.$callout_el.css(top: callout_top + 1, height: original_top - callout_top + line_height)
sl_console.log "ENTRY", {entry: entry.scope.entry, top}
scope.$watch "reviewPanel.entryGeneration", (value) ->

26
services/web/public/stylesheets/app/editor/review-panel.less
View file

@ -22,7 +22,7 @@
@rp-entry-arrow-width : 4px;
@rp-semibold-weight : 600;
@review-panel-width : 230px;
@review-off-width : 20px;
@review-off-width : 22px;
@rp-scroller-offset : 30px;
@ -83,7 +83,7 @@
top: 0;
left: 0;
right: 0;
z-index: 1;
z-index: 2;
}
.review-panel-scroller {
@ -103,13 +103,20 @@
.rp-entry-indicator {
display: block;
position: absolute;
left: 1px;
right: 1px;
left: 2px;
right: 2px;
text-align: center;
background-color: @rp-highlight-blue;
border-radius: 3px;
color: #FFF;
cursor: pointer;
transition: top 0.3s, left 0.1s, right 0.1s;
&-focused {
left: 0px;
right: 4px;
z-index: 1;
}
}
.rp-entry-wrapper {
@ -323,13 +330,13 @@
.rp-entry-callout {
position: absolute;
width: 3px;
width: 1px;
border-top: 1px solid grey;
border-right: 1px dashed grey;
&::after {
content: "";
position: absolute;
width: 3px;
width: 1px;
top: -1px;
left: 3px;
bottom: 0;
@ -443,6 +450,13 @@
}
.rp-entry-callout {
width: 3px;
&::after {
width: 3px;
}
}
.rp-entry-indicator {
display: none;