mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Sort out scroll bar positions and scroll position transitions
This commit is contained in:
parent
52ca272ae8
commit
15d8f6c661
6 changed files with 60 additions and 33 deletions
|
@ -9,7 +9,17 @@ div.full-size(
|
|||
minimum-restore-size-east="300"
|
||||
allow-overflow-on="'center'"
|
||||
)
|
||||
.ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'rp-show-expanded': ui.reviewPanelOpen, 'rp-show-mini': reviewPanel.hasEntries && !ui.reviewPanelOpen }")
|
||||
.ui-layout-center(
|
||||
ng-controller="ReviewPanelController",
|
||||
ng-class="{\
|
||||
'rp-state-current-file': (reviewPanel.subView === SubViews.CUR_FILE),\
|
||||
'rp-state-current-file-expanded': (reviewPanel.subView === SubViews.CUR_FILE && ui.reviewPanelOpen),\
|
||||
'rp-state-current-file-mini': (reviewPanel.subView === SubViews.CUR_FILE && !ui.reviewPanelOpen),\
|
||||
'rp-state-overview': (reviewPanel.subView === SubViews.OVERVIEW),\
|
||||
'rp-size-mini': (!ui.reviewPanelOpen && reviewPanel.hasEntries),\
|
||||
'rp-size-expanded': ui.reviewPanelOpen\
|
||||
}"
|
||||
)
|
||||
.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")
|
||||
span(ng-show="editor.open_doc_id")
|
||||
i.fa.fa-spin.fa-refresh
|
||||
|
|
|
@ -1,7 +1,4 @@
|
|||
#review-panel(
|
||||
|
||||
ng-class="{ 'rp-state-current-file': (reviewPanel.subView === SubViews.CUR_FILE), 'rp-state-current-file-expanded': (reviewPanel.subView === SubViews.CUR_FILE && ui.reviewPanelOpen), 'rp-state-current-file-mini': (reviewPanel.subView === SubViews.CUR_FILE && !ui.reviewPanelOpen), 'rp-state-overview': (reviewPanel.subView === SubViews.OVERVIEW) }"
|
||||
)
|
||||
#review-panel
|
||||
.review-panel-toolbar
|
||||
| Track Changes
|
||||
input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
|
||||
|
|
|
@ -244,10 +244,12 @@ define [
|
|||
scope.eventsBridge.emit "aceScrollbarVisibilityChanged", vRenderer.scrollBarV.isVisible, vRenderer.scrollBarV.width
|
||||
|
||||
if scope.eventsBridge?
|
||||
editor.renderer.on "scrollbarVisibilityChanged", onScrollbarVisibilityChanged
|
||||
|
||||
scope.eventsBridge.on "externalScroll", (position) ->
|
||||
editor.getSession().setScrollTop(position)
|
||||
scope.eventsBridge.on "refreshScrollPosition", () ->
|
||||
session = editor.getSession()
|
||||
session.setScrollTop(session.getScrollTop() + 1)
|
||||
session.setScrollTop(session.getScrollTop() - 1)
|
||||
|
||||
attachToAce = (sharejs_doc) ->
|
||||
lines = sharejs_doc.getSnapshot().split("\n")
|
||||
|
@ -299,9 +301,9 @@ define [
|
|||
# need to set annotations after attaching because attaching
|
||||
# deletes and then inserts document content
|
||||
session.setAnnotations scope.annotations
|
||||
|
||||
if scope.eventsBridge?
|
||||
session.on "changeScrollTop", onScroll
|
||||
|
||||
session.on "changeScrollTop", onScroll
|
||||
editor.renderer.on "scrollbarVisibilityChanged", onScrollbarVisibilityChanged
|
||||
|
||||
setTimeout () ->
|
||||
# Let any listeners init themselves
|
||||
|
|
|
@ -23,11 +23,22 @@ define [
|
|||
|
||||
$scope.reviewPanelEventsBridge = new EventEmitter()
|
||||
|
||||
scrollbar = {}
|
||||
$scope.reviewPanelEventsBridge.on "aceScrollbarVisibilityChanged", (isVisible, scrollbarWidth) ->
|
||||
if isVisible
|
||||
$reviewPanelEl.css "right", "#{ scrollbarWidth }px"
|
||||
scrollbar = {isVisible, scrollbarWidth}
|
||||
updateScrollbar()
|
||||
|
||||
updateScrollbar = () ->
|
||||
if scrollbar.isVisible and $scope.reviewPanel.subView == $scope.SubViews.CUR_FILE
|
||||
$reviewPanelEl.css "right", "#{ scrollbar.scrollbarWidth }px"
|
||||
else
|
||||
$reviewPanelEl.css "right", "0"
|
||||
|
||||
$scope.$watch "reviewPanel.subView", (subView) ->
|
||||
return if !subView?
|
||||
updateScrollbar()
|
||||
if subView == $scope.SubViews.CUR_FILE
|
||||
$scope.$broadcast "review-panel:layout"
|
||||
|
||||
changesTrackers = {}
|
||||
|
||||
|
|
|
@ -129,4 +129,8 @@ define [
|
|||
scope.reviewPanelEventsBridge.emit "externalScroll", scrollTop
|
||||
|
||||
scope.reviewPanelEventsBridge.on "aceScroll", scrollPanel
|
||||
scope.$on "$destroy", () ->
|
||||
scope.reviewPanelEventsBridge.off "aceScroll"
|
||||
|
||||
scope.reviewPanelEventsBridge.emit "refreshScrollPosition"
|
||||
}
|
||||
|
|
|
@ -61,13 +61,13 @@
|
|||
|
||||
#review-panel {
|
||||
display: none;
|
||||
.rp-show-expanded & {
|
||||
.rp-size-expanded & {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: @review-panel-width;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rp-show-mini & {
|
||||
.rp-size-mini & {
|
||||
display: block;
|
||||
width: @review-off-width;
|
||||
overflow: hidden;
|
||||
|
@ -84,7 +84,7 @@
|
|||
|
||||
.review-panel-toolbar {
|
||||
display: none;
|
||||
.rp-show-expanded & {
|
||||
.rp-size-expanded & {
|
||||
display: block;
|
||||
}
|
||||
.rp-state-current-file & {
|
||||
|
@ -102,10 +102,10 @@
|
|||
}
|
||||
|
||||
.rp-entry-list {
|
||||
.rp-show-expanded & {
|
||||
.rp-size-expanded & {
|
||||
width: @review-panel-width;
|
||||
}
|
||||
.rp-show-mini & {
|
||||
.rp-size-mini & {
|
||||
width: @review-off-width;
|
||||
}
|
||||
|
||||
|
@ -118,7 +118,7 @@
|
|||
|
||||
.rp-state-overview & {
|
||||
flex-grow: 2;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -128,7 +128,7 @@
|
|||
|
||||
.rp-entry-indicator {
|
||||
display: none;
|
||||
.rp-show-mini & {
|
||||
.rp-size-mini & {
|
||||
display: block;
|
||||
}
|
||||
position: absolute;
|
||||
|
@ -450,7 +450,7 @@
|
|||
.rp-nav {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
.rp-show-mini & {
|
||||
.rp-size-mini & {
|
||||
display: none;
|
||||
}
|
||||
.rp-state-current-file & {
|
||||
|
@ -487,19 +487,7 @@
|
|||
}
|
||||
|
||||
#editor {
|
||||
.rp-show-expanded & {
|
||||
right: @review-panel-width;
|
||||
left: 0px;
|
||||
width: auto;
|
||||
.ace-editor-body {
|
||||
overflow: visible;
|
||||
.ace_scrollbar-v {
|
||||
right: -@review-panel-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rp-show-mini & {
|
||||
.rp-size-mini & {
|
||||
right: @review-off-width;
|
||||
.ace-editor-body {
|
||||
overflow: visible;
|
||||
|
@ -508,4 +496,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rp-size-expanded & {
|
||||
right: @review-panel-width;
|
||||
left: 0px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rp-state-current-file-expanded & {
|
||||
.ace-editor-body {
|
||||
overflow: visible;
|
||||
.ace_scrollbar-v {
|
||||
right: -@review-panel-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue