github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Sort out scroll bar positions and scroll position transitions

Browse source
This commit is contained in:
James Allen 2016-11-17 14:29:35 +00:00
parent 52ca272ae8
commit 15d8f6c661
6 changed files with 60 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

5
services/web/app/views/project/editor/review-panel.jade
View file

@ -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")

8
services/web/public/coffee/ide/editor/directives/aceEditor.coffee
View file

@ -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")
@ -300,8 +302,8 @@ define [
# deletes and then inserts document content
session.setAnnotations scope.annotations
if scope.eventsBridge?
session.on "changeScrollTop", onScroll
editor.renderer.on "scrollbarVisibilityChanged", onScrollbarVisibilityChanged
setTimeout () ->
# Let any listeners init themselves

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

@ -23,12 +23,23 @@ 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 = {}
$scope.$watch "editor.open_doc_id", (open_doc_id) ->

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

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

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

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