Sort out scroll bar positions and scroll position transitions

services/web/app/views/project/editor/editor.jade

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

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

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

services/web/public/coffee/ide/editor/directives/aceEditor.coffee

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

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

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

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

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

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

@@ -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,24 +487,27 @@
 		}
 
 #editor {
-	.rp-show-expanded & {
-		right: @review-panel-width;
-		left: 0px;
-		width: auto;
+	.rp-size-mini & {
+		right: @review-off-width;
 		.ace-editor-body {
 			overflow: visible;
 			.ace_scrollbar-v {
-				right: -@review-panel-width;
+				right: -@review-off-width;
 			}
 		}
 	}
+
+	.rp-size-expanded & {
+		right: @review-panel-width;
+		left: 0px;
+		width: auto;
+	}
 	
-	.rp-show-mini & {
-		right: @review-off-width;
+	.rp-state-current-file-expanded & {
 		.ace-editor-body {
 			overflow: visible;
 			.ace_scrollbar-v {
-				right: -@review-off-width;
+				right: -@review-panel-width;
 			}
 		}
 	}